Шаблон DIV в 3 колонки

**Lann** · 23.11.2007, 17:53

Добрый день. Мучаюсь - как сделать 3-х колончную страницу - так что бы центральная колонка была всегда фиксированной ширины - а боковые занимали все оставшееся свободное место?

Нашел пока такое. при разрешении экрана 1280х1024 нормально при 1024х768 центральная колонка съедает часть правой колонки. Как можно с этим побороться? Спасибо.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>3 колонки - центральная фиксированная</title>

<style type="text/css">
html,body{margin:0;padding:0;min-width:1000px; }

p{margin:0 10px 10px}

#header {height:80px;line-height:80px;margin:0;padding-left:10px;background: #EEE;color: #79B30B}

#leftBlock{background:#B9CAFF}
#fixBlock{background:#a80000;}
#rightBlock{background: #00a800;}
#footer{background: #333;color: #FFF}


#container { width:100%; }
#wrapper {float:left;width:100%}
#leftBlock {float:left;width:25%;margin-left:-100%}
#fixBlock {float:left;width:45%;margin-left:-75%;min-width:570px;}
#rightBlock {margin-left: 70%; }
#footer {clear:left;width:100%}
</style></head><body>



<div id="container">

 * *<div id="header">Заголовок</div>

 * *<div id="wrapper">
 * * * *<div id="rightBlock">
 * * * * * *

Правая колонка</p>
 * * * *</div>
 * *</div>

 * *<div id="leftBlock">
 * * * *

Левая колонка</p>
 * *</div>

 * *<div id="fixBlock">
 * * * *

fixBlock</p>
 * *</div>

 * *<div id="footer">

Подвал</p></div>

</div>
</body>
</html>

**fenixnt** · 23.11.2007, 20:44

По моему вот так:

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>3 колонки - центральная фиксированная</title>
<style type="text/css">
html,body{margin:0;padding:0;min-width:1000px; }
p{margin:0 10px 10px}
#header {height:80px;line-height:80px;margin:0;padding-left:10px;background: #EEE;color: #79B30B}
#leftBlock{background:#B9CAFF}
#fixBlock{background:#a80000;}
#rightBlock{background: #00a800;}
#footer{background: #333;color: #FFF}
#container { width:100%; }
#wrapper {float:left;width:100%;margin-left:-25% }
#leftBlock {margin: 0 570px 0 25%}
#fixBlock {float:left;width:570px;margin-left:-570px}
#rightBlock {float:left;width:25%;}
#footer {clear:left;width:100%}
</style></head><body>
<div id="container">
<div id="header">Заголовок</div>
<div id="wrapper">
<div id="leftBlock">


Левая колонка</p>
</div>
</div>
<div id="fixBlock">


fixBlock</p>
</div>
<div id="rightBlock">


Правая колонка</p>
</div>
<div id="footer">

Подвал</p></div>
</div>
</body>
</html>

**Lann** · 23.11.2007, 23:10

Спасибо!

**Lann** · 24.11.2007, 01:33

Уважаемый fenixnt, разобрал ваш код. К сожелению #fixBlock не выводится по середине
т.е. ширина левого не равна ширене правого блока и зависит от разрешения монитора.
при 1280х768 правый блок меньше левого (примерно на 42px)
при 1024х768 левый меньше правого (примерно 64px)

Двигая блоки ни как не удается подобрать то расположение которое смотрелось бы на всех разрешениях более менее сносно.

Я понимаю что не писал в начале что #fixBlock должен быть посередине, но может это как то возможно решить div`вами?

Может это вообще не решаемо? Только таблицы.....

**Aykroyd** · 24.11.2007, 04:44

Решаемо практически всё. Но что-то есть у меня такое предчувствие, что ерундой вы тут занимаетесь, по правде говоря... Могу, конечно, и ошибаться. И посему позвольте в первую очередь поинтересоваться:

А что будет размещаться в этих «резиновых» левой и правой колонке?
От этого, поверьте, зависит многое...)

------------------------------
Небольшое лирическое отступление:

Только таблицы.....

Вообще, бытует мнение, что то, что нельзя сделать «по уму» (семантически), можно без проблем реализовать таблицами. То не всегда так. Я бы даже сказал, практически всегда не так. Давайте ради интереса попробуем рассмотреть какой-нибудь говнотабличный пример решения поставленной задачи:

Код:

<table width="100%" border="1" cellspacing="0" cellpadding="0">
 *<tr>
 * *<td>Резина</td>
 * *<td width="570">Фикс по центру</td>
 * *<td>Резина</td>
 *</tr>
