Форум PHP программистов > Объясните логику как это верстать

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Объясните логику как это верстать

grant

20.09.2011 - 14:53

вот есть меню http://pixs.ru/showimage/menupng_4695946_3008449.png

объясните как это можно сверстать? уголки ещё надо + когда hover, должен быть цвет подложки черный.

интересует table верстка, хотя можно и div.

в принципе я это сверстал, но меня не устривает что меню фиксированных размеров, оно должно быть 100%.

Winston

20.09.2011 - 14:55

grant
Покажи свой код.

grant

20.09.2011 - 15:02

Цитата (Winston @ 20.09.2011 - 10:55)

grant
Покажи свой код.

да я неправильно сделал. я просто вырезал подложку без текста естественно, а текст в центр добавил через align=center и cellspacing=10. Знаю что надо вырезать полоску высотой 1px и через background задвать...но тогда без углов получится и линии между разделами.

Winston

20.09.2011 - 15:15

Как-то так ?

Свернутый текст

<style type="text/css">
.menu{
    background-color: WhiteSmoke;
    border: 1px solid;
    display: table;
    height: 45px;
    width: 350px;
    margin: 0 auto;
}
.menu ul{
    list-style: none;
    margin: 0;
    padding: 0;
}
.menu li{
    float:left;
    margin-right: 5px;
    font-weight: bold;
    font-size: 18px;
    background-color: Gainsboro;
    height: 25px;
    width: 95px;
    text-align: center;
    border-radius: 0px 0 5px 5px;
}

.menu li:hover{
    background-color: black;
    color: white;
    cursor: pointer;
}
</style>

<div class="menu">
    <ul>
        <li>Главная</li>
        <li>Вторая</li>
        <li>Третья</li>
    </ul>
</div>

grant

20.09.2011 - 15:24

угу как-то так, дальше буду сам.

спс.

Быстрый ответ:

Здесь расположена полная версия этой страницы.