Таблицы? ТС, убейся!

На хабре мильен рецептов блочной верстки

Ну вот я блоки пытаюсь освоить, поможешь?

Хотя да, я считаю, что «верстать только блоками» - быдлокод. Ну редкий сайт может быть без явных таблиц. Но я сейчас холливарить не хочу.

> я считаю, что «верстать только блоками» - быдлокод. Ну редкий сайт может быть без явных таблиц

И кстати, пять строчек на яваскрипте заменят все лихие css-извращения :)

И, да, совсем забыл, никуда не посылать! Блочную верстку я вполне себе знаю и ничего нового не нашел, просто остался один вопрос (читать конец #1), ответ на который я не нашел, ведь всегда надо что-то задать фикс., но чтобы остальное осталось свободно резиновым.

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

а в честь чего надо переносить стереотипы табличной верстки на блочную и создавать костыли?

Где ты видишь стереотипы?
Если можешь предложить что-то (я две задачи в первом посте привел), так говори!

> как заставить блок забивать всю оставшуюся ширину (при float:left, разумеется) на странице вообще или в родительском элементе.

width:100%, не?

К сожалению, не.
width=100% - в таблице прокатит (ну, за некоторым исключением), а в случае с блоками 100%=ширина_окна и появится горизонтальная прокрутка.

> moscwich

Резиновому городу - резиновую верстку!

>> (2) Опекание второй колонкой колонки фикс. ширины (http://jsfiddle.net/UMBBt/).

Так чтоли нужно? http://jsfiddle.net/UVpjZ/

>как заставить блок забивать всю оставшуюся ширину (при float:left, разумеется) на странице вообще или в родительском элементе.

Если включить мозги и подумать что означает float то можно догадаться что никак.

_________

//wfrr

Да, тогда уж margin-left: 200px;

Но:

Кроме все прочего, смещение margin'ами, как и position:absolute; - совсем не есть хорошо.

>width=100% - в таблице прокатит (ну, за некоторым исключением), а в случае с блоками 100%=ширина_окна и появится горизонтальная прокрутка.

Либо я не правильно это парсю, либо ты сморозил чушь. Ширина в процентах указывает от размеров содержащего блока вне зависимости от того, таблица или простой блок. По умолчанию padding в неё не входит.

Выравнивание объекта.
Ничего не мешает ему иметь ширину.

Впрочем, мне верится, что никак, но вовсе не по этому, а потому, что такого решения я еще не нашел.

По первому — ты не можешь 2 разных элемента-картинки зафлоатить в разные стороны? + margin на блок текста (и картинки, если надо). Автоматическое вертикальное выравнивание к в таблице, ессесно, ты так не получишь.

Второе — также float + margin на другой блок. Фон придётся впихивать в фон предка, чтобы визуально казалось, будто оба блока одинаковой высоты.

Что вы как в 1ый раз? :}

Смотри:

<table><tr>
<td width=«200» bgcolor=«#333»>Колонка фиксированной ширина</td>
<td width=«100%» bgcolor=«#CCC»>Вторая колонка</td>
</tr></table>
(Хотя правильнее ставить 100% на table, а к второму td не задавать)

<div style=«float:left; background:#333;»>Колонка фиксированной ширина</div>
<div style=«float:left; background:#CCC; width:100%;»>Вторая колонка</div>
Вторая попросту переносится т.к. ей не хватает места. Или, при обстоятельствах, образует прокрутку.

Нет, ничего более я не имел ввиду .

>Выравнивание объекта.

Ничего не мешает ему иметь ширину.

Ты амозглие мохнатое, возьми словарик по онглицкому если спецификацию не осилил прочитать.

_________

//wfrr

Ололо © У тебя td в таблице находится, там 100% от ширины таблицы будет. Потому и ставится на table. Кури стандарт.

<div style=«float:left; background:#333;»>Колонка фиксированной ширина</div>

<div style=«float:left; background:#CCC; width:100%;»>Вторая колонка</div>

(?_?)

Ты уверен, что хотел не следующее?

<div style="float:left; width: ширина;">Колонка фиксированной ширина</div>
<div style="float:left; margin-left: ширина;">Вторая колонка</div>

Ну и, естественно, в фон вобщего предка вкорячить фон левой части.

Ширина может быть в процентах, если что. Если ты хочешь динамического размера блок, то что же у тебя там такое? Уверен, что не лучше по смыслу таблицу?

> По первому — ты не можешь 2 разных элемента-картинки зафлоатить в разные стороны? + margin на блок текста (и картинки, если надо).
Вот это я не понял, можешь на примере по ссылке поправить? Нажать «Update».

Второе — также float + margin на другой блок.

Осилили это выше уже, без margin'ов никак?

Автоматическое вертикальное выравнивание к в таблице, ессесно, ты так не получишь.

На vertical-align особого ума не надо, ща не об этом.

> Кури стандарт.
Плевал.

У тебя td в таблице находится, там 100% от ширины таблицы будет.

Проверил? А я проверил.

Ты уверен, что хотел не следующее?

Я ничего не хотел, я объяснял свое утверждение (которое, кстати, было обобщенным, и не полным, и, да, я там имел введу не «окна» а «родит. элем.» ).

Ширина может быть в процентах, если что. Если ты хочешь динамического размера блок, то что же у тебя там такое? Уверен, что не лучше по смыслу таблицу?

Да, лучше. Но мне хочется научится блоками, а то нынче фанатики бывают на рынке (я про «только блоками»), да и вообще, пригодится, уверен... Что у меня там? Да хоть каркас сайта: слева фикс. всякие ссылки, содержание, реклама - то, что на всех страницах одно... А справа - контент страницы.

>Вот это я не понял, можешь на примере по ссылке поправить? Нажать «Update».

http://jsfiddle.net/2sRW3/2/

Осилили это выше уже, без margin'ов никак?

А без гандикапов никак? :) Если бы был фиксированный размер, то можно было бы inline-block, а так, сходу вряд ли, думаю.

