вопрос мастерам div+css @ DeForum.ru

0 Сообщения: 3 Зарегистрирован: 27.12.06

Сделал header с помощью div и стилей css. Согласно теории это должно уменьшить размер кода и упростить в дальнейшем изменение, но кода почему-то получилось столько что таблицей ничуть не хуже. Подскажите плиз где лишнего написал. Нужна оптимизация кода.

Код:

/* CSS Document */
#wrap {
width: 67%; /*center hack*/
margin:0 auto; /*center hack*/
text-align:left;
}

#wrap_first_part {
float:left; width:75%;
background-color:#FFFFFF;
}

#wrap_second_part {
float:right; width:25%;
background-color:#FF9933;
}

#menu_one {
background-color:#666666;
height:20px;
margin-right: 1px;
}

#flash_design {
background-color:#0099CC;
height:100px;
margin: 1px 1px 1px;
}

#menu_sec {
background-color:#666666;
height:20px;
margin-right: 1px;
}

#menu_thr {
background-color:#FFCC33;
height:121px;
}

#search {
background-color:#FF9966;
height:21px;
}

/* end css */


<div id="wrap">
   <div id="wrap_first_part">
         <div id="menu_one">
            первое меню
         </div>
         <div id="flash_design">
            флеш
         </div>
         <div id="menu_sec">
            второе меню
         </div>
      </div>
   
      <div id="wrap_second_part">
         <div id="menu_thr">
            опять меню
         </div>
         <div id="search">
            search
         </div>
   </div>
</div> 

0 Сообщения: 434 Зарегистрирован: 09.07.06

1. Убрать лишние div'ы — в идеале должен остаться один #header
2. Повторяющиеся свойства указывать только один раз: menu_one и menu_sec — 2 раза одно и то же, следовательно пишем

Код:

#menu_one,#menu_sec { 
background-color:#666666; 
height:20px; 
margin-right: 1px; 
}

и т.д.

15 Сообщения: 1219 Зарегистрирован: 02.02.05

Цитата:

background-color:#FFFFFF;

Пишите лучше white вместо #FFFFFF

Infinite, чем лучше, кстати?

15 Сообщения: 1219 Зарегистрирован: 02.02.05

Crazy, этакая элегантность кода. Вроде маникюра у мужиков )

Infinite, ну тогда нужно извращаться до конца -- со всякими olive, maroon и иже с ними.

Crazy писал(а):

Infinite, ну тогда нужно извращаться до конца -- со всякими olive, maroon и иже с ними.

Метросексуалы, блин :-)

Код:

background-color: #fff;

и точка. А то maroon легко перепутать с moron :laugh:

0 Сообщения: 434 Зарегистрирован: 09.07.06

tentoys писал(а):

Crazy писал(а):

Infinite, ну тогда нужно извращаться до конца -- со всякими olive, maroon и иже с ними.

Метросексуалы, блин :-)

Код:

background-color: #fff;

и точка. А то maroon легко перепутать с moron :laugh:

+1 и короче чем white на 1 байт.

вы собираетесь обращаться к своим меню джаваскриптом? Зачем столько айдишек? Если нет — рациональнее использовать один класс и назначать его сколько угодно раз без дублирования стилевых правил для разных айди. К тому же, теоретически, броузеру проще строить дом-модель (наверное) при парсинге вашего кода.

Далее, классы можно «складывать», вызывая их из элемента через пробел, т.е. дополнить напр. базовый класс свойствами из дополнительного, чего нельзя сделать с айди (аналог class="class_name" id="id_name", где стили дополнятся или переопределятся): class="class_name1 class_name2 class_name3".

Далее, следуя вульгарной логике, меню есть список, т.е. ваши вложенные див-ы — суть<li>, а их контейнер — <ul>. Если пойти еще дальше в вопросах оптимизации, то объявить элементы меню блоками при необходимости (если они именно ссылки-хрефы или спан-ы с вызовом onclick(), т.е. инлайн-элементы) и использовать для них все прелести блочных стилей, тогда можно обойтись всего одним внешним контейнером.
Далее, для экономии байт и быстроты набора на сегодня можно смело использовать «стенографическую» (shorthand) запись стилей.

DeДверь
Логин:
Пароль:
	Автологин