Цитата:
Сообщение от Alexxxander
Есть еще один вариант вёрстки, он попроще:
|
Ну попроще, сделаете сами. А пример реализации первоначального вот:
Код:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
div {padding: 0; margin: 0;}
#maindiv {
width: 200;
font-family: Arial;
font-size: 13px;
line-height: 1.5em;
}
#maindiv_grey {
width: 200;
font-family: Arial;
font-size: 13px;
line-height: 1.5em;
}
#d_header, #d_header_red {
width: 100;
height: 1.5em;
color: white;
text-align: center;
background-color: #949494;
vertical-align: middle;
}
#d_header_red {
background-color: #7B002F;
}
#v_line {
background-color: #7B002F;
width: 1px;
height: 2.42em;
margin-top: -1.5em;
padding: 0;
margin-left: 3px;
float: left
}
#maindiv_grey #v_line {
background-color: #949494;
}
#h_line {
border-top: 1px solid #7B002F;
font-size: 0;
width: 8px;
height: 1px;
margin-top: 11px;
float: left;
background-color: white;
}
#maindiv_grey #h_line {
border-top: 1px solid #949494;
}
#quad {
background-color: #949494;
width: 9px;
height: 9px;
margin-top: 7px;
float: left;
font-size: 0; /*Долбанный IE*/
}
#d_item {
margin-left: 1.7em;
color: #949494;
font-weight: bold
}
#sub_item {
margin-left: 1.4em;
font-size: 10px;
line-height: 1em
}
</style>
</head>
<body>
<div id="maindiv_grey">
<div id="d_header">образование</div>
<div id="v_line"></div>
<div id="h_line"></div><div id="quad"></div>
<div id="d_item">новости</div>
</div>
<div id="maindiv">
<div id="d_header_red">бизнес</div>
<div id="v_line"></div>
<div id="h_line"></div><div id="quad"></div>
<div id="d_item">новости компаний</div>
<div id="v_line"></div>
<div id="h_line"></div><div id="quad"></div>
<div id="d_item">кросс-культура</div>
<div id="sub_item">Если Ваш партнер - un`italiano vero</div>
<div id="v_line"></div>
<div id="h_line"></div><div id="quad"></div>
<div id="d_item">маркетинг</div>
<div id="sub_item">"Звездные врата" большого рынка</div>
<div id="v_line"></div>
<div id="h_line"></div><div id="quad"></div>
<div id="d_item">менеджмент</div>
<div id="sub_item">Удержать дистанцию!</div>
</div>
</body>
</html>
Примеры (долго лежать не будут, по крайней мере не гарантирую)
http://ru.bir.ru/imho/div/divS.htm по моему мнению более "правильный" вариант, потому что используются единицы измерения относительно величины используемого текста, однако, долбанный IE не отображает это как задумано. В нем почему-то нельзя сделать высоту div меньше строчки текста, даже если в нем нету никакого текста... по моему бред, но так уж есть. Протестировано в ФФ 2.0.0.1 и Опера 9.10
http://ru.bir.ru/imho/div/divS_IE.htm Вариант "менее правильный" (см выше), в коде выше именно он располагается. Зато отображается одинаково к браузерам выше еще и в ИЕ 6.0