Вопрос к радикальным любителям DIV-ной верстки. Как сверстать без таблицы вот такое =)
 

[IMG]http://www.fotolink.su/pic_b/f96d0eb353e635b1340df504ae4a5b36.jpg[/IMG]

надеюсь, картинка видна.
нужно два блока, типо столбики. Как видим, в левом выравнивание по середине. И оба они растягиваюццо в зависимости от высоты текста в правом.

Расскажите, ув. господа, как такое сверстать дивами, обойдясь без таблицы.
Мне действительно интересно и я пока что еще не начинал верстать.
Но по прикидам, такое можно сбацать токо таблицей.
Или я неправ?

если картинка не видна, то она вот
[url]http://www.fotolink.su/pic_b/f96d0eb353e635b1340df504ae4a5b36.jpg[/url]
[img]http://www.fotolink.su/pic_s/f96d0eb353e635b1340df504ae4a5b36.jpg[/img]
[img]http://www.fotolink.su/pic_b/f96d0eb353e635b1340df504ae4a5b36.jpg[/img]

Как-то сникли бойкие почитатели дивовой верстки.
Ладно, отложу верстку до завтра. Авось чо-то умное все ж народите. =)

У блочных элементов есть такое замечательное свойство: display: table(table-row, table-cel и т.д.). Ими можно построить любую таблицу на дивах, не работает в IE 6,7 (но есть костыль), подробнее в мануале. пример: [url]http://www.cyberforum.ru/html/thread431748.html[/url]

Ответ на поставленный вопрос - Можно сверстать не только таблицами.

Там же (в примере) написано то, что обсуждалось и здесь - "Таблицы как раз для отображения табличных данных и нужны. Использовать таблицы по их прямому назначению не запрещено."

То что на картинке - я бы сделал обычным TABLE и не заморачивался, как я понимаю это будет выводится где-то в середине страницы, ну а основную верстку, как радикальный любитель, Конечно же дивами..

[quote=Kuba;26912237]То что на картинке - я бы сделал обычным TABLE и не заморачивался[/quote]
это слишком легко, как для радикальных любителей дивов.
Добавлю: это что-то типо баннера. Токо реклама там будет каждый раз разная по высоте и если снять флажок, то грузиться реклама не будет. =)
Эта вещь будет внизу страницы.
Как видим, для таблицы она не особо подходит, т.к. это не вывод данных, а дизайн, поэтому те, кто сходили с ума в другой теме, доказывая что таблицами верстать вообще низя, просто таки обязаны подсказать как решить ЭТОТ случай с помощью дивов. =))
Так что слив не принимаеццо. =)

Если эти блоки имеют конкретную ширину (то есть не "резиновые"), и только меняется высота в зависимости от содержимого, то можно сделать блоками :)
Нужно только знать что такое относительное и абсолютное позиционирование :)

А я бы сделал таблицей и не парился :)

5-Искусственный Интеллект1 >
правый блок - %-ный. В данное время - 60%. Левый - фиксированный.

[quote=Искусственный Интеллект1;26918241]А я бы сделал таблицей и не парился :)[/quote]
какие все стали покладистые, аж до тошноты =))

6-Гавайские субтитры > разницу видишь между версткой страницы и версткой баннера, если это вообще можно назвать версткой.
[quote=Гавайские субтитры;26926035] 5-Искусственный Интеллект1 > правый блок - %-ный. В данное время - 60%. Левый - фиксированный.[/quote]
можно сделать с помощью блоков.

7-Искусственный Интеллект1 >
гы, как? =)

[quote=Искусственный Интеллект1;26927802]разницу видишь между версткой страницы и версткой баннера, если это вообще можно назвать версткой[/quote]
нет не вижу. разницы нету. =)

Откладываю еще на один день, в надежде, что будет подсказано крутое решение без таблицы =)

8-Гавайские субтитры > а голова тебе на что? Чтоб туда только кушать и шапку носить? :) Думай :) Относительное и абсолютное позиционирование тебе в помощь :)

[quote=Искусственный Интеллект1;26928588]а голова тебе на что? Чтоб туда только кушать и шапку носить?[/quote]
а форум на что? Чтобы спрашивать.

[quote=Искусственный Интеллект1;26928588]Относительное и абсолютное позиционирование тебе в помощь :)[/quote]
Хотя считаю это костылем, но пусть. Ладно.
А далее что?

Считай это тоже костылем -
[url]http://thexmails.narod.ru/[/url]

Ну а для авторитетности - выдача гугла и яндекса построена аналогично..

О, вроде оно.

Скопировал ?? Я удаляю.

