Верстка меню, нужна помощь профи :)

Всем привет, столкнулся с проблемой!
Сверстал сайт, но некоторые моменты мне не понравились, поэтому решил все же создать тему, чтобы спросить совета профессионалов!
Итак, момент №1.

Верстаю верх сайта.
Создаю контейнер с id=header, в нем два контейнера: "logo" и "contact", float'ами двигаю один влево, другой вправо (правильньный ли подход?)

Теперь возникает проблема поместить менюшку на нужное место: я сделал абсолютным позиционированием: это правильно?

Как бы сделали вы?

Код на всякий:

<div id="header">


     <div id="logo">

     </div>


     <div id="contact">

     </div> 


     <div id="top_menu">

         <ul>

            <li><a href="index.html">Все и вся</a></li>

            <li><a href="index.html">Хочу что-то</a></li>

            <li><a href="index.html">Хочу новенького!</a></li>

            <li><a href="index.html">Поговорить</a></li>

            <li><a href="index.html">Немного истории</a></li>

         </ul>        

 </div>


и css:


#header {

	width:auto;

	height:180px;

}

#logo {

    background:url(images/logo.jpg) no-repeat;

    width:259px;

    height:150px;

    float:left;

}


#contact {

	background:url(images/contact.gif) no-repeat;

	width:254px;

	height:85px;

	float:right;

}


#top_menu {

	background-image:url(images/top_menu.gif);

	width:728px;

	height:43px;

	position:absolute;

	margin-top:110px;

	margin-left:200px;

}


#top_menu ul {

	list-style:none;

	width:100%;

	height:43px;

}


#top_menu li{

	float:left;

}


#top_menu a{

	display:block;

	height:43px;

	padding:0 15px;

	float:left;

	font:100%/40px "Trebuchet MS", Arial, Helvetica, sans-serif;

	color:#fff;

	text-decoration:none;

	text-align:center;

	margin-left:13px;

	text-shadow: 1px 1px 0px #333;

}


#top_menu a:hover{

	background:url(images/bg_button.jpg) top left repeat-x;

}

Цитата ("And-Re"):

Теперь возникает проблема поместить менюшку на нужное место: я сделал абсолютным позиционированием: это правильно?

Не бойтесь использовать абсолютное позиционирование...контакты я бы тоже спозиционировал абсолютно...тут нет ничего страшного и зазорного.
Только там иногда траблы с ie6...указывайте родителю точную высоту или 1%

Спасибо за совет!

Только

#top_menu {

  ...

   top:110px;

   left:200px;

}

Так правильней и короче.

Цитата ("trueW3C"):

Только

#top_menu {

  ...

   top:110px;

   left:200px;

}

Так правильней и короче.

Еще раз спасибо!

Я не использую к примеру для меню доп див, я задаю ul id и тогда для ul задаю все параметры дива. И еще вы не экономно графику делаете, к примеру меню весило бы меньше если бы вы его разбили на левый, правый угол и повт. часть по центру

Цитата ("zombieman"):

Я не использую к примеру для меню доп див, я задаю ul id и тогда для ul задаю все параметры дива. И еще вы не экономно графику делаете, к примеру меню весило бы меньше если бы вы его разбили на левый, правый угол и повт. часть по центру

А примерчик можно где нибудь глянуть?

Цитата ("zombieman"):

Я не использую к примеру для меню доп див, я задаю ul id и тогда для ul задаю все параметры дива.

Это короче, но нарушается семантика. Такой код легче к восприятию

<div id="top-menu">

    <ul>

        <li><a href="index.html">Все и вся</a></li>

        <li><a href="index.html">Хочу что-то</a></li>

        <li><a href="index.html">Хочу новенького!</a></li>

        <li><a href="index.html">Поговорить</a></li>

        <li><a href="index.html">Немного истории</a></li>

    </ul>        

</div>

Цитата ("zombieman"):

к примеру меню весило бы меньше если бы вы его разбили на левый, правый угол и повт. часть по центру

Правое и левое закругление можно тогда соединить в одну картинку. -1 запрос.
Эти картинки можно впихнуть в :before, :after, а для ие сделать одноразовый экспрешн....но это высший пилотаж

zombieman, для тебя код...я так всегда делаю. Шел до этого 1 год...

#top-menu { position: relative; height: 35px }

#top-menu:before { content: ' '; display:block; position:absolute; top: 0... }

#top-menu:after { content: ' '; display:block; position:absolute; top: 0... }

Для IE6-7 - в файле ie.css

#top-menu {

	zoom: expression(

		runtimeStyle.zoom = 1,

		insertBefore(createElement('before')),

		insertBefore(createElement('after'))

	);

}


#top-menu before { content: ' '; ... }

#top-menu after { content: ' '; ... }

IE8 посылаем...в 7 версию...т.е. он работает как IE7

<meta http-equiv="X-UA-Compatible" content="IE=7" />

Теперь можно использовать один файл ie.css для всех IE. Но это уже высший пилотаж для семантики HTML

:before :after не юзаю ибо много костылей нужно,по запросам не понял

Цитата ("trueW3C"):

Это короче, но нарушается семантика. Такой код легче к восприятию

Почему нарушается?

Цитата ("trueW3C"):

Это короче, но нарушается семантика

Как раз лишний див это плохо.

С div красивей. Ну извеняйте, моя привычка...мне почему то так удобней Да и никто не жаловался.
Список это блочный элемент, но это не блок.

Цитата ("zombieman"):

:before :after не юзаю ибо много костылей нужно,по запросам не понял

Очень много костылей если не знаешь, :before :after очень удобная штука. Я больше года без них верстал...ну а теперь доволен что верстаю с ними.
В общем смотри доклады по верстке с яндекс субботника

Для IE6-7 вот костыль...не так много + повторить стили :before :after , только без :

#top-menu {

   zoom: expression(

      runtimeStyle.zoom = 1,

      insertBefore(createElement('before')),

      insertBefore(createElement('after'))

   );

}

#top-menu before { ...  }

#top-menu after { ... }

Ещё раз повторю...только повторить стили...и написать четырёх строчный костыль...

Вообще в плане экспешенов IE рулит все браузеры...это офигенная штука, которая сейчас частями в CSS3 появляется и наверно многое будет в CSS4

Если на лого не нужна ссылка, а судя по коду, и правда не нужна, то вообще в упор не вижу проблемы, которую тут наворотили.

<div class="header">

     <div class="contact">ляляля телефоны</div>

     <div class="top_menu">

          <a href="index.html">Все и вся</a>

          ...

          <a href="index.html">Немного истории</a>

     </div>

<div style="clear: both;"></div>

</div>


и css (только часть, что касается именно структурного расположения, плюс уже цвета-отступы и прочие красоты расставить, а вот фиксацией размеров не нужно увлекаться, они здесь явно лишние):


.header { background: url(images/logo.jpg) left top no-repeat; }

.contact { float: right; } /* тут вообще не понял смысла фоновой картинки, ну да дело хозяйское */ 

.top_menu { background: url(images/top_menu.gif) no-repeat; clear: right; float: right; }

.top_menu a { display: block; float: left; text-align: center; }

Ну и как правильно заметили, действительно картинку меню стоит порезать на три части.

О май гад... Зачем before/after? Это же лишний гемор.
Думал объяснить, но легче сделать (7 минут времени) и показать вживую: посилання

Цитата ("sitesfaction"):

before/after

Это оффтоп, мы с zombieman общались

Так я думаю тему можно закрыть) Или тип того забить...

:before и :after.
Никогда не понимал когда срабатывают эти псевдоклассы

Я бы спозиционировал все три элемента верхушки и не парился бы....Кстати, так в основном с хедером в повседневной вёрстке и делаю.....
Не надо бояться абсолютного позиционирования, в нем нет ничего плохого, если уметь пользоваться.....Кроме того, где-то читал, что элементы с абсолютным позиционированием грузятся быстрее, чем флоаты

Цитата ("Anexroid"):

:before и :after.
Никогда не понимал когда срабатывают эти псевдоклассы

+1, имхо это не высший пилотаж, а ненужный выпендреж.......если сильно надо разбивать блок меню на три картинки (не факт, что ваши три картинки в сумме будут весить намного меньше 1й картинки целиком),то тут все делается легко и просто без всяких псевдоклассов.......Идите простым путем, народ