</table>

Итак, что мы имеем? Вроде бы все прекрасно, центральная колонка фиксированная, а левая и правая колонки – резиновые. Причем эти боковые колонки получились у нас равной ширины. Но это только на первый взгляд. Попробуйте поместить в левую колонку больше текста, чем в правую, и об одинаковой ширине можно преспокойно забыть. Дизайн сразу «поедет», потому как таблица в браузерах будет подстраиваться под количество контента в конкретных ячейках.

Если же попробовать задать ширину боковым колонкам в процентах – это тоже не вариант, поскольку в данном случае «поедет» уже центральный «фикс», так как размеры в процентах будут иметь приоритет над размером в пикселах. И не спасают здесь ни стилевые спецификации, ни даже волшебный элемент <col> с атрибутом width (этот элемент иногда очень помогает при построении сложных таблиц)...

На мой взгляд, вывод из всего вышеизложенного можно сделать следующий: выровнять по центру фиксированную колонку при наличии боковых резиновых колонок не представляется возможным никакими методами (ни блоками, ни таблицами). Проблема здесь в том, что в зависимости от разрешения экрана подогнать эти проценты под фиксированные пикселы просто нереально.

«фикс|резина|фикс» – можно
«резина|резина|фикс» – можно
«фикс|резина|резина» – можно

но вот «резина|фикс|резина» – это по-моему что-то абсурдное...

Если ошибаюсь – поправьте (я буду только рад ошибаться).
Тема довольно интересная.

**Lann** · 24.11.2007, 19:17

Aykroyd, согласен со всем что вы говорите - сам сидел + разбирал примеры 3-х колоночной верстки ни где не встретил "резина|фикс|резина". Комрад fenixnt подсказал хороший вариант, но центроваться оно - не центруется.
Пытался найти способ что б центральный-фикс-блок "продавливал" боковые резиновые.....

Насчет таблицы - для моей задачи - это в принципе подходит т.к. дизайн на таблице я строить не буду - по бокам будет примерно небольшое и равное кол-во текста. И таблицу эту я давно сверстал и долго на нее задумчиво глядел прежде чем прийти сюда.

Хотелось бы что б этот текст не слишком далеко отходил от краев фикс-блока - при большем разрешении - это случается при варианте - всех колонок резиновых

и небыло пустых мест по краям - это случается при варианте всех колонок фиксированных

+ содержимое фикс-блока всегда по центру - что приорететно. решить это можно только при

«фикс|фикс|фикс»
«резина|резина|резина»
имхо

**Aykroyd** · 24.11.2007, 20:21

Originally posted by Lann@Nov 24 2007, 20:17
Комрад fenixnt подсказал хороший вариант, но центроваться оно - не центруется. Пытался найти способ что б центральный-фикс-блок "продавливал" боковые резиновые.....
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
В том-то и дело, что не будет оно центрироваться... И пикселы никогда не «продавят» проценты...

Originally posted by Lann@Nov 24 2007, 20:17
И таблицу эту я давно сверстал и долго на нее задумчиво глядел прежде чем прийти сюда.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Очень хорошо, что сверстали... Теперь уберите ее. Ей там не место...)

Originally posted by Lann@Nov 24 2007, 20:17
Хотелось бы что б этот текст не слишком далеко отходил от краев фикс-блока - при большем разрешении - это случается при варианте - всех колонок резиновых
и небыло пустых мест по краям - это случается при варианте всех колонок фиксированных
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Ничего подобного не случается. Задавайте правильные отступы и ничего никуда не будет отходить. Ни при всех колонках фиксированных, ни при всех колонках резиновых...

Originally posted by Lann@Nov 24 2007, 20:17
«фикс|фикс|фикс»
«резина|резина|резина»
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Наиболее мудрые решения, имхо...)

**Lann** · 24.11.2007, 23:17

Originally posted by Aykroyd@Nov 24 2007, 19:21
[b]Ничего подобного не случается. Задавайте правильные отступы и ничего никуда не будет отходить. Ни при всех колонках фиксированных, ни при всех колонках резиновых...

простите не понял.
допустим вариант - резина 23%|резина 54%|резина 23%
такие %, потаму что 570 пиков цетрального контента - помещаются при 1024х768
соответственно при 1280х1024 центральный блок - "доминирует" над боковыми

и наоборот при фикс|фикс|фикс - при 1280х1024 отступы слева-справа