Знаешь почему не поставлю?
Потому что левый блок не фиксированной ширины и контрол перекашивается при изменении ширины браузера.
Вот такое вот. =(
Да и вообще, top 50% это реальный изврат и токо имитация выравнивания посредине.
А если в левом блоке будет не токо чекбокс и высота его контента будет меняться в зависимости от ширины окна, то куда оно улетит?
Не. Низачот.
Но конечно благодарю за то, что хоть что-то сделал, а не токо языком это самое. =)

Верстать сайт за тебя я не собирался.
то что на картинке, Конкретно поставленная задача решена. Поиграй со стилями на досуге, очень увлекательно решать не тривиальные задачи. чуть чуть фантазии и можно сверстать любой макет, но за тебя это делать никто не будет..

17-Kuba >
это не решение, а хитрость.
Сам подумай - с таблицей, где valign=middle, оно будет по центру, хоть что ты с ней делай.
В той верстке - не будет. Будет только если ограничить ширину контейнера.
А мне надо, чтобы оно было "конкретно по центру", без всякого.
И, конечно же, я признателен за помощь в решении.

Мдя.
Сделал, чтобы если выключено писало под контролом "реклама выключена".
Угадайте с трех раз куда оно все сдвинулось? =)))

Гавайские субтитры > знаешь что такое jquery?

tooltip

20-lublurtk >
гыгы.
Дизигн надо делать чисто по css.
JQ и прочие игрушки - это для немного другого =)

21-Kuba >
га?

Ради интереса все же сделал свой вариант.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>
Верстка баннера блоками div
</title>

<style type="text/css">

html ** height:100%; padding: 0px; margin: 0px; **
body ** background: #fff; text-align: left; margin: 0px; padding: 10px 10px; font-family: Tahoma, Geneva, sans-serif; font-size: 13px;

**

.banner_div ** padding: 15px; background: #ddd; **

.banner_one ** padding: 5px 0px; **

.banner_container ** background: #fff; position: relative; **

.banner_part_left ** position: absolute; left: 0px; top: 50%; width: 100px; text-align: center; **

.banner_part_left_contr_1 ** **

.banner_part_left_contr_2 ** position: absolute; left: 0px; bottom: 50%; width: 100%; **

.banner_part_right ** padding: 0px 0px 0px 100px; **
.banner_part_right_contr_1 ** padding: 0px 0px 0px 10px; background: #ddd; **
.banner_part_right_contr_2 ** padding: 5px 5px 5px 5px; background: #fff; **

</style>

</head>
<body>
<div>
Тут текст.
<div>
<div style="">
<div style="">
Баннер будет ниже: 100 px левая часть, остальная будет правая.
</div>
</div>
</div>
</div>

<div>

<div class="banner_div">

<div class="banner_one">
<div class="banner_container">
<div class="banner_part_left">

<div class="banner_part_left_contr_1">
&nbsp;
<div class="banner_part_left_contr_2">
<input type="checkbox" name="pf" value="">
</div>

</div>

</div>
<div class="banner_part_right">
<div class="banner_part_right_contr_1">
<div class="banner_part_right_contr_2">

<div>
Тут тект правой части баннера.<br>
Купите у нас какую-нибудь ерунду.<br>
Пусть она вам и не нужна<br>
Все равно купите.
</div>

</div>
</div>
</div>
</div>
</div>

<div class="banner_one">
<div class="banner_container">
<div class="banner_part_left">

<div class="banner_part_left_contr_1">
&nbsp;
<div class="banner_part_left_contr_2">
<input type="checkbox" name="pf" value="">
</div>

</div>

</div>
<div class="banner_part_right">
<div class="banner_part_right_contr_1">
<div class="banner_part_right_contr_2">

<div>
Тут тект правой части баннера.<br>
Тут какой-нибудь рекламный текст.<br>
И дальше убеждаем посетителя купитьт какую-нибудь лабуду пусть и абсолютно ему не нужную

</div>

</div>
</div>
</div>
</div>
</div>


</div>

</div>

</body>
</html>

23-Искусственный Интеллект1 >
это прикол?

22-Гавайские субтитры >в jquery определяешь height дива с текстом. потом задаешь этот размер и line-height диву с чекбоксом.

[url]http://jsfiddle.net/[/url] тут можно все это делать.

можно использовать таблицу + css.
можно в таблицу добавить div.

главное не ленись и пробуй все варианты)

24-Гавайские субтитры > какой прикол, все работает нормально.

26-Искусственный Интеллект1 >
неа. Не робит.

25-lublurtk >
ага щас.
Буду вязать стокилобайтную либу ради выравнивания по центру. Еще чего. =)

[quote=Гавайские субтитры;26954230] 26-Искусственный Интеллект1 &gt; неа. Не робит. [/quote]
ты просто скопировал код, или все же заменил в коде две звездочки на открывающую фигурную скобку?

подтверждаю, код рабочий..

[quote=Искусственный Интеллект1;26959319]или все же заменил в коде две звездочки на открывающую фигурную скобку?[/quote]
предупреждать надоть, что там еще менять что-то =)
Ща еще раз скопирну и поменяю.
Щас...

Пацаны, вы или не понимаете, или прикидываетесь.
Вы понимаете что такое центр по вертикали или не?
То что вы предлагаете, это не центрирование в контейнере по вертикали, а отдаление от верха контейнера на 50%.

Вы же должны знать, что при центрировании учитывается еще и высота объекта, подлежащего центрированию.
Вот что делать, когда флажок снимается, и при таком условии ниже флажка появляется текст "реклама выключена"?
Угадайте, куда сместится центр при таком варианте?
Веть высота объекта, который вы предлагаете "отталкивать" от верха - измениццо. =))

Да и вообще, учитывая что объект имеет хоть какую высоту, top уже не может быть 50%. А 49, или даже 48, а может и меньше.
=)
Это даже не костили. Это гнилые подпорки, а не центрирование. =)))

[quote=Гавайские субтитры;26965306]
Вы же должны знать, что при центрировании учитывается еще и высота объекта, подлежащего центрированию. Вот что делать, когда флажок снимается, и при таком условии ниже флажка появляется текст "реклама выключена"? [/quote]
где в посте указано что при снятии флажка должен выводиться текст? Ты не умеешь составлять ТЗ :) так что это уже твои проблемы :)

Если все же надо сделать центрирование по высоте при добавлении текста после чекбокса, то нужно кое-что добавить в коде: после кода

<div class="banner_part_left_contr_1">
&nbsp;

нужно будет добавить
<br>&nbsp;

[quote=Гавайские субтитры;26965340] Да и вообще, учитывая что объект имеет хоть какую высоту, top уже не может быть 50%. А 49, или даже 48, а может и меньше. =) [/quote]
никаких 49 или 48 нет у меня в коде. все центрируется по середине, то есть указывается 50%.

[quote=Гавайские субтитры;26965340] Это даже не костили. Это гнилые подпорки, а не центрирование. =))) [/quote]
во-первых. Никто и не обещал, что будет легко и просто :)
во-вторых. видать ты еще не видел настоящих извратов в верстке :) особенно для браузера ie6 :)

[quote=Искусственный Интеллект1;26966270]где в посте указано что при снятии флажка должен выводиться текст? Ты не умеешь составлять ТЗ :) так что это уже твои проблемы :)[/quote]
вопрос был "как центрировать контент по вертикали", а не "как оттолкнуть верх контента в центр".
Разницу понимаешь? =))

Если бы мне надо было поставить верхний край элемента посредине, я бы не спрашивал, как отцентрировать, понятно? =)

[quote=Искусственный Интеллект1;26966315]во-первых. Никто и не обещал, что будет легко и просто :) во-вторых. видать ты еще не видел настоящих извратов в верстке[/quote]
Вон как у вас безтабличная верстка называется, не знал. =)

[quote=Искусственный Интеллект1;26966315]никаких 49 или 48 нет у меня в коде. все центрируется по середине, то есть указывается 50%.[/quote]
верх дива с чекбоксом находится на 50% высоты.
Тебе не кажется что это не то, что спрашивалось? =)

[quote=Искусственный Интеллект1;26966270]нужно будет добавить &nbsp;[/quote]
бугагась. А если оно на две строчки перенесет?
Ты вообще понял про что вопрос? Про центрирование ЭЛЕМЕНТА по вертикали.
Этот ваш изврат - это НЕ центрирование ЭЛЕМЕНТА по вертикали. =))

[url]http://shpargalkablog.ru/2012/03/vyrovnyat-tekst-vertikali.html[/url] интересно почитать. несколько способов вертикального выравнивания. не так просто как в таблице, но знать о них стоит.

div.classname
**
margin-top: -120px; /* margin-top = -(X/2) */
height: 240px; /* height = X */
top: 50%;
**

Не канает?

Есть такой изврат: разложить все дивы в точности по структуре как в таблице (таблица, заголовок, строки, ячейки) и назначить диву тип отображения «table-cell» ну или как-то так (забыл, давно было дело) то есть по сути та же таблица, но определённая через CSS а не тегами: гланды через жопу.

в третьем посте я говорил об этом, в IE6,7 не работает, а хак для них просто заменяет эти дивы обычной таблицей. Определенный изврат в этом есть ))