dmitry_d
-
Posts
5 -
Joined
-
Last visited
dmitry_d's Achievements
Explorer (1/14)
0
Reputation
-
Нужен шаблон, чтобы посередине блок был "резиновый", но с минимальной шириной. А по бокам были блоки тоже резиновые, но уже без минимальной ширины. К этому же центральный блок должен быть обрамлен справа и слева разделителями (background из картинки). Центральный блок в свою очередь делится на 3 колонки + еще подвал внизу центрального блока.
-
Там у меня фон background в картинке, это я для примера одноцветный сделал. Приделал вот такие костыли: Добавил еще одну общую обертку wrapper с overflow: hidden Добавил в красные разделители: padding-bottom: 20000px; margin-bottom: -20000px; И всем элементам, кроме html сделал min-height:100%, а height убрал. Пример P.S. Единственно что меня смущает - нет горизонтального скроллера.
-
Вот код и макет Ни в какую не хочет растягивать два разделителя слева и справа (красного цвета) по всей высоте текста.
-
Как сделать - 3-х колоночная верстка, бока резиновые, центр с минимальной шириной.
dmitry_d replied to dmitry_d's question in HTML Coding
Ну так было бы очень просто. А можно сделать, чтобы ширина колонок справа и слева оставалась одинаковой при уменьшении разрешения? -
Необходимо сделать вот такой макет (за исключением проблемных мест) Макет Левая и правая внешняя колонка "резиновая". Центральная колонка должна быть по центру, тоже "резиновая", но есть минимальная ширина. Еще дело осложняется тем, что центральная колонка обрамлена справа и слева разделителями 2px (разделитель должен быть растровый из картинки) В центральной колонке тоже "резиновые" 3 колонки (решение брал отсюда Резиновая 3-х колоночная верстка). <html> <head> <style type="text/css"> html, body { height:100%; min-height:100%; margin:0; padding:0; border:0; } #wrapper { position: relative; height:100%; width: 100%; overflow:hidden; background-color:#5FA8D0; } #sideLeft { position: relative; width: auto; float: left; /*background-color:#5FA8D0;*/ height:100%; background-color: #C93; } #sideRight { float: left; width: auto; /*background-color:#5FA8D0;*/ position: relative; min-height:100%; background-color: #69C; } #sideLeftSep { float: left; width: 2px; margin-left: -2px; position: relative; height:100%; background-color: #036; } #sideRightSep { float: left; width: 2px; position: relative; height:100%; background-color: #036; margin-left:100%; top:-100%; } #container { width: 50%; min-width: 950px; background-color:#F3F9FC; position: relative; height:100%; margin:0 auto; } .mod-wrap1 { float: left; width: 100%; height:100%; overflow: hidden; background: #89FFA2; } .mod-wrap2 { clear: left; float: left; width: 100%; position: relative; right: 25%; background: #FFA7A7; height:100%; } .mod-wrap3 { float: left; width: 100%; position: relative; right: 50%; background: #FFF689; height:100%; } .item-page { float: left; width: 48%; position: relative; left: 78%; overflow: hidden; } #footer { height: 25px; width: 950px; overflow:hidden; bottom:0px; position:absolute; clear:both; background-repeat:repeat-x; background: #F00; margin:0 auto; } </style> </head> <body> <div id="wrapper"> <div id="container"> <div id="sideLeftSep"></div> <div>Лого</div> <div>menu</div> <div class="mod-wrap1"> <div class="mod-wrap2"> <div class="mod-wrap3"> <div id="leftcolumn">Левая колонка</div> <div class="item-page">Центр</div> <div id="rightcolumn">Правая колонка</div> </div> </div> </div> <div id="sideRightSep"></div> <div id="footer"> <p>Подвал</p> </div> </div> </div> </body> </html> К сожалению, данный макет не работает в IE. P.S. Я читал прикрепленную тему о резиновой верстке на 3 колонки, но там колонки фиксированной ширины, а мне нужны резиновые. Также я пробовал переделать под мой макет - цвет фона wrapper поставить мой, а левую и правую колонки фиксированной ширины использовать как разделители по бокам, но не получилось.