Jump to content
  • 0

Проблема с версткой div'ов


aPioz
 Share

Question

Всем доброго времени суток.

У меня возникла проблема при верстке сайта:

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

В первой колонке находится меню, в центральной основной текст, ну а в третьей всякая дополнительная информация.

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

Как такое сделать, без удаления дивов из таблицы. Пробовал писать высоту дива 100%, не работает.

Примерный код:


<table>
<tr>
<td><div id="col1">Меню</div></td>
<td><div id="col2">Основной контент</div></td>
<td><div id="col3">Прочее</div></td>
</tr>
</table>

Вот, нужно чтоб эти внутренние div'ы занимали все пространство своих столбцов, по высоте.

Заранее спасибо за ответы.

Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Всем доброго времени суток.

У меня возникла проблема при верстке сайта:

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

В первой колонке находится меню, в центральной основной текст, ну а в третьей всякая дополнительная информация.

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

Как такое сделать, без удаления дивов из таблицы. Пробовал писать высоту дива 100%, не работает.

Примерный код:


<table>
<tr>
<td><div id="col1">Меню</div></td>
<td><div id="col2">Основной контент</div></td>
<td><div id="col3">Прочее</div></td>
</tr>
</table>

Вот, нужно чтоб эти внутренние div'ы занимали все пространство своих столбцов, по высоте.

Заранее спасибо за ответы.

Наверна цепь указания высот прерывается, не от чего считать 100%, или же доктайп стоит Xhtml, в нем атрибут тега height - баловство, нужно задавть в css.

Link to comment
Share on other sites

  • 0

<table>
<tr>
<td><div [b]id="col1"[/b]>Меню</div></td>
<td><div [b]id="col2"[/b]>Основной контент</div></td>
<td><div [b]id="col3"[/b]>Прочее</div></td>
</tr>
</table>

Фразы типа id="col1" мне очень о многом говорят, это значит, что у вас к каждому блоку задан стиль, а вот я ещё кстати умею читать мысли и сейчас запросто узнаю этот стиль ога....

Link to comment
Share on other sites

  • 0
Фразы типа id="col1" мне очень о многом говорят, это значит, что у вас к каждому блоку задан стиль, а вот я ещё кстати умею читать мысли и сейчас запросто узнаю этот стиль ога....

Ну, именно в этих стилях, я думаю нет ничего такого что могло сильно на это повлиять:


#Col1 {
background: #FFF;
border: 1px solid #999;
padding: 2px;
}
#Col2 {
background: #FFF;
border: 1px solid #999;
padding: 5px;
margin: 0 3px 0 3px;
}
#Col3 {
background: #FFF;
border: 1px solid #999;
padding: 2px;
}

Я просто не знаю, как сделать внутренние дивы по всей высоте ячеек таблицы? Это, единственный вопрос который меня интересует на данный момент, со всем остальным более менее нормально.

to Justnewone:

Несовсем понял, что вы имели ввиду. Как восстановить эту цепь? В доктайпе стоит хтмл 4.01.

Спасибо за ответы.

Link to comment
Share on other sites

  • 0
Ну, именно в этих стилях, я думаю нет ничего такого что могло сильно на это повлиять:


#Col1 {
background: #FFF;
border: 1px solid #999;
padding: 2px;
}
#Col2 {
background: #FFF;
border: 1px solid #999;
padding: 5px;
margin: 0 3px 0 3px;
}
#Col3 {
background: #FFF;
border: 1px solid #999;
padding: 2px;
}

Я просто не знаю, как сделать внутренние дивы по всей высоте ячеек таблицы? Это, единственный вопрос который меня интересует на данный момент, со всем остальным более менее нормально.

to Justnewone:

Несовсем понял, что вы имели ввиду. Как восстановить эту цепь? В доктайпе стоит хтмл 4.01.

Спасибо за ответы.

Цепь означает что указание высоты элемента будет считаться от высоты его родителя. Ну тут нету вообще указания высот. Никаких.

Link to comment
Share on other sites

  • 0

Да min-height тоже пробовал. Ну щас впринципе уже придумал как у себя это исправить.

Спасибо за помощь.

P.S. Кстати, не подскажите, что нужно, чтобы min-height работал в IE. Или дайте ссылку по теме, а то не нашел.

Link to comment
Share on other sites

  • 0
или же доктайп стоит Xhtml, в нем атрибут тега height - баловство, нужно задавть в css.

1) в HTML 4.01 точно так же;

2) не баловство, а ошибка (для HTML 4.01 Strict, XHTML1.0 Strict и XHTML 1.1);

3) при некоторых вариантах доктайпа HTML4.01 сайты отображаются так же, как c XHTML (подробнее).

Как такое сделать, без удаления дивов из таблицы.

aPioz, в общем случае по стандарту без извратов никак, насколько мне известно. А что мешает в самом деле определить фоны (а то и те же шрифты с отступами:) непосредственно для ячеек?

Link to comment
Share on other sites

  • 0

to SelenIT:

Да просто изначально была такая задумка и не хотелось от нее отходить, и переписывать код.:huh:

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

Всем спасибо.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy