| Автор |
Сообщение |
Сообщения: 287
Страна: Россия |
 15.03.2010 в 19:57 [Отредактировано: 15.03.2010 в 19:57]
Всем привет, столкнулся с проблемой!
Сверстал сайт, но некоторые моменты мне не понравились, поэтому решил все же создать тему, чтобы спросить совета профессионалов! 
Итак, момент №1.
Верстаю верх сайта.
Создаю контейнер с id=header, в нем два контейнера: "logo" и "contact", float'ами двигаю один влево, другой вправо (правильньный ли подход?)
Теперь возникает проблема поместить менюшку на нужное место: я сделал абсолютным позиционированием: это правильно?
Как бы сделали вы?
Код на всякий:
Код: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73<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;
}
|
Сообщения: 115
Страна: Украина |
15.03.2010 в 23:05 [Отредактировано: 15.03.2010 в 23:12]
Цитата (And-Re): Теперь возникает проблема поместить менюшку на нужное место: я сделал абсолютным позиционированием: это правильно?
Не бойтесь использовать абсолютное позиционирование...контакты я бы тоже спозиционировал абсолютно...тут нет ничего страшного и зазорного.
Только там иногда траблы с ie6...указывайте родителю точную высоту или 1%
|
Сообщения: 287
Страна: Россия |
16.03.2010 в 15:38
Спасибо за совет!
|
Сообщения: 115
Страна: Украина |
16.03.2010 в 18:57 [Отредактировано: 16.03.2010 в 18:57]
Только
Код: 1
2
3
4
5#top_menu {
...
top:110px;
left:200px;
}
Так правильней и короче. |
Сообщения: 287
Страна: Россия |
16.03.2010 в 19:14
Цитата (trueW3C): Только
Код: 1
2
3
4
5#top_menu {
...
top:110px;
left:200px;
}
Так правильней и короче.
Еще раз спасибо!
|
Сообщения: 520
Страна: Польша |
16.03.2010 в 20:03 [Отредактировано: 16.03.2010 в 20:11]
Я не использую к примеру для меню доп див, я задаю ul id и тогда для ul задаю все параметры дива. И еще вы не экономно графику делаете, к примеру меню весило бы меньше если бы вы его разбили на левый, правый угол и повт. часть по центру
|
Сообщения: 287
Страна: Россия |
16.03.2010 в 20:26
Цитата (zombieman): Я не использую к примеру для меню доп див, я задаю ul id и тогда для ul задаю все параметры дива. И еще вы не экономно графику делаете, к примеру меню весило бы меньше если бы вы его разбили на левый, правый угол и повт. часть по центру
А примерчик можно где нибудь глянуть?
|
Сообщения: 115
Страна: Украина |
16.03.2010 в 22:54 [Отредактировано: 16.03.2010 в 23:08]
Цитата (zombieman): Я не использую к примеру для меню доп див, я задаю ul id и тогда для ul задаю все параметры дива.
Это короче, но нарушается семантика. Такой код легче к восприятию
Код: 1
2
3
4
5
6
7
8
9<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, а для ие сделать одноразовый экспрешн....но это высший пилотаж
|
Сообщения: 115
Страна: Украина |
16.03.2010 в 23:00 [Отредактировано: 16.03.2010 в 23:13]
zombieman, для тебя код...я так всегда делаю. Шел до этого 1 год...
Код: 1
2
3#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
Код: 1
2
3
4
5
6
7
8
9
10#top-menu {
zoom: expression(
runtimeStyle.zoom = 1,
insertBefore(createElement('before')),
insertBefore(createElement('after'))
);
}
#top-menu before { content: ' '; ... }
#top-menu after { content: ' '; ... }
IE8 посылаем...в 7 версию...т.е. он работает как IE7
Код: 1<meta http-equiv="X-UA-Compatible" content="IE=7" />
Теперь можно использовать один файл ie.css для всех IE. Но это уже высший пилотаж для семантики HTML
|
Сообщения: 520
Страна: Польша |
17.03.2010 в 00:06 [Отредактировано: 17.03.2010 в 00:14]
:before :after не юзаю ибо много костылей нужно,по запросам не понял
|
Сообщения: 520
Страна: Польша |
17.03.2010 в 00:13
Цитата (trueW3C): Это короче, но нарушается семантика. Такой код легче к восприятию
Почему нарушается?
|
Сообщения: 248
Страна: Казахстан |
17.03.2010 в 15:28
Цитата (trueW3C): Это короче, но нарушается семантика
Как раз лишний див это плохо.
|
Сообщения: 115
Страна: Украина |
18.03.2010 в 20:51 [Отредактировано: 18.03.2010 в 20:59]
С div красивей. Ну извеняйте, моя привычка...мне почему то так удобней  Да и никто не жаловался.
Список это блочный элемент, но это не блок.
Цитата (zombieman): :before :after не юзаю ибо много костылей нужно,по запросам не понял
Очень много костылей если не знаешь, :before :after очень удобная штука. Я больше года без них верстал...ну а теперь доволен что верстаю с ними.
В общем смотри доклады по верстке с яндекс субботника
Для IE6-7 вот костыль...не так много + повторить стили :before :after , только без :
Код: 1
2
3
4
5
6
7#top-menu {
zoom: expression(
runtimeStyle.zoom = 1,
insertBefore(createElement('before')),
insertBefore(createElement('after'))
);
}
Код: 1
2#top-menu before { ... }
#top-menu after { ... }
Ещё раз повторю...только повторить стили...и написать четырёх строчный костыль... |
Сообщения: 115
Страна: Украина |
18.03.2010 в 21:02
Вообще в плане экспешенов IE рулит все браузеры...это офигенная штука, которая сейчас частями в CSS3 появляется и наверно многое будет в CSS4
|
Сообщения: 2131
Страна: Украина |
19.03.2010 в 16:04
Если на лого не нужна ссылка, а судя по коду, и правда не нужна, то вообще в упор не вижу проблемы, которую тут наворотили.
Код: 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<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; }
Ну и как правильно заметили, действительно картинку меню стоит порезать на три части. |
Сообщения: 365
Страна: Украина |
19.03.2010 в 17:12 [Отредактировано: 20.03.2010 в 16:44] |
Сообщения: 115
Страна: Украина |
21.03.2010 в 19:23
Цитата (sitesfaction): before/after
Это оффтоп, мы с zombieman общались
Так я думаю тему можно закрыть) Или тип того забить...
|
Сообщения: 1595
Страна: Россия |
21.03.2010 в 19:42
:before и :after.
Никогда не понимал когда срабатывают эти псевдоклассы
|
Сообщения: 1375
Страна: Украина |
21.03.2010 в 21:00
Я бы спозиционировал все три элемента верхушки и не парился бы....Кстати, так в основном с хедером в повседневной вёрстке и делаю.....
Не надо бояться абсолютного позиционирования, в нем нет ничего плохого, если уметь пользоваться.....Кроме того, где-то читал, что элементы с абсолютным позиционированием грузятся быстрее, чем флоаты
|
Сообщения: 1375
Страна: Украина |
21.03.2010 в 21:02
Цитата (Anexroid): :before и :after.
Никогда не понимал когда срабатывают эти псевдоклассы
+1, имхо это не высший пилотаж, а ненужный выпендреж.......если сильно надо разбивать блок меню на три картинки (не факт, что ваши три картинки в сумме будут весить намного меньше 1й картинки целиком),то тут все делается легко и просто без всяких псевдоклассов.......Идите простым путем, народ
|