это все при background:#fff; - для всех

приложить код?

**Aykroyd** · 24.11.2007, 23:42

Жуть какая...

Так зачем же вы, простите, засовываете фикс 570px в центральный резиновый блок? (если я правильно вас понял) Ведь резина – она на то и резина, чтобы резиниться...

и наоборот при фикс|фикс|фикс - при 1280х1024 отступы слева-справа

Ну так это вполне нормальное явление. Весь сайт в этом случае должен выравниваться по центру (если разрешение большое).

**Lann** · 25.11.2007, 00:53

Originally posted by Aykroyd@Nov 24 2007, 22:42
[b]Так зачем же вы, простите, засовываете фикс 570px в центральный резиновый блок? (если я правильно вас понял) Ведь резина – она на то и резина, чтобы резиниться...

правельно поимаете. дык а куда мне его засунуть что б он был по середине?
вот я и начал мается - искать пути резина|фикс|резина Посмотрите плз. код - что б быть уверенным что говрим об одном и том же.

вообщем резюмируя резина|фикс|резина - невыполнимо.

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml" lang="en">
<head>
<style type="text/css">

* {margin:0;padding:0;}

body {
 background:#fff;
 min-width:1050px;
}

#columnContainer {
 * *width:100%;
}

#leftBlock {
 * *float:left;
 * *width:23%;
 * *background:#9cc;
}


#centerBlock {
 * *float:left;
 * *width:54%;
 * *background:#c9c;
}

#rightBlock {
 * *float:left;
 * *width:23%;
 * *background:#cc9;
}

#footerBlock {
 * *width:100%;
 * *background:#c99;
 * *clear:both;
}


#fix {
 * *width:550px;
 * *height:400px;
 * *margin-left:auto;
 * *margin-right:auto;
 * *background:#EEE;
}


</style>

</head>
<body>

<div id="columnContainer">

 * *<div id="leftBlock">
****

plase for text</p>
 * *</div>

 * *<div id="centerBlock">
 * * * *

 * * * *<div id="fix">550x400</div>
 * * * *

 * *</div>

 * * <div id="rightBlock">
 * * * *

plase for text</p>
 * * </div>
</div>

<div id="footerBlock">
 * *

plase for text</p>
</div>

</body>
</html>

**Aykroyd** · 25.11.2007, 02:29

При 1600х1200 дыры по бокам центрального фиксированного блока будут огромные. Неужели для вас так важен этот фикс? Что мешает сделать центральную колонку тоже резиновой?

дык а куда мне его засунуть что б он был по середине?

А что, центральная резиновая колонка – она не по середине? Конечно же, я не знаю особенностей вашего дизайна, но тем не менее (просто мысли вслух)...

P.S.
1. min-width:1050px; – это жестоко...
2. clear:both; для #footerBlock гораздо логичнее заменить на overflow: hidden; для #columnContainer...
3. margin-left:auto; + margin-right:auto; = margin: 0px auto;
4. <a href="http://webstandards.org.ru/blog/layout/semantic-markup.html#h-2" target="_blank" rel="nofollow">Не надо
</a>... )

**fenixnt** · 25.11.2007, 11:27

Вот уж незнал, что /резина фикс резина/ сделать невозможно

. Показали бы дизайн-макет сайта, может быть действительно надо сделать все резиновые колонки или наборот боковые блоки фиксированные а центр резиновый.

**Lann** · 25.11.2007, 16:06

Originally posted by Aykroyd+Nov 25 2007, 01:29-->

Неужели для вас так важен этот фикс?

Да, серый фикс-блок мне нужен именно фиксированным и именно по середине. + к этому хотел избежать дыр по бокам центрального фиксированного блока.

Originally posted by Aykroyd@Nov 25 2007, 01:29
[b]1. min-width:1050px; – это жестоко...

почему? это что бы при меньших разрешениях (ну и при ресайзе окна) ни что не на ползало.

<!--QuoteBegin-Aykroyd@Nov 25 2007, 01:29
[b]4. <a href="http://webstandards.org.ru/blog/layout/semantic-markup.html#h-2" target="_blank" rel="nofollow">Не надо
</a>... )

да читал. br - лень было отступы писать

Originally posted by fenixnt+-->

Вот уж незнал, что /резина фикс резина/ сделать невозможно unsure.gif .

я не смог

<!--QuoteBegin-fenixnt
[b]Показали бы дизайн-макет сайта, может быть действительно надо сделать все резиновые колонки или наборот боковые блоки фиксированные а центр резиновый.

