<div id="header"><div>
<div id="middle">
<div id="middlecenter">
<div id="content"><div>
<div id="rightpan"><div>
<div>
<div id="footer"><div>
#header{
height:420px;
background:url(../images/headerbg.gif) repeat-x 0 0 #711A10;
}
#middle{
background:url(../images/middlebg.gif) repeat-x 0 0 #F9F7EA;
padding:40px 0 0 0;
height:100%;
text-align:center;
}
#middlecenter{
width:900px;
margin:0 auto;
text-align:left;
}
#content{
width:700px;
float:left;
}
#rightpan{
width:200px;
float:left;
}
#footer{
height:150px;
background:url(../images/footerbg1.gif) repeat-x 0 0 #000;
text-align:center;
clear:both;
}
Словами, три горизонтальных блока шапка середина и подвал. Середина должна быть резиновой по высоте так если вниз на всю страницу. В ней по центру отцентрован блок #middlecenter в котором контент и правое меню.
Далее идет подвал.
В чем сложность.
1. Почемуто при про смотре б опере и в фаерфоксе структуры сайта (проинспектировать элемент) блок midle c параметром height:100%; не отображаеться на всю высоту, а отображается ну к примеру пикселей 200 думал что возможна как раз в размер фоновой картинки но нет.... от куда этот произвольный размер взялся не понятно.
Далее, Блоки #middlecenter и внего входящие #content и #rightpan отображаются длинными (при большом количестве материалов в них) вплоть до блока #footer. Так если они начало бирут от верха блока midle но при этом сам блок midle не растягивается хотя весь контент находится внутри него.
2. Как я читал про резиновые сайты по высоте, то #middle должен быть задан padding-bottom: на высоту футтера. А сам футоре middle-top:-высота блока поднят вверх. У меня все так и было зделоано и нормально отображалась. Теперь я переделал так как вы видите и опять все нормально отображается. Так если футер виден хотя поидеи он должен быть ниже области экранна так как middle заданно height:100%;.
Вот такое надопонимание хотелось бы разрешить чтобы двигаться дальше. А то переделывать весь сайт не хочиться если я гдето в основе верстки допустил ошибку. Хотя отображается все приемлемо.
Спустя 1 час, 20 минут, 51 секунда (17.07.2011 - 10:25) Sanchopansa написал(а):
Цитата |
1. Почемуто при про смотре б опере и в фаерфоксе структуры сайта (проинспектировать элемент) блок midle c параметром height:100%; не отображаеться на всю высоту, а отображается ну к примеру пикселей 200 думал что возможна как раз в размер фоновой картинки но нет.... от куда этот произвольный размер взялся не понятно. |
Для вычисления высоты во весь экран лучше юзай яваскрипт.. это будет кросбраузерно
Цитата |
Далее, Блоки #middlecenter и внего входящие #content и #rightpan отображаются длинными (при большом количестве материалов в них) вплоть до блока #footer. Так если они начало бирут от верха блока midle но при этом сам блок midle не растягивается хотя весь контент находится внутри него. |
попробуй либо CSS переписать вот так:
#middlecenter{
width:900px;
margin:0 auto;
text-align:left;
overflow:hidden;
}
Либо HTML поменяй так:
<div id="header"><div>
<div id="middle">
<div id="middlecenter">
<div id="content"><div>
<div id="rightpan"><div>
<div style="clear:both;float:none;"></div>
<div>
<div id="footer"><div>
Спустя 27 минут, 35 секунд (17.07.2011 - 10:53) Xes написал(а):
Не получется но поковыряюсь может найду решени.
Подскажите такой момент всю жизнь думал что padding не влияет на width и height так если он расчитывается вовнутрь и если у меня контент 700 пикселей и правая колонка 300 то чтобы зделать отсуп справа и слева в контенте я пишу padding: 0 20 0 20; и это не влияет на размер 700 так как отчитывается вовнутрь.
А у меня получается косяк как накартинке блоки съезжают.
margin- отступ самого блока.
padding - отступы внутри блока.
Подскажите такой момент всю жизнь думал что padding не влияет на width и height так если он расчитывается вовнутрь и если у меня контент 700 пикселей и правая колонка 300 то чтобы зделать отсуп справа и слева в контенте я пишу padding: 0 20 0 20; и это не влияет на размер 700 так как отчитывается вовнутрь.
А у меня получается косяк как накартинке блоки съезжают.
margin- отступ самого блока.
padding - отступы внутри блока.
Спустя 8 минут, 10 секунд (17.07.2011 - 11:01) Sanchopansa написал(а):
Ширина = ширина-паддинг;
так же и с высотой...
и у тебя в примере ХТМЛ не закрыт див moddle... а что по поводу того что я тебе говорил так это не может не работать... когда используется float то тогда родительский блок должен либо тоже иметь значение float, либо в CSS прописать overflow:hidden, либо после блоков которые имеют float нужно разместить блок со свойством clear:both;
Тогда родительский блок будет растягиваться за своей внутренностью.... иначе он будет иметь высоту равную нулю
так же и с высотой...
и у тебя в примере ХТМЛ не закрыт див moddle... а что по поводу того что я тебе говорил так это не может не работать... когда используется float то тогда родительский блок должен либо тоже иметь значение float, либо в CSS прописать overflow:hidden, либо после блоков которые имеют float нужно разместить блок со свойством clear:both;
Тогда родительский блок будет растягиваться за своей внутренностью.... иначе он будет иметь высоту равную нулю
Спустя 1 минута, 54 секунды (17.07.2011 - 11:03) Sanchopansa написал(а):
и ты не закрыл этот блок
у тебя в примере так
<div style="clear:both;float:none;"></div>
у тебя в примере так
<div style="clear:both;float:none;" />
Спустя 9 минут, 5 секунд (17.07.2011 - 11:12) Xes написал(а):
*Ширина = ширина-паддинг;*
Чето я тут не монял выражение это. Тоесть padding как рамка у блока или у картинки увеличивает размеры?
overflow:hidden обрезало у меня все что не влезло в middle. По все видимости действительно надо яваскрипт, либо учитывая что у меня практически все страницы будут большими можно забить на это, в связи с тем что я не шарю как это все отладить.
*либо после блоков которые имеют float нужно разместить блок со свойством clear:both;*
Сделал посмотри на скрин. ТАм структура есть слева... видимо он действительно height:100% очень похоже что от разрешения экрана вычитает размеры явно заданных блоков и то что осталось то и есть 100%. Ни заню вобщем но бразуер думает как то иначе нежели я )))
<div style="clear:both;float:none;" /> - он закрыт опера его так почемуто отображет.
Чето я тут не монял выражение это. Тоесть padding как рамка у блока или у картинки увеличивает размеры?
overflow:hidden обрезало у меня все что не влезло в middle. По все видимости действительно надо яваскрипт, либо учитывая что у меня практически все страницы будут большими можно забить на это, в связи с тем что я не шарю как это все отладить.
*либо после блоков которые имеют float нужно разместить блок со свойством clear:both;*
Сделал посмотри на скрин. ТАм структура есть слева... видимо он действительно height:100% очень похоже что от разрешения экрана вычитает размеры явно заданных блоков и то что осталось то и есть 100%. Ни заню вобщем но бразуер думает как то иначе нежели я )))
<div style="clear:both;float:none;" /> - он закрыт опера его так почемуто отображет.
Спустя 8 минут, 40 секунд (17.07.2011 - 11:21) Xes написал(а):
Sanchopansa - может заюзать display
http://htmlbook.ru/css/display
типа middle - таблица
а контент и правое меню - колонки?
Почему таким образом не верстают, а с помощю float делают?
http://htmlbook.ru/css/display
типа middle - таблица
а контент и правое меню - колонки?
Почему таким образом не верстают, а с помощю float делают?
Спустя 1 минута, 54 секунды (17.07.2011 - 11:23) Sanchopansa написал(а):
короче говоря что ширину блока нужно уменьшать на значение паддинга... например:
имеем блок с таким css:
чтоб сохранить размеры блока нужно изменить ширину и высоту так..
ширина = 500 - 20 - 5 = 475
высота = 300 - 10 - 15 = 275
и теперь будет выглядеть все так:
имеем блок с таким css:
width:500px;
padding:10px 20px 15px 5px;
height:300px;
чтоб сохранить размеры блока нужно изменить ширину и высоту так..
ширина = 500 - 20 - 5 = 475
высота = 300 - 10 - 15 = 275
и теперь будет выглядеть все так:
width:475px;
padding:10px 20px 15px 5px;
height:275px;
Спустя 1 минута, 4 секунды (17.07.2011 - 11:24) Sanchopansa написал(а):
пробуй на войне все средства хороши