Как я могу сделать эти элементы правильными, используя CSS?

Question

Вот как мое меню прямо сейчас выглядит:

Вот как я хочу, чтобы это выглядело:

Прямо сейчас у меня есть следующие 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; 
} 

И следующий 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> 

Я пробовал миллион разных вещей, чтобы получить titleText 40px с правой стороны и 50px сверху, и с вкладками, плавающими 40px с левого нижнего уровня, но все, что я пытаюсь закрыть, но потом не работает в IE7 по какой-то причине.

Меню представляет собой серое полотно. menuItem - это вкладки. titleText - это зеленое слово, которое гласит «Dashboard».

Мне нужно стилизовать menuItem, menu и titleText, чтобы оно отображалось как правильное изображение ниже и все еще работает в IE7?

Любая помощь будет принята с благодарностью. Я пытался это сделать ненадолго.

Answer 1

Я бы использовал либо абсолютное позиционирование (слева, сверху), либо поплавки (padding-left, padding-top, float: left); а не комбинация обоих.

Кстати: это относится не только к меню, но и к названию с правой стороны.

Answer 2

Удалить позицию: абсолютная от #menuitem, и добавьте верхний отступы для #menu

#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

Для titleText DIV, вы должны быть в состоянии просто дать ему запас ...

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

в случае, если вы еще не знаете, когда вы перечисляете 4 параметра для поля, они обозначаются следующим образом:

margin: TOP RIGHT BOTTOM LEFT

Что касается ответа Джоэла Поттера, я должен был бы согласиться, отнять абсолютное позиционирование от #menuItem, но также вам тогда не нужно position: relative, назначенное на #menu.

Его единственная цель, по-видимому, сохраняла #menuItem относительно #menu, но без этого она абсолютно не укладывается сейчас.

Answer 4

Это очень просто, но для вашего html требуется небольшое изменение, потому что вам нужно разместить текст панели инструментов над меню.

вы должны думать об этом виде кода:

<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> 

это будет позволит вам сделать ваш CSS намного проще, так как вы можете просто floath1 к right (объявить его как block) и ul до left

После этого вы можете просто добавить необходимые поля и другие стили.