Резиновая верстка

  • Автор темы Guest
  • Дата начала
G

Guest

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

Верстаю разделив на следующие дивы:

Т.е. делаю три ряда дивов, в которых по три дива; в каждом ряду поступаю как в
Ссылка скрыта от гостей
.
В верхнем и нижнем ряду проблемы не возникает, т.к. высота у них фиксированная.
Но у левого и правого дивах среднего ряда мне не удается сделать высоту равную высоте дива с контентом. Удается выставить фиксированную высоту, но это не усместно. Когда ставлю height: 100%; - они вообще не отображаються.
Как привязать высоту боковых дивов среднего ряда к высоте дива с контентом?
Применение скриптов не уместно.

Возможно у меня неправильный подход к верстке такой конструкции?

Заранее спасибо.
 
B

builder

Подход у вас правильный, но верстка дивами всё же не идеальна и подобные проблемы, как у вас возникают не редко. Решить простыми бесскриптовыми способами, чтобы и код валидным и красивым остался, не получится. Используя только html и css есть два варианта, причем оба не очень то хорошие: 1. средний ряд делать таблицей из трех ячеек, боковые - фиксированы, средняя - на 100%. 2. Средний ряд сделать фиксированным и в одну ячейку, в которой в background будет изображение с тенями повторяться по вертикали по repeat-y.
 
E

EdgarWine

Я не спец по html... Так, любитель-самоучка... Но никогда не понимал такую страсть к div'ам...
Я бы это сделал обычной таблицей, даже без css обошелся бы... :)

И чу значить "валидным"? о__О
 
V

vital

1. Таблицы не предназначены для верстки. Вообще. Это плохой тон. Для верстки их испольщовали в годах 90х, когда дизайны были по проще, а браузеры по слабее. Таблицы предназначены именно для того, что бы делать таблицы.
2. Смешивать разметку с дизайном нельзя. Т.е. html - это только разметка, структура. CSS - это дизайн. И только так.
3. Валидность = правильность, соответствие правилам. validator.w3c.org грубо говоря вот этой фиговине. Если она выдаст что мол все круто - это что-то в духе повода для гордости верстальщику=) Не всегда конечно.
 
G

Guest

vital сказал(а):
1. Таблицы не предназначены для верстки. Вообще. Это плохой тон. Для верстки их испольщовали в годах 90х, когда дизайны были по проще, а браузеры по слабее. Таблицы предназначены именно для того, что бы делать таблицы.
Нажмите, чтобы раскрыть...
Холиварная глупость. Если следовать всему, что предлагает ТБЛ то затраты на вёрстку возрастут в разы, а совместимость с разными браузерами и тем более с разрешением окна, будет недостижима.

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

Аналогичный холивар в программировании - GoTo.
 
1

1ive

реализация того, что ты хочешь)

<!--shcode--><pre><code class='html'><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8;charset=utf-8" />
<title>1ive design</title>
</head>
<body>
<table style="width:100%;">
<tr>
<td valign="top" style="background:#f0f0f0;width:300px;">

text<br/>text<br/> </td>

<td style="background:#f6f6f6;" valign="top">

text<br/>text<br/>text<br/>text<br/>text<br/>text<br/>

</td></tr></table>
</body>
</html>[/CODE]
 
E

EdgarWine

реализация того, что ты хочешь)
Нажмите, чтобы раскрыть...
Эм... Что-то это совсем не то...

Вот, набросал пример:

<!--shcode--><pre><code class='html'><html>
<head>
</head>
<body>
<br>
Разрезал картинку на 9 частей. Названия от "1.png" до "9.png" соответственно.<br>
<br>
<table width="100%" cellpadding="0" cellspacing="0">
<tr height="50">
<td width="20" background="1.png"></td>
<td background="2.png" align="center" valign="middle"><font size="5" color="white">Авторизация</font></td>
<td width="20" background="3.png"></td>
</tr>
<tr>
<td width="20" background="4.png"></td>
<td background="5.png" align="center" valign="middle">
Дни большим<br>программистам ну.<br>Нью вы уровней<br>программистом,<br>всего удивительного по<br>эти, то джоель<br>начать них.<br>До улице собой не.
<br><br>Или чтоб в центре, но выровнено по левому краю:<br><br>
<table><tr><td>Дни большим<br>программистам ну.<br>Нью вы уровней<br>программистом,<br>всего удивительного по<br>эти, то джоель<br>начать них.<br>До улице собой не.</td></tr></table>
</td>
<td width="20" background="6.png"></td>
</tr>
<tr height="20">
<td width="20" background="7.png"></td>
<td background="8.png"></td>
<td width="20" background="9.png"></td>
</tr>
</table>
</body>
</html>[/CODE]
Сами картинки сделать? Или уже сами? :)
 
Для ответа нужно войти/зарегистрироваться
Мы в соцсетях:

Обучение наступательной кибербезопасности в игровой форме. Начать игру!

Верх Низ