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

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

Форум программистов > Вёрстка веб-сайтов > таблица на css, колонки - базовый - как?

Автор: scai 20.7.2007, 20:44

в общем замучался. как на css и div'ах сделать такого вида таблицу
user posted image

то есть нужно, чтобы высота ячеек в колонке не зависела от высоты ячеек в других....
по логике должно быть
display: table-column-group
                 table-column
                    table-row-group
                        table-row
                             table-cell
а не выходит....

или, может быть, кто-то знает где лежит хороший tutorial?

Автор: vintyara 21.7.2007, 20:11

scai, зачем тебе на css эмулировать таблицу ? в той картинке что ты дал ИМХО можно спокойно обойтись без этого. Сделай три дива (для левой стороны, центра и правой стороны), а в них уже спокойно размещай инфу.

Автор: scai 21.7.2007, 21:45

vintyara
хорошо. а как сделать, чтобы они колонками были, чтобы если средняя длиннее остальных, ее содержимое не "обтекало" блоки левой и правой(как при float), чтобы тексто во всех колонках начинался сверху....

Автор: vintyara 22.7.2007, 12:35

Код


<?xml version="1.0" encoding="windows-1251"?>

<!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=windows-1251" />
    <title></title>
</head>

<style>
body {
    width: 800px;
    margin: 0 auto;
    background-color: black;
}

#left {
    float: left;
    background-color: green;
    width: 200px;
}

#center {
    float: left;
    background-color: blue;
    width: 400px;
}

#right {
    float: left;
    background-color: yellow;
    width: 200px;
}
</style>

<body>

<div id="left">
left
</div>

<div id="center">
center
<br />
<br />
<br />
</div>

<div id="right">
right
</div>

</body>
</html>

Автор: Levsha 22.7.2007, 19:47

Я бы на твоем месте основные три колонки разметил таблицей, а остальное уже можно на дивах.

Автор: vintyara 22.7.2007, 21:49

Levsha, а смысл smile

? ИМХО бесполезное увеличение кода. Прекрасно и без таблицы делается, как я показал в своём примере. С таблицей практический мой код будет + таблица.

Автор: Levsha 23.7.2007, 07:37

vintyara, смысл в том что DIV не растянет на 100% по высоте, а таблицу растянет. Тем более, что когда делаешь только основной каркас (три колонки основных) то бесполезного кода почти нет.
Вместо
<div></div><div></div><div></div>
будет
<table><tr><td></td><td></td><td></td></tr></table>
Всего на 19 байт длиннее, а работать дальше гораздо удобнее...

Автор: vintyara 23.7.2007, 07:53

Levsha, добавь в цсс

position: absolute;
height: 100%;

и будет тебе 100% по высоте smile

Автор: Levsha 23.7.2007, 20:01

vintyara, а если нужно чтоб позиционирование было не абсолютным?
Тем более и так не получается

Код


<html>
<head>
<title>Пример</title>
</head>
<body>
<div style="float:left; width:150px; height:1500px; background-color:#0099FF">
sdhfgf xfghgf fhfdgh xgfhdygn <br />
sdhfgf xfghgf fhfdgh xgfhdygn <br />
sdhfgf xfghgf fhfdgh xgfhdygn <br />
sdhfgf xfghgf fhfdgh xgfhdygn <br />
sdhfgf xfghgf fhfdgh xgfhdygn <br />
</div>
<div style="float:left; width:150px; height:100%; background-color:#999933; position:absolute">
sdhfgf xfghgf fhfdgh xgfhdygn <br />
sdhfgf xfghgf fhfdgh xgfhdygn <br />
sdhfgf xfghgf fhfdgh xgfhdygn <br />
sdhfgf xfghgf fhfdgh xgfhdygn <br />
sdhfgf xfghgf fhfdgh xgfhdygn <br />
</div>
</body>
</html>

Автор: feosr 23.7.2007, 20:11

безтабличная верстка с применением абсалютного позиционирования? бывает..... в нете ОГРОМНОЕ количество примеров реализации)

Автор: scai 26.7.2007, 20:49

спасибо.

однако, лук эз дак бат из нот.
если четвертую колонку надо добавить... кнопочки какие нибудь.... никакой float, как я понимаю, не поможет.... все таки... кроссбраузерная таблица на div+css?