Wie kann ich diese Elemente mithilfe von CSS korrekt ausrichten? Hier

Question

ist, wie mein Menü jetzt aussieht:

Hier ist, wie ich es will aussehen:

Im Moment habe ich die folgende CSS:

#menu 
{ 
    position:relative; 
    width: 940px; 
    height:90px; 

} 

#menuItem 
{ 
    position: absolute; 
    bottom: 0px; 
    padding-left: 50px; 
    float: left; 
    width: 600px; 
} 

.titleText 
{ 
    float: right; 
    color:#209202; 
    font-size:22px; 
    font-style:italic; 
    font-family:Georgia; 
    font-weight:bold; 
} 

Und der folgende HTML:

<div id="titleBar"> 

     <div id="menu"> 
      <div id="menuItem"> 


<ul class="tabs"> 
    <li><a href="/dashboard/"> 

     <img alt="Dashboard" src="/Content/Images/Dashboard_green.png" /> 
     </a> 
    </li> 
    <li><a href="/placements/"> 

     <img alt="Place Accounts" src="/Content/Images/Place_Accounts_white.png" /> 
     </a> 
    </li> 
    <li><a href="/messages"> 

     <img alt="Messages" src="/Content/Images/Messages_white.png" /> 
     </a> 
    </li> 
    <li><a href="/reports"> 

     <img alt="Reports" src="/Content/Images/Reports_white.png" /> 
     </a> 
    </li> 
    <li><a href="/admin"> 

     <img alt="Admin" src="/Content/Images/Admin_white.png" /> 
     </a> 
    </li> 
</ul> 

      </div> 
       <div class="titleText"> 

     Dashboard 

     </div> 
     </div> 

    </div> 

Ich habe eine Million verschiedene Dinge versucht, um titleText 40px von der rechten Seite und 50px von oben zu bekommen, und die Registerkarten 40px von der linken unteren schweben, aber alles, was ich versuche, bringt mich nahe, aber dann funktioniert nicht in IE7 aus irgendeinem Grund.

Menü steht für den gesamten grauen Balkenbereich. menuItem sind die Registerkarten. titleText ist das grüne Wort "Dashboard".

Ich sollte ich style menuItem, menu und titleText, so dass es wie das richtige Bild unten angezeigt und funktioniert immer noch in IE7?

Jede Hilfe wäre sehr willkommen. Ich habe es eine Weile blind versucht.

Answer 1

Ich würde entweder absolute Positionierung (links, oben) oder schwimmt (Padding-links, Padding-Top, Float: links); keine Kombination aus beidem.

Übrigens: Das gilt nicht nur für das Menü, sondern auch für den Titel auf der rechten Seite.

Answer 2

Remove position: absolute aus #menuitem, und fügen Sie eine Top-Polsterung

#menu 
{ 
    position:relative; 
    width: 940px;  
    height:40px; /* remember that height + padding = total height */ 
    padding-top:50px; /* adjust as necessary to push the tabs and text down */ 
} 

#menuItem 
{ 
    padding-left: 50px; 
    float: left; 
    width: 600px; 
} 

Answer 3

Für die titleText div #menu, sollten Sie in der Lage sein, nur um es Spielraum zu geben ...

.titleText 
{ 
    float: right; 
    color:#209202; 
    font-size:22px; 
    font-style:italic; 
    font-family:Georgia; 
    font-weight:bold; 
    margin: 50px 40px 0 0; 
} 

Wenn Sie nicht bereits wissen, wenn Sie 4 Parameter für den Rand auflisten, werden sie wie folgt bezeichnet ...

Rand: TOP RECHTEN UNTEN LINKS

Zu Joel Potter's Antwort, ich würde zustimmen müssen, nehmen Sie die absolute Positionierung von #menuItem, aber auch, Sie brauchen dann nicht mehr position: relative zu #menu bezeichnet.

Sein einziger Zweck schien #menuItem relativ zu #menu zu halten, aber ohne dass es jetzt absolut positioniert ist, gibt es keine Notwendigkeit dafür.

Answer 4

Dies ist sehr einfach, erfordert jedoch eine kleine Änderung an Ihrem HTML, da Sie den Dashboard-Text über dem Menü platzieren müssen.

müssen Sie über diese Art von Code denken:

<div id="mainmenu"> 
    <h1>Dashboard</h1> 
    <ul> 
     <li><a href="/dashboard/"><img alt="Dashboard" src="/Content/Images/Dashboard_green.png" /></a></li> 
     <li><a href="/placements/"><img alt="Place Accounts" src="/Content/Images/Place_Accounts_white.png" /></a></li> 
     <li><a href="/messages"><img alt="Messages" src="/Content/Images/Messages_white.png" /></a></li> 
     <li><a href="/reports"><img alt="Reports" src="/Content/Images/Reports_white.png" /></a></li> 
     <li><a href="/admin"><img alt="Admin" src="/Content/Images/Admin_white.png" /></a></li> 
    </ul> 
</div> 

dies werde können Sie Ihre CSS viel einfacher machen, wie Sie können einfach float die h1 zum right (es als block erklären) und die ul zu

danach können Sie einfach die erforderlichen Margen Polsterungen und andere stying hinzufügen.