вопрос по дивовой вёрстке
<div style=" width:300px; float:right; border:1px solid #000; margin:20px; ">maincontent</div>
<div style=" border:1px solid #000; margin:40px; ">left menu & dumy content </div>
<div style="position:absolute; top: 0px; left: 361px; float:right;">upper menu</div>
<div style="position:absolute; top: 0px; left: 0px;">logo</div>
<div align="right" style="clear:both; ">footer</div>
</body>
все дивы должны идти в коде именно в такой последовательности...
вопрос такой. Почему если вставить в первый див(который maincontent) абзац длинного текста (который явно превышает заданную ширину) этот див растягиваеться больше выставленной ширины и соответстве залезает под див с логотипом (лого) и абсолютным позиционированием
пытался шаманить с клиарами и флоатами...ноль эмоций...как это исправить?
если есть у кого-то какие-то мысли (в идиале примеры) огромная просьба поделиться
только загрузи...под рукой нет свободного хостинга
<head>
<style>
body { padding: 0px; margin: 0px; }
div { margin: 0px; padding: 0px; overflow: hidden; }
</style>
</head>
<body>
<div style="width: 100%; height: 100%; border: none;">
<div style="width: 10%; height: 100%; background-color: red; float: left;">
<div style="width: 100%; height: 15%; background-color: lime;">logo</div>
<div style="width: 100%; height: 86%; background-color: blue;">left menu & dumy content </div>
</div>
<div style="width: 90%; height: 100%; background-color: #cccccc; float: left;">
<div style="width: 100%; height: 15%; background-color: gold;">upper menu</div>
<div style="width: 100%; height: 70%; background-color: pink;">maincontent</div>
<div style="width: 100%; height: 15%; background-color: cyan;">footer</div>
</div>
</div>
</body>
</html>
:/ Я сделал вот так в общем. Недоверяю абсолютному позиционированию в помеси с относительным, слишком много гемора, да и w3c'шная модель, которой все и придерживаются не идеальна (imho: всего не предусмотришь).
Нюанс моего варианта такой: если задать какому-либо из div'ов border, в некоторых браузерах это дело поползет. Потому что в таком варианте величины (ширина, длина)занимаемого блока для div'a равны указанным + рамка и при том соприкасающиеся рамки/границы не взаимоисключаются.
И еще поправка, overflow: hidden; в стили для div'ов. Заставляет элемент блочного уровня прятать содержимое невлезающее в его границы.
Опять поправка. В Oper'е, в отличие от IE и FireFox, bottom menu div'у недостает примерно 1 pixel до нижней части родительского div'а. Хоть 85%+15%=100, видимо вычисления идут в float'ах и т.п., а округляет это дело Opera как-то посвоему.. хотя кто знает. В общем ставим 86% высоту для bottom menu div'а и он в этих трех браузерах (ie,opera,ff) заполняет собой все оставшееся пространство как надо.
всё было бы слишком просто
проблема в том чтобы в коде страницы элементы шли именно так, как у меня сейчас...
т.е.
maincontent->left menu->upper menu->logo->footer
по крайней мере первым в коде должен идти именно див с основным контентом...
А чтобы блок не расплывался когда содержимое шире/выше его границ задай в стилях overflow: hide;.
там какие-то заморочки с оптимизацией... т.е. основной контент должен быть в начале кода
header, body, footer =) хых, впервые о таком слышу. ладно, это тогда на досуге, седня терь некогда=)ъ
не...так не катит...
всё было бы слишком просто
проблема в том чтобы в коде страницы элементы шли именно так, как у меня сейчас...
т.е.
maincontent->left menu->upper menu->logo->footer
по крайней мере первым в коде должен идти именно див с основным контентом...
Может быть подойдет такой вариант, когда logo вдожен в left menu, нормально отображает в IE6 (в 5.5 тоже должно быть нормально), Opera 7.53 и FF 1.0:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test page</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
div#maincontent {
margin-top: 20px;
width: 69%;
float: right;
border: 1px solid #000;
}
div#leftmenu {
float: left;
width: 30%;
border: 1px solid #000;
}
div#leftmenu ul {
list-style: none;
}
div#logo {
border: solid 1px red;
}
div#uppermenu {
position: absolute;
top: 0px;
right: 0px;
width: 69%;
border: solid 1px green;
}
div#uppermenu a {
margin: 6pt 12pt;
}
div#footer {
text-align: left;
width: 69%;
clear: both;
float: right;
border: solid 1px yellow;
}
</style>
</head>
<body>
<div id="maincontent">
<h1>maincontent</h1>
</div>
<div id="leftmenu">
<div id="logo">logo</div>
<h2>left menu & dumy content</h2>
<ul>
<div id="uppermenu">О проекте|Карта сайта|Контакты</div>
<div id="footer">©Vasya Pupkin inc. 2005</div>
</body>
</html>
лого и левое меню должны иметь жёсткие размеры...
а нижнее меню должно позиционироваться ниже ОБОИХ дивов(и с главным контентом и левого меню)
нет... так тоже не катит...
лого и левое меню должны иметь жёсткие размеры...
а нижнее меню должно позиционироваться ниже ОБОИХ дивов(и с главным контентом и левого меню)
Можно поместить абсолютно позиционируемые блоки логотипа, верхнего и левого меню в контейнер контента, для которого задать верхний и левый отступы. Тогда все блоки можно разместиь в том порядке, в котором надо.
Только вот в случае, когда высота блока контента будет меньше высоты левого меню, футер будет меню перекрывать. Т.е. надо или высоту блока вычислять, или какую-то распорку придумывать - у меня для контента указан min-height: 90%, но во-первых самый распространенный браузер этого не понимает, а во-воторых высота меню может быть и больше.
Кроме этого, с цветами фона блоков и границами есть проблемы, которые сходу у меня решить тоже не получилось.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Вариант 2</title>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
div#cnt {
margin: 0 0 -20px 300px;
padding: 20px 0 20px 0;
background-color: #fff;
border-left: 2px solid #ccc;
min-height: 90%;
color: #000;
}
div#cnt h1, div#cnt p {
padding: 0 12pt;
}
div#cnt h1 {
text-align: center;
color: #383b51;
}
div#leftmenu {
position: absolute;
top: 90px;
left: 0px;
width: 300px;
}
div#leftmenu ul {
list-style: none;
}
div#logo {
position: absolute;
top: 0px;
left: 0px;
width: 300px;
height: 90px;
border-bottom: solid 1px #cc9e00;
z-index: 99;
background-color: #ffe280;
}
div#uppmenu, div#footer {
background-color: #ffedaf;
}
div#uppmenu {
position: absolute;
margin: 0;
top: 0;
right: 0;
width: 100%;
z-index: 1;
text-align: right;
border-bottom: 1px solid #ccc;
}
div#uppmenu a {
margin: 6pt 12pt;
}
div#footer {
float: left;
clear: both;
margin: 0;
padding: 0;
text-align: center;
width: 100%;
border-top: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="cnt">
<h1>Контент</h1>
</p>
<div id="leftmenu">
<ul>
<div id="uppmenu">Главная|Карта сайта|Контакты</div>
<div id="logo">
</div></div>
<div id="footer">© Vasya Pupkin Inc. 2005</div>
</body>
</html>
вот кусок кода
<div style=" width:300px; float:right; border:1px solid #000; margin:20px; ">maincontent</div>
<div style=" border:1px solid #000; margin:40px; ">left menu & dumy content </div>
<div style="position:absolute; top: 0px; left: 361px; float:right;">upper menu</div>
<div style="position:absolute; top: 0px; left: 0px;">logo</div>
<div align="right" style="clear:both; ">footer</div>
</body>
все дивы должны идти в коде именно в такой последовательности...
вопрос такой. Почему если вставить в первый див(который maincontent) абзац длинного текста (который явно превышает заданную ширину) этот див растягиваеться больше выставленной ширины и соответстве залезает под див с логотипом (лого) и абсолютным позиционированием
пытался шаманить с клиарами и флоатами...ноль эмоций...как это исправить?
если есть у кого-то какие-то мысли (в идиале примеры) огромная просьба поделиться
А если table вставить в начинку див'а?