дизай макет сайта, даже не сайта - одной страницы простой. - я привел его выше.
смысл - по середине фиксированный виджет. по бокам и снизу немного текста-ссылок.

вот эти получающиеся пробелы меня смущают. Ваш первый варант хорош, но там проблема с центрованием.

**Aykroyd** · 25.11.2007, 16:10

Originally posted by Lann@Nov 25 2007, 17:06
это что бы при меньших разрешениях (ну и при ресайзе окна) ни что не на ползало.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Горизонтальный скролл при 1024х768 не смущает?)

P.S.

В общем, дядя Aykroyd посидел тут немного из принципа...
Решение «резина|фикс|резина» найдено...
Это еще раз подтверждает мою гипотезу о том, что решаемо практически всё...
Более того, блоками решается даже то, что не решается таблицами в принципе (а ведь многие до сих пор думают, что наоборот)...

Напишите в какой последовательности должны идти в HTML-разметке блоки... Это SEO-вопрос...

**Lann** · 25.11.2007, 17:14

Горизонтальный скрол конечно смущает, но если без него ни как, то путь будет.
Блоки - левый-центр-правый.
спасибо дяде

**Aykroyd** · 25.11.2007, 17:20

Originally posted by Lann@Nov 25 2007, 18:14
Горизонтальный скрол конечно смущает, но если без него ни как, то путь будет.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Свалили в ужас...

А что, min-width: 1000px не судьба?
И овцы целы, и волки сыты...

Originally posted by Lann@Nov 25 2007, 18:14
Блоки - левый-центр-правый.
спасибо дяде
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Чуть попозже выложу...

**Lann** · 25.11.2007, 17:58

я подумал что в найденом вами решении - горскрол неизбежность....

**Aykroyd** · 25.11.2007, 20:20

Originally posted by Lann@Nov 25 2007, 18:58
я подумал что в найденом вами решении - горскрол неизбежность....
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Мистер Андерсон, «незбежность» – она у Hugo Weaving в матрице...
И то, что я здесь Агент Смит – это еще ни о чем не говорит...

Итак, собственно решение. В принципе, ничего сложного. Надо было только немного напрячь извилину... Сразу хочу оговориться, что «левый-центр-правый» не получилось. Получилось только «левый-правый-центр». Но и это уже хорошо... Тут не до жиру, поскольку еще только вчера все мы (в том числе и я) сошлись на том, что решения поставленной задачи не существует в принципе...

Я не говорю, что «левый-центр-правый» – это невозможно, просто заниматься этим извратом у меня уже точно нет времени...)

Код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Левая - Правая - Центр</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
html {background: #FFFFFF; height: 100%;}
body {background: url(img/bg.gif) repeat-y center top; min-width: 1000px; min-height: 100%; position: relative;}
* html body {height: 100%;}

#header {background: #FFFF99; height: 100px;}
#content {width: 100%; padding-bottom: 70px; overflow: hidden;}

#outer1 {width: 100%; margin-left: -100%; float: right;}
#outer2 {margin-left: 570px;}

#news {width: 50%; float: left; position: relative; left: -570px;}
#present {width: 50%; margin-left: -1px; float: right;}
#main {width: 570px; margin: 0px auto;}

#footer {background: #66FFCC; width: 100%; height: 70px; position: absolute; bottom: 0px;}
* html #footer {bottom: -1px;}
</style>
<script src="js/minmax.js" type="text/JavaScript"></script>
</head>

<body>
<div id="header">Заголовок</div>

<div id="content">
****<div id="outer1">
 *<div id="outer2">
 *****<div id="news">Новости</div>
 *****<div id="present">Презентация</div>
 *</div>
****</div>
****<div id="main">Контент</div>
</div>

<div id="footer">Футер</div>
</body>
</html>

IE6+
FF1.5+
Opera9+
Safari3

© 2007 Aykroyd. All rights reserved.
Копирование и распространение без ссылки на [Только зарегистрированные пользователи могут видеть ссылки. ] преследуется по понятиям... :read:

**Lann** · 25.11.2007, 22:04

Спасибо! Буду разбирать-разбираться

Тема: Шаблон DIV в 3 колонки

Опции темы

Поиск по теме

Отображение

Похожие темы

HTML шаблон

Шаблон DIV в 3 колонки

Шаблон Div в 3 колонки

Шаблон на DIV'ах

Шаблон из html в php

Ваши права