Внутри блок с clear добавь, если надо. Ну или clearfix хак.

http://jsfiddle.net/2sRW3/2/

О, спасибо! Впрочем, это ничем не лучше http://jsfiddle.net/DkXcD/2/
Просто зло вижу во всяких наложениях, слоях, абсолюном позиционировании и во всем связанном.

Если бы был фиксированный размер

width: Вся_ширина минус ширина_левого_блока;
Фиксированный размер не нужен. Вообще.

>Просто зло вижу во всяких наложениях, слоях, абсолюном позиционировании и во всем связанном.

В моём примере нет абсолютного позиционирования. Там вообще его, позиционирования, нет.

Фиксированный размер не нужен. Вообще.

Капитан в треде. Есть margin'ы, ты почему-то их не хочешь. Это не проблема margin'ов, а ССЗБ :}

>> У тебя td в таблице находится, там 100% от ширины таблицы будет.

Проверил? А я проверил.

Я тоже http://jsfiddle.net/DkXcD/11/ но тебя это, конечно, не убедит никогда, потому как поведение «по стандартам - говно, надо, как я хочу».

p.s. Когда ты кладёшь на стандарт, стандарт ложит на тебя.

Конечно не убедит, ведь ты поставил фикс. ширину всей таблице...

>В моём примере нет абсолютного позиционирования. Там вообще его, позиционирования, нет.
Не, ты не понял.
Да ну и ладно...

http://jsfiddle.net/DkXcD/13/

Ок, упертый ты мой. Горизонтального скроллбара один фиг нет. Теперь расскажи с какой стати он должен был появиться. И, самое главное, почему его, скотины такой, всё нет.

> Ок, упертый ты мой. Горизонтального скроллбара один фиг нет.

Ну так и я про это!
Таблицей нет, блоками - будет!
Вот отсюда смотри: http://www.linux.org.ru/forum/web-development/5936895?lastmod=1298467306838#c...

Читай

в случае с блоками 100%=ширина_окна

Не окна, а родит. элем. я имел ввиду.

> Кроме все прочего, смещение margin'ами, как и position:absolute; - совсем не есть хорошо.

Хотя да, я считаю, что «верстать только блоками» - быдлокод. Ну редкий сайт может быть без явных таблиц.

