Перейти к содержимому



Блочная верстка, подскажите каким способом сверстать header (меню)

#1 respectorr

respectorr
  • Пользователь
  • 1 сообщений
  • Репутация: 0
0

Отправлено 16 Март 2012 - 11:03

Не могу сверстать header , или может есть другие способы....
Прикрепляю header какой нужно сверстать. Пока получилось вот что
asd.ho.ua(только вверху банер необходимо закрыть) .
Пробывал разные варианты, последнее это с помощью тэгов

border:1px solid #283a8b;
border-top-left-radius:10px;
-webkit-border-radius:6px;
-moz-border-top-left-radius:10px;
-khtml-border-top-left-radius:10px;


задавал стиль первой и последней кнопки.....но border как сделать таким?
Подскажите пожалуйста каким наилучшим образом это можно осуществить?


header http://saveimg.ru/sh...d75d345d9cad903

 

 

  • 0

#2 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 19 Март 2012 - 11:06

На картинке которую ты прикрепил, очень плохо видно бордер верхний - что там там должно быть.
Если по поводу верхнего бордера:
Закругление всего фрейма - ты делаешь главным фреймом, в котором у тебя лежит самj Меню (ul)
в Лишке ты уже делаешь верхний бордер, этим самым у тебя бордер получится не вписанный в закругление.
Переливание ты делаешь естественно картинкой, устанавливая левый блик (img) на фон той же <li> а правый на фон <a>
Дальше корректируешь блики псевдоклассами типа first и last-child.

Ща накину небольшой пример....
  • 0

#3 c0ns0l3

c0ns0l3
  • Пользователь
  • 264 сообщений
  • Репутация: 49

Отправлено 19 Март 2012 - 11:41


<style type="text/css">

    div#menu_container {

	    background: #283a8b;

	    -webkit-border-radius: 10px;

	    -moz-border-radius: 10px;

	    border-radius: 10px;

	   

	    height: 83px;

	    padding: 0 10px 20px 10px; /*Делаем отступы*/

	   

    }

    ul#menu {

	    height: 62px;

	    list-style: none;

	    display: block;

	    border-bottom: #b4b8c8 solid 1px; /*нижний бордер*/

    }

    ul#menu > li {

	    background: url([url="http://test2.adk.ua/images/blink.png"]http://test2.adk.ua/images/blink.png[/url]) no-repeat 100% -100px; /*блик справа*/

	    border-top: solid 2px #dfdfdf; /*твой бордер сверху*/

	    border-right: solid 1px white; /*бордер между елементами*/

	    display: block;

	    margin: 0; padding: 0;

	    float: left;

    }

    ul#menu > li >a {

	    background: url([url="http://test2.adk.ua/images/blink.png"]http://test2.adk.ua/images/blink.png[/url]) no-repeat 0 0; /*блик слева*/

	    padding: 5px 10px 23px 10px; /*растягиваем ссылку на весь елемент и отступы подгоняем*/

	    line-height: 30px;

	    text-transform: uppercase;

	    color: #fff;

	   

	    display: block;

	    font-weight: bold;

	    text-decoration: none;

    }

   

	    /* убираем блик и бордер боковой с 1го и последнего елемента меню*/

    ul#menu > li:last-child {border-right: none;background: none;}

    ul#menu > li:first-child>a {background: none;}

</style>

<div id="menu_container">

    <ul id="menu">

	    <li><a href="#">Главная</a></li>

	    <li><a href="#">Важно знать</a></li>

	    <li><a href="#">Словарь воды</a></li>

	    <li><a href="#">Статьи</a></li>

	    <li><a href="#">Акции</a></li>

	    <li><a href="#">Монтаж и сервис</a></li>

	    <li><a href="#">Доставка и оплата</a></li>

	    <li><a href="#">Контакты</a></li>

    </ul>

</div>


  • 0

#4 Sosnovskij

Sosnovskij
  • Администратор
  • 3 886 сообщений
  • Репутация: 566

Отправлено 19 Март 2012 - 12:14

Переместил в приемы верстки.
  • 0

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог http://sosnovskij.ru/.




Оформление форума – IPBSkins.ru