Доброе время суток!
Лирическое отступление: Есть задача повесить под сайт промо-бэг (одна сплошная картинка со ссылкой, так называемое, брэндирование). И, как бы, я уже всё сделала, но в мою вёрстку, увы, не вписалось меню с выпадающими списками.
Задача:
1. Фон сайта - промо-бэг
2. Основной блок контента отступает на какую-то величину свеху, фиксированной ширины, имеет фон и обязательно должен быть растянут до самого низа страницы и отцентрирован. Отступы сверху и по бокам - обязательны, иначе фон не будет кликабельным.
3. 3 колонки. Центральная растянута между узкими сайдбарами. Сайдбары - фиксированной ширины.
4. Подвал прибит к низу. Очень желательно.
5. И, о да!, меню горизонтальное многоуровневое выпадающее, сделано из обычного списка, позиционировано абсолютно, с выездом за пределы основного блока вверх.
Всё это добро должно быть без скриптов, даже тех, что хакают неполноценность старых ослов, поскольку, имхо, пора уже прекращать поддерживать подобный антиквариат.
Свои художества приводить не буду, поскольку оные не работают как надо, посему безполезны.
Помогите, пожалуйста! Сижу уже безрезультатно 3й день. Очень надеюсь на вашу помощь!
Заранее спасибо!
Всё же, выложу тут свой код.
<a href="#" id="promo"></a>
<div id="all">
<div id="ext">
<div id="content">
<div id="main">
<div class="in">
content
</div>
</div>
<div class="side" id="left">
left sidebar
</div>
<div class="side" id="right">
right sidebar
</div>
</div>
<div class="empty"></div>
</div>
<div id="footer">
footer
</div>
</div>
*{margin:0;padding:0;cursor:default;outline:none;}
*,input{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;}
body{display:block;}
html{overflow:scroll;}
html,body{height:100%;width:100%;background:#292929;color:#EBEBEB;font:normal 14px Verdana,Tahoma,'Lucida Grande','Segoe UI',Arial,sans-serif;}
#promo{z-index:1;position:fixed;width:100%;height:100%;background:url(stl/promobg.jpg) no-repeat 50% 0 #cbbfa9;text-indent:-9999px;}
#all{z-index:5;position:absolute;top:300px;bottom:0;height:100%;width:998px;left:50%;margin-left:-499px;}
html>body #all{height:auto;}
* html #all{height:expression( parentNode.offsetHeight/2 - 320 + 'px');}
.empty{height:150px;}
#header,#footer,.clear{clear:both;float:none;}
#ext,#mgm,#footer{width:100%;}
#ext{position:relative;margin:0 auto;min-height:100%;padding-top:58px;background:#444;}
#footer{position:relative;height:150px;margin-top:-150px;width:100%;}
#mgm{z-index:20;position:absolute;top:0;}
#main{width:100%;float:left;}
#main .in{width:auto;float:auto;margin-right:260px;margin-left:260px;}
.side{width:250px;float:left;margin-left:-250px;outline:1px solid red;}
#left{margin-left:-100%;}
#right{margin-right:-100%;}
Меню тут нет. Но оно сделано на css, выкидушки, до времени, просто спрятаны, по hover появляются.
Из-за этих выкидушек всё и ломается, поскольку лежат они в абсолютно позиционированном блоке, а сами относительны, и блок основного контента получает неправильные (то есть, конечно же, правильные для браузера, но неправильные для дизайна) 100% высоты. И ну никак мне эту проблему самостоятельно не решить.
Вот, я ещё сваяла своё добро в песочнице, только там, почему-то, блок контента разъезжается, хотя в браузерах всё норм.
http://learn.javascript.ru/play/iYVKR