Это MWEB.RU

**Алена_online** Пн июл 23, 2007 16:35

Привет! Вопрос к мастерам каскадных таблиц стилей.
Первый раз в своей жизни я решила сделать сайт на CSS -03-

Дизайн прост. Header, 2 колонки (слева - навигация, справа -контент), внизу footer.
Эскиз оформила в Фотошопе: generate CSS через ID. И вот в чем проблема:
Там все блоки div имеют конкретную высоту. Когда я добавляю слишком много текста в блок "контент", весь дизайн едет по швам!! -20-

Потому что точные пропорции отношения всех блоков нарушаются.

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

**Muerto** Пн июл 23, 2007 17:15

Код в студию. Только зачем растягивать блок навигации?

**Алена_online** Пн июл 23, 2007 22:44

Muerto блок навигации я хотела бы растянуть на высоту блока контента, потому что border-left навигации служит рамкой слева. Странно если рамка вдруг прерывается.

А вот код:

Код: Выделить всё: #nav { position:absolute; left:110px; top:275px; width:104px; height: auto; border-left: 1px solid silver; } #content { position:absolute; left:214px; top:275px; width:596px; height:459px; border-right: 1px solid silver; } #footer { position:absolute; left:110px; top:734px; width:749px; height:40px; background-color: EAEBE9; }

При таком раскладе дизайн не растягивается, если добавляешь больше текста.

**Berezkin** Вт июл 24, 2007 9:54

http://htmlbook.ru/content/?id=109

**Алена_online** Вт июл 24, 2007 17:07

Berezkin, спасибо тебе за ссылку! сейчас буду разбираться ))

**Padonak** Вт июл 24, 2007 22:20

background-color: EAEBE9; - что это за такой интересный колор? -08-

**Muerto** Вт июл 24, 2007 22:59

height:100% срабатывает не всегда даже если положить весь сайт в отдельный блок. Есть вариант раздвижения скриптом. Т. е. блоку задаётся height вычисляемый от размеров body минус подвал и шапка.

**Алена_online** Ср июл 25, 2007 6:28

И как же люди верстают на CSS??
-05-

Должен же быть нормальный способ собрать дизайн!

Padonak, а это цвет для примера взят, на самом деле бг белый будет ))

Muerto, да любопытно, только я хотела бы без скриптов обойтись.

**Berezkin** Ср июл 25, 2007 10:36

Я вот только не пойму, чем же все-таки таблицы не устраивают...
Мое мнение - страничка на дивах = изврат и порнография.

**Muerto** Ср июл 25, 2007 17:50

2Алена_online: Тебе проще плюнуть на бордеры а сделать у контента бэкграунд слева в две полоски. А если могут быть варианты, что блок навигации может быть больше блока контента, то засунуть их в один блок и сделать ЕМУ две полоски бэкграундом на таком расстоянии от края, сколько ширина блока навигации.
Типа, как-нибудь так:

Код: Выделить всё: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /> <title>Untitled Document</title> <style type="text/css"> body {padding:0; margin:0;} div#all {background:#eee url(dot.png) 253px 0px repeat-y;} div#header {width:100%; height:200px; text-align:center;} div#navigation {width:250px; height:100%; border:#000000 1px solid; float:left;} div#content {margin-left:260px; border:#000000 1px solid;} div#footer {width:100%; height:200px; text-align:center} </style> </head> <body> <div id="header"> <h1>шапка</h1> </div> <div id="all"> <div id="navigation"> <ul> <li>первый</li> <li>второй</li> <li>третий</li> </ul> </div> <div id="content"> <h1>контент</h1> <h1>контент</h1> </div> </div> <div id="footer"> <h1>подвал</h1> </div> </body> </html>

Где dot.png - картинка 3Х1 с двумя точками по краям.

**Padonak** Ср июл 25, 2007 21:50

2Алена_online: девушко ты не совсем поняла ход моей падоничьей мысли -02-

так цвет не обозначаетцо

**Muerto** Чт июл 26, 2007 10:25

2Алена_online: Уважаемый Padonak имел в виду, что пропущен знак background-color: #EAEBE9;

**Alkeeper** Чт июл 26, 2007 12:56

2Padonak: Мне больше нравиццо цвед - #EBACCA -13-

**Padonak** Чт июл 26, 2007 22:06

2Muerto:

2Alkeeper: -14-

**Алена_online** Пт июл 27, 2007 0:35

Berezkin да, я тоже люблю все делать на таблицах, но некоторые говорят, что это уже прошлый век и скоро поисковые роботы начнут игнорировать <table>. А пока это время не наступило, просто хочется уметь работать с CSS.

Muerto, спасибо за предложение, попробую так сделать -03-

Padonak, после такого коммента теперь всегда буду помнить поставить # в стилях -06-

В общем, товарищи, эскиз выглядит так:
http://forumpix.narod.ru/testlayout.jpg

**Alkeeper** Пт июл 27, 2007 6:12

Алена_online писал(а):Berezkin да, я тоже люблю все делать на таблицах, но некоторые говорят, что это уже прошлый век и скоро поисковые роботы начнут игнорировать <table>. А пока это время не наступило, просто хочется уметь работать с CSS.

Чушь, причем полная. Поисковики и так игнорируют все теги, кроме метаданных

**Berezkin** Пт июл 27, 2007 9:03

2Alkeeper: -14-

2Алена_online: Эт где это вы такую ерунду вычитали???

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

**Alkeeper** Пт июл 27, 2007 10:41

Berezkin писал(а):2Alkeeper:

2Алена_online: Эт где это вы такую ерунду вычитали???

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

Самой большой проблемой станет IE6 :)

**Berezkin** Пт июл 27, 2007 12:15

2Alkeeper: -03-

**Padonak** Сб июл 28, 2007 21:47

2Alkeeper: вобщем астапаф походу понесло -13-

раз уж немного отклонились от темы вот хочу поделитцо со всеми радостью от того что нашел веселуйу кортинко на удаве:

**kost** Сб июл 28, 2007 22:20

Alkeeper писал(а):Самой большой проблемой станет IE6 :)

Это точно. А IE5 -- еще большей. Хотя, я в последнее время на него уже забил.

Berezkin писал(а):Я вот только не пойму, чем же все-таки таблицы не устраивают...
Мое мнение - страничка на дивах = изврат и порнография.

Таблицы нужны для оформления таблиц.

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

Делается без проблем. И все прекрасно работает.

**Berezkin** Пн июл 30, 2007 10:34

Делается без проблем. И все прекрасно работает.

код в студию, человек же просил...да и я посмотрю, мож научусь чему новому

Это MWEB.RU

Сайт на CSS - вопрос

Сайт на CSS - вопрос

Кто сейчас на конференции