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

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем -, 15 авг 2010.

  1. Гость

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

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

    Заранее спасибо.
     
  2. builder

    builder New Member

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

    EdgarWine Гость

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

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

    vital Больной Компом Детектед
    Команда форума Web Team

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

    Холиварная глупость. Если следовать всему, что предлагает ТБЛ то затраты на вёрстку возрастут в разы, а совместимость с разными браузерами и тем более с разрешением окна, будет недостижима.

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

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

    1ive Well-Known Member
    Web Team

    Регистрация:
    12 сен 2010
    Сообщения:
    694
    Симпатии:
    0
    реализация того, что ты хочешь)

    <!--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]
    [​IMG]
     
  7. EdgarWine

    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]
    Сами картинки сделать? Или уже сами? :)
     
Загрузка...

Поделиться этой страницей