Use something like this. Use your
<!--Main Toolbar----->
<div class="toolbar chrome">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
<a class="button" href="#searchForm">Search Patient</a>
</div>
<!--Menubar----->
<div class="menubar chrome">
<span class="tab1"><a href="#patient">Patient</a></span>
<span class="tab2"><a
href="#scheduler">Scheduler</a></span>
<span class="tab3"><a href="#reports">Reports</a></span>
<span class="tab4"><a href="#setup">Setup</a></span>
</div>
Change CSS for menubar like this
div.menubar {
display:block;
position: relative;
width:100%;
background: url(../images/listGroup.png) repeat-x;
padding: 1px 10px;
top: 0px;
margin-bottom: -2px;
border-top: 1px solid #7d7d7d;
border-bottom: 1px solid #999999;
white-space: nowrap;
}
div.menubar > span {
display:inline;
width:100%;
font-size: 17px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
color: #FFFFFF;
}
Search for "body > *:not(.toolbar)" in iUI.css and replace with
"body > *:not(.chrome)" and increase "top: 70px;"
I hope this helps....
On Dec 11, 1:16 pm, Karim-Pierre Maalej <[EMAIL PROTECTED]> wrote:
> Hi all,
>
> For my application, I use iUI but I need a little menubar with a few
> functions, positioned right under the main toolbar, like facebook has.
>
> I have wrote a new class in the iui.css file, that reads like this:
>
> ul.menubar {
> display:inline;
> position: relative;
> width:99%;
> background: url(listGroup.png) repeat-x;
> padding: 1px 10px;
> top: 0px;
> margin-bottom: -2px;
> border-top: 1px solid #7d7d7d;
> border-bottom: 1px solid #999999;
> white-space: nowrap;
>
> }
>
> ul.menubar > li {
> display:inline;
> width:100%;
> font-size: 17px;
> font-weight: bold;
> text-shadow: rgba(0, 0, 0, 0.4) 0 1px 0;
> color: #FFFFFF;
>
> }
>
> I have also altered the "body > ul" elements into
> "body > ul:not(.menubar)" in order to avoid confusion.
>
> The HTML code associated is:
> <ul class="menubar">
> <li><a href="one">hullo1</a></li>
> <li><a href="two">hullo2</a></li>
> <li><a href="three">hullo3</a></li>
> </ul>
>
> However, I still have problems that I can't spot out. It must be
> something stupid, but I don't see my mistake.
>
> The first problem is that when I test my page in Firefox, the bar does
> not extend to the page width, but merely encompasses the elements and
> that's all.
>
> The second problem is that when I test my page in WebKit (latest build,
> using Qt/Linux), the menubar does not appear at all...
>
> I thought maybe some of you have faced this kind of problem before, or
> even better has already designed a menubar like that.
>
> Thanks.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en
-~----------~----~----~----~------~----~------~--~---
