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

С помещение нескольких div-ов в одну строку, кажется, разобрался (нашел здесь: http://forum.vingrad.ru/index.php?showtopic=64776), но где можно прочитать попобробнее про свойство float? А то я такое раньше не встречал...

Цитата(agx)

но где можно прочитать попобробнее про свойство float?

В спецификации CSS:
официальная (EN): http://www.w3.org/TR/CSS21/visuren.html#floats
неофициальная (перевод официальной): http://loc.stack.ru/projects/CSS2/cover.html

Ciber SLasH Спасибо.
Добавлено @ 08:18
А если требуется сделать две колонки, используя два div, помещенных в одну строку, то как сделать так, чтобы длина одного из них была всегда такой же, как длина другого? В примеру, слева отображается текст, размещенный в <div>, а справа - панель меню, также размещеная в <div>. Как сделать, чтобы блина обоих была одинаковой, если изначально не известна длина текста и количество пунктов в меню?

Так, с растягиванием разобрался: добавить к div-ам стиль height: 100%.
Но тогда как сделать так, чтобы div-ы с float: left/right не перекрывали нижележащие теги, если их длина превышает ту, что задана div-ом, в котором они находятся?
К примеру:

Код

<div class="content"> <div class="info">asd</div> <div class="control">zxc<br/>qwe</div> </div>

стили заданы так:

Код

div.content     {     /*height: auto;*/     } div.content div.info     {     float: left;     } div.content div.control     {     width: 220px;     height: 100%;     background-color: rgb(186,179,214);     border-left: 10px solid rgb(102,122,179);     float: right;     }

Получается, что содержимое тегов <div class="info"> и <div class="control"> перекрывает то, что расположено ниже тега <div class="content">. Как этого избежать?
Добавлено @ 08:43
Кстати, обнаружил, что если прописать

Код

div.content     {     height: auto;     overflow: hidden;     }

То в в мозилле работает так, как надо, но IE это не понимает.:-(

Все, нашел решение! Оказывается, нужно было просто немного повнимательне снецификацию CSS читать. :-) Еще раз ОГРОМНОЕ спасибо Ciber SLasH!
Нужно было у нижележащего тега прописать

Код

clear: left; clear: right;

agx
Посмотри http://www.csszengarden.com/. Там все страницы сверстаны только с помощью CSS. Отличные примеры того, как надо делать.

kira Спасибо!:-)

В тему

Поясните, за что так <table> не в моде?

Стоит заметить, что вёрстка сайта на чистых DIVах может принести немало хлопот в виду того, что разные броузеры по-разному интерпретируют CSS. И сами стили на месте не стоят -- постоянно разрабатываются новые фичи -- броузеры просто не успевают. Если FireFox можно хоть завтра начать понимать сегодняшнюю новинку в CSS, то IE -- фиг два, надо ждать следующей версии (а они сами знаете, раз в 3 года появляются).

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

Вот отличная статья про верстку с пом. div и table на 3 странице есть резюме
http://webz.priop.ru/jumper.php?goto=115

Это сообщение отредактировал(а) Naruvi - 17.11.2005, 09:58

Цитата(Greendrake @ 16.11.2005, 19:02)

Поясните, за что так <table> не в моде?

Просто отдельные личности усердствуют, пытаясь быть крутыми На самом деле высказывания "код на таблицах неудобно читать" или "верстка на CSS более наглядна" иногда бывают несколько надуманными и субъективными. ИМХО, конечно, но все же...

Вообще Стоит ли использовать имеено тег DIV может быть его просто стоит поменять на тег Span ??? этот тег (SPAN) не переводит на следующую строку а у него просто автободбор ширины в смысле как текст занимает так и этот блок. Попробуй использовать этот тег РЕКОМЕНДУЮ

Blaga, это не верно с точки зрения семантики, все равно, что через CSS сделать тег <strong> курсивом, а <em> жирным, можно, но не логично, то же и со SPAN.
Если тебе так хочется сделать чтобы DIVы не переносились сделай так: div {display:inline}

Это сообщение отредактировал(а) Kevin - 20.11.2005, 10:14

Kevin Это было всего лиш мое мнение. К тому же "это не верно с точки зрения семантики"
я все равно не понял. Да и какая между этими тегами разница?

Blaga, span введен в качестве альтернативы <font>. Предназначен в первую очередь для изменеия свойств текстовой информации, а не блока.

"Семантика - в программировании - система правил истолкования отдельных языковых конструкций. Семантика определяет смысловое значение предложений алгоритмического языка." (с)Яндекс: Словари.

Условно говоря, тег это логический оператор с набором свойств. Как известно эти свойства можно переопределять. <center> сделать, чтобы не центрировал, а был по правому краю. <b> или <strong> можно сделать не жирным курсивом. И тд и тп. Но если W3C Сказала что span должен быть инлайн, то он и должен инлайн быть, а див должен оставаться блоком, уж такова их судьба.

Можно лишь с одним тегом <b> сверстать любую страниц используя его переопределение через CSS. Между тегами при использовании CSS разница ооочень не большая

Кстати, у верстки на div-ах есть ещё один жирный плюс. Тонкостей я не помню, но суть такая: у поисковиков с ними проблемм меньше.

Tyrone, на самом деле поисковым системам глубоко безразлично с помощью чего сверстана страничка. Просто, как правило, страничка сверстанная на div`ах компактнее аналога на таблице и можно позиционировать контент, чтобы он в коде был максимально близко к началу документа, тем самым поднимается релевантность его в глазах поискового бота.