Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Верстка, колонки одинаковой высоты 
:(
    Опции темы
box
Дата 24.4.2008, 14:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 27.2.2007

Репутация: нет
Всего: 0



привет всем !
страница : шапка +левая колонка+центральный блок+правая колонка .
подскажите как сделать что-бы левая , правая , и центральная колонки были одинаковой высоты ?
и как убрать отступ между шапкой и нижними блоками ?
Код


body {
margin:2em;
padding:0;
background: #000000;
font-family: Arial, Helvetica, sans-serif;
font-size:12px;
}

a {
color:#cc0000;
text-decoration:underline;
}

a:hover {
color:#000000;
text-decoration:none;
}

blockquote {
margin:2em;
padding:1.9em;
font-weight: bold;
font-size: 12px;
color: white;
background-color:#000000;
border-top:4px solid #FEED91;
border-bottom:4px solid #FEED91;
}

blockquote p {
margin:.1em;
}

#header {
margin: 0 0 0.2em 0;
padding: 1em 1.5em;
height:8em;


/* CHANGED */
background: #343434 url('header.jpg') no-repeat top left ;
border:0px solid ##2D5289;;
}

#header h1 {
margin:0;
padding:0;
font-size:24px;
color: black;
font-family: Arial, Helvetica, sans-serif;
}

#header h3 {
margin:0;
padding:0;
font-size:18px;
color: black;
font-family: Arial, Helvetica, sans-serif;
}

#header a {
text-decoration:underline;
}



#leftColumn {
float: left;
width:16em;

margin: 0;
padding: 1em .5em 2em .5em;
background:#000000;
/*border:1px solid #eeeeee;*/
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
color: #000000;
}

#leftColumn h2 {
margin:0 0  0;
padding:0;
font-size:12px;
color: #BC7908;
letter-spacing:.1em;
}



#centerColumn {
  margin: 0 15.4em;
  padding: 1em .5em 2em .5em;


  font-size:12px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;

  background-color: #000;
}

/* Fix IE and Opera 5 */
* html #centerColumn {
  float: left;
  margin-left: 0.2em;
  margin-right: 0.2em;
}

#centerColumn h2 {
margin:0;
padding:0;
font-size:1em;
color: #BC7908;
letter-spacing:.1em;
}

#centerColumn h3 {
margin:0;
padding:0;
font-size: 12px;
color: #000;
text-align: center;
letter-spacing:.1em;
}

#rightColumn {
float: right;
width:16em;

margin:0;
padding:1em .5em 2em .5em;
background:#000000;
border:0px solid #eeeeee;
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
text-align: justify;
color: #000000;
}

#rightColumn h2 {
margin:0 0  0;
padding:0;
font-size:12px;
color: #BC7908;
letter-spacing:.1em;
}

/* CHANGED */
#wrapper {
  overflow: hidden;
}


PM MAIL   Вверх
bars80080
Дата 24.4.2008, 14:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



убрать отступы - задай стиль в самом начале:
Код
* { margin: 0px; padding: 0px; }

чтобы сделать колонки одинаковой высоты, достаточно провести вёрстку таблицей
имхо, если ты делаешь таблицу, зачем тебе искать что-то другое

иначе, это надо посоображать, скажем засунуть все колонки в один див, и каждой колонке назначить высоту 100%
PM MAIL WWW   Вверх
box
Дата 25.4.2008, 08:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 506
Регистрация: 27.2.2007

Репутация: нет
Всего: 0



Нет , нифига непомогает * { margin: 0px; padding: 0px; } , вообще никаких изменений непроисходит ! 
вы немог-ли бы привести пример , как это  "скажем засунуть все колонки в один див, и каждой колонке назначить высоту 100%" 

PM MAIL   Вверх
ОнКофе
Дата 25.4.2008, 09:18 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 274
Регистрация: 3.3.2006
Где: http://www.angeli na-pitt.by.ru

Репутация: нет
Всего: нет



box, бери больше! проси чтобы сделали все за тебя и не попросили бы за это денег! 
PM MAIL WWW   Вверх
bars80080
Дата 25.4.2008, 09:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



Код

<html><head>
<style>
* { margin: 0px; padding: 0px; }
body { text-align: center; background: #cccccc; }
#page { text-align: left; margin-left: auto; margin-right: auto; width: 1000px; }
#header { width: 100%; height: 200px; background: #9999ff; }
#middle { width: 100%; background: #ff0000; }
#col_left { width: 200px; height: 400px; float: left; background: #99ff99; }
#col_right { width: 200px; height: 600px; float: right; background: #ffff00; }
#col_center { background: #ffffff; }
#footer { width: 100%; height: 100px; background: #99ffff; }
.clear { clear: both; }
</style>
</head>
<body><div id="page">

<div id="header">header</div>
<div id="middle">
<div id="col_left">col_left</div>
<div id="col_right">col_right</div>
<div id="col_center">col_center

content content content content content content content content content content content content content content 

</div>
<div class="clear"></div>
</div>
<div id="footer">footer</div>

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

PM MAIL WWW   Вверх
rowerros
Дата 27.4.2008, 20:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 27.4.2008

Репутация: нет
Всего: нет



 в данном примере  col_left  с подвалом не соединяются. тестировал в трех браузерах.
сам ищу резиновый шаблон на дивах. чтобы крайние колонки фиксировались а центральная растягивалась. говорят уже есть такие
PM MAIL   Вверх
SelenIT
Дата 27.4.2008, 21:06 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Цитата(rowerros @  27.4.2008,  20:24 Найти цитируемый пост)
чтобы крайние колонки фиксировались а центральная растягивалась. говорят уже есть такие 

Имхо, лучше всего для этой цели подходит техника отрицательных margin-ов (боковые колонки накладываются на border-ы центральной). Минимальный пример - здесь.

А по сабжу - можно еще воспользоваться поиском по "faux columns" и "Holy Grail layout".


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
rowerros
Дата 27.4.2008, 23:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 27.4.2008

Репутация: нет
Всего: нет



вот примерчик есть здесь. очень оригинально.по крайней мере для меня)
и вроде работает)
кстати о минусах можно здесь отписаться.стоит ли его взять за основу сайта?
сам пока не силен в блоках но говорят за ними будующее)

http://trifler.ru/blog/post_1184599195.html

PM MAIL   Вверх
bars80080
Дата 28.4.2008, 09:45 (ссылка) |    (голосов:2) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315



имхо

для меня они и в прошлом  smile 

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

расскажу байку
однажды, верстал я макет и всё никак у меня не получалось достичь гармонии. убираешь один край - вылезает другой, растягиваешь блок, он перестаёт отвечать контенту. задолбавшись окончательно, я решил поступить наиболее примитивным, зато самым правильным способом, я взял листок бумаги и нарисовал, то что хочу.
спустя минуту я с удивлением взирал на листок, ибо нарисовал таблицу. 
на вскидку, процентов 90 или даже больше сайтов имеют табличный стиль страницы, т.е. что-то напоминающее брошюру или газетный листок. и тогда возникает сакральный вопрос, а нафига пытаться сделать деревянный автомобиль? 
если твой сайт должен выглядеть как таблица, почему не использовать табличную вёрстку?

мир вашему дому.
PM MAIL WWW   Вверх
SelenIT
Дата 28.4.2008, 10:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401



Цитата(bars80080 @  28.4.2008,  09:45 Найти цитируемый пост)
но потом захочется, чтобы страница растягивалась до нижнего края экрана

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


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0522 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.