Как сделать так, чтобы эти элементы правильно выстраивались с помощью 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 - это зеленое слово с надписью «Панель инструментов».

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

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

Answer 1

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

вам нужно подумать об этом коде:

<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 намного проще, так как вы можете просто float h1 до right (объявить его как block) и ul до 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 параметра для поля, они обозначаются следующим образом ...

поле: верхнее правое нижнее левое

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

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

Answer 4

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

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