Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Помогите заменить table на div

Автор: Алина 1.8.2009, 17:42

Есть структура, сверстанная в табличке (в каждой рамке и углу своя картинка - не просто скругленные уголки, примеров которых в сети хватает) - на картинке в приложенном файле.

Код в табличке выглядит так:

Код


<table cellpadding="0" cellspacing="0">
<tr height="20">
<td name="table_left_top" id="table_left_top">&nbsp;</td><td name="table_top" id="table_top">&nbsp;</td> <td name="table_right_top" id="table_right_top">&nbsp;</td>
</tr>
<tr>
<td name="table_left" id="table_left">&nbsp;</td><td name="table_center" id="table_center"><h1>Some kind of text</h1>some kind of a very long text<br>>some kind of a very long text<br>>some kind of a very long text</td><td name="table_right" id="table_right"></td>
<tr>
<tr>
<td name="table_left_bottom" id="table_left_bottom">&nbsp;</td><td name="table_bottom" id="table_bottom">&nbsp;</td><td name="table_bottom_right" id="table_bottom_right">&nbsp;</td>
<tr>
</table>

Хочу переделать в дивах, для начала получилось примерно вот такое:

Код


<div style="width: 600;">
  <div style="background:#7ceeee; float:left; width:100px;"> Блок 1</div>
  <div style="background:#ee7cee; float:left; width:400px;"> Блок 2</div>
  <div style="background:#eeee7c; float:left; width:100px;"> Блок 3</div>
  <div style="background:#7ecc7e; float: left; width:100px; clear:left;"> Блок 4 </div>
  <div style="background:#7ceeee; float:left; width:400px;"> Блок 5. Это совершенно разный и неожиданный текст внутри дива. Это совершенно разный и неожиданный текст внутри дива. Это совершенно разный и неожиданный текст внутри дива.</div>
  <div style="background:#ee7cee; float:left; width:100px;"> Блок 6</div>
  <div style="clear: both;"></div>
  <div style="background:#eeee7c; float: left; width:100px; clear:left;"> Блок 7 </div>
  <div style="background:#ee7cee; float:left; width:400px;"> Блок 8</div>
  <div style="background:#7ceeee; float:left; width:100px;"> Блок 9</div>
</div>

Оно уже похоже на табличку, но в средней части дивы "короткие" - не на всю высоту среднего дива, с текстом.
Как это исправить?

Автор: blah 2.8.2009, 00:28

Алина,
В чем тогда смысл бестабличной верстки, если у Вас ячейки таблицы просто заменены дивами? Где семантика?
Если оставить все как есть, то для данного рисунка можно сделать так:

Код


<div style="width:600px;">
    <div style="background:#7ceeee; float:left; width:100px;"> Блок 1</div>
    <div style="background:#ee7cee; float:left; width:400px;"> Блок 2</div>
    <div style="background:#eeee7c; float:left; width:100px;"> Блок 3</div>
    <div style="background:#7ceeee; float:left; clear:both; width:580px; border:solid #f717ab; border-width:0 10px;"> Блок 5. Это совершенно разный и неожиданный текст внутри дива. 
Это совершенно разный и неожиданный текст внутри дива. Это совершенно разный и неожиданный текст внутри дива.</div>
    <div style="clear: both;"></div>
    <div style="background:#eeee7c; float: left; width:100px; clear:left;"> Блок 7 </div>
    <div style="background:#ee7cee; float:left; width:400px;"> Блок 8</div>
    <div style="background:#7ceeee; float:left; width:100px;"> Блок 9</div>
</div>

А по-хорошему, если блок фиксирован по ширине сделать так:

Код


<div class="box-outer">
    <div class="box">
        <div class="box-inner">
            Контент
        </div>
    </div>
</div>

Код


.box-outer{
    width:600px;
    background:url(middle-stripe.gif) repeat-y;
}
.box{background:url(top-stripe.gif) no-repeat;}
.box-inner{background:url(bottom-stripe.gif) no-repeat 0 100%;}

Автор: Алина 2.8.2009, 11:17

Цитата

смысл бестабличной верстки

есть хитрый скрипт, который должен обрабатывать то, что я сделаю, написан был не мной и таблицы не переваривает для обработки данных. В веб-дизайне я, если честно, только чуть-чуть и по необходимости, так что не особенно глубоко - поэтому первой мыслью было тупо заменить table на div, чтобы только работало, поскольку как-таковая "бестабличность" нужна только из-за этого скрипта (который изменить я не умею).

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

Смущает только вот что - если мне надо блоки трех размеров по ширине - это надо нарисовать три варианта фоновой картинки? Или можно как-то хитро вставить ДВЕ фоновые картинки в див (слева и справа прижать)? Мысль абсурдная, но мало ли, что они, эти дивы, умеют...