Плевал

Просто зло вижу во всяких наложениях, слоях, абсолюном позиционировании и во всем связанном.

Автор, у вас явное закостенение головного мозга. Срочно лечиться чтением материалов по вёрстке — вы застряли в прошлом веке.

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

> Срочно лечиться чтением материалов по вёрстке.
Читал, ничего нового не нашел, ни в чем меня не переубедили.
Вот если у вас сейчас тема black на LOR'е, например, оглянитесь:
Внизу, например, такая строчка:

←    [Вакансия] Веб-разработчик, Москва | Форум - Web-development | Как изменить тип поля в GAE Django?   →

Явная табличка, ну просто глупо это делать не таблицей. Она и сделана таблицей, а блоками вам бы пришлось задавать css'ом тучу значений, которые таблице уже предзаданы. Кстати, позиционирование элементов у меня асоциируется со страничками сверстаными в m$ office publisher, сохраненными в html... Возможно все от этого...

Вариант 2

Вариант 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>111</title>
    <style>
body {margin:0; padding:10px;}
#foo {background-color: #eee; width: 250px; float: left; }
#bar {background-color: #777; width: auto; margin-left: 250px;}
    </style>
</head>
<body>
<div id="foo">fixed</div>
<div id="bar">liquid</div>

</body>
</html>

> Явная табличка, ну просто глупо это делать не таблицей.

Ни в какой мере не таблица. Ну совершенно. Три независимых объекта — ссылок. Почему вдруг их нужно помещать в таблицу?

Она и сделана таблицей, а блоками вам бы пришлось задавать css'ом тучу значений, которые таблице уже предзаданы.

Совсем не кучу. А вот городить кучу тегов, ненужный элемент с довольно сложным и неоднозначным поведением — вот это во истину странно.

Нужно всего:
1. absolute, left 0 (или float).
2. absolute, right 0 (или float).
3. center, margin.

Кстати, позиционирование элементов у меня асоциируется со страничками сверстаными в m$ office publisher, сохраненными в html...

Не сомневаюсь — автоматические генераторы вряд-ли могут что-то хорошее выдать. Там более от m$.

Вариант 1

Пеши исчо

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <title>111</title>
    <style>
body {margin:0; padding:10px;}
#foo {background-color: #eee; width: 250px; float: left; }
#bar {background-color: #777; width: 250px;  float: right;}
#center  {width: auto; margin: 0 250px; text-align: center;}
    </style>
</head>
<body>
<div id="foo">pic1</div>
<div id="bar">lpic2</div>
<div id="center">central</div>

</body>
</html>

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

Очень кстати вспомнить, что изначально css являлся самым настоящим костылем, полностью. Это потом некоторые браузеры (Кроме IE и FF, емнип) ориентировались на эту технологию (т.е. любой тег состоит только из предзаданных css-свойств), но все-равно теги со своими свойствами, предзаданными браузером обробатываются быстрее.

anonysmous, мы уже разобрались.

> Очень кстати вспомнить, что изначально css являлся самым настоящим костылем, полностью. Это потом некоторые браузеры (Кроме IE и FF, емнип) ориентировались на эту технологию (т.е. любой тег состоит только из предзаданных css-свойств), но все-равно теги со своими свойствами, предзаданными браузером обробатываются быстрее.

Прошлый век. Сейчас CSS — это единственный способ задать внешний вид документа. HTML — это только логическая разметка. Не нужно тут углубляться в историю и вспоминать, что там было когда-то на заре развития технологии. Раньше и HTTP был только протокол для гипертекста.

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

<style>
.main_block {
	width:100%;
}
.vert_left_block {
	float:left;
}
</style>
<div class="main_block">
	<div class="vert_left_block">
	</div>
	<div class="vert_left_block">
		<img src='img.png' width='100' />
	</div>
	<div class="vert_left_block">
		<h1 align="center">Заголовок</h1>
	</div>
	<div class="vert_left_block">
		<img src='img.png' width='100' />
	</div>
	<div class="vert_left_block">
	</div>
</div>

как то так и без тегов <table><tbody><tr><td>

хотя пустые теги <DIV> лишние