VPF::Проблема с высотой DIV'а из-за float:left

Royan

Дата 5.4.2009, 19:15 (ссылка)

(нет голосов)

Загрузка ...

Dreamer

Профиль
Группа: Участник Клуба
Сообщений: 1708
Регистрация: 14.9.2002
Где: Лондон

Репутация: нет
Всего: 15

Всем привет, у меня есть вот такой кусочек разметки (на самом деле проблема только с двумя HTML элементами DIV#topLevelPage и UL.sectionList):

Код


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<STYLE>
BODY {
    MARGIN: 10px;
    FONT-FAMILY: Georgia, serif;
    BACKGROUND-COLOR: #e5e5e5
}  
#topLevelPage {
    PADDING-LEFT: 10px;
    FLOAT: left;
    WIDTH: 95%;
    BACKGROUND-COLOR: #ffffff
}
UL {
    LIST-STYLE-TYPE: none
}
.sectionList {
    FLOAT: left;
    PADDING-RIGHT: 0px;
    PADDING-LEFT: 0px;
    PADDING-BOTTOM: 0px;
    MARGIN: 0px;
    WIDTH: 100%;
    PADDING-TOP: 0px;
}  
.sectionListItem {
    FLOAT: left;
    MARGIN-BOTTOM: 40px;
    WIDTH: 20%
}  
.section {
    POSITION: relative;
    HEIGHT: 50px
}  

.unitOuterContainer {
    DISPLAY: block;
    FONT-SIZE: 12pt;
    WIDTH: 230px;
    POSITION: absolute;
    TOP: 0px;
    BACKGROUND-COLOR: #00f
}
.unitOuterContainer .unit {
    BORDER: #3f5d74 1px solid;
    BACKGROUND-COLOR: #fff
} 
.pageLink {
    MARGIN: 0px;
    LINE-HEIGHT: 2em;
    PADDING-TOP: 0px
}  
.pageLink LI A {
    FONT-SIZE: 11pt;
    BORDER-BOTTOM: 1px dotted;
    FONT-FAMILY: Arial, sans-serif;
    TEXT-DECORATION: none
}  
.unitOuterContainer .unitInnerContainer .unitTitle {
    COLOR: #ffffff;
}  
</STYLE>
</HEAD>
<BODY id="body">
<DIV id="topLevelPage">
<UL class="sectionList">
    <LI class="sectionListItem">
    <DIV class="section">
    <DIV class="unitOuterContainer" id="tipOuterContainer">
    <DIV class="unitInnerContainer" id="tipInnerContainer">
    <DIV class="unitTitle">Заголовок</DIV>
    </DIV>
    <DIV class="unit">
    <UL class="pageLink">
        <LI><A href="http://cilex.localhost/editor.php">Текст текст</A></LI>
        <LI><A href="http://cilex.localhost/editor.php">Текст текст текст</A></LI>
        <LI><A href="http://cilex.localhost/editor.php">Текст</A></LI>
        <LI><A href="http://cilex.localhost/editor.php">123</A></LI>
        <LI><A href="http://cilex.localhost/editor.php">Текст 111</A></LI>
        <LI><A href="http://cilex.localhost/editor.php">Текст текст</A></LI>
        <LI><A href="http://cilex.localhost/editor.php">Abcdefgh</A></LI>
    </UL>
    </DIV>
    </DIV>
    </DIV>
    </LI>
</UL>
</DIV>
</BODY>
</HTML>

К сожалению, его упрощение ведет к потере форматирования, а оно необходимо для полноты картины
Проблема: Как сделать так, чтобы DIV id="topLevelPage" учитывал ширину списка UL class="sectionList" то есть условно говоря, чтобы белый фон topLevelPage обрамлял весь список sectionList? Разумеется хочется этого добиться без явного указания высоты

--------------------

Открыта вакансия Junior Java Developer'а в нашем лондонском офисе, подробнее можно узнать здесь

bars80080

Дата 5.4.2009, 19:29 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

не надо пользоваться float: left. кстати, совершенно не понятно, зачем он там

ksnk

Дата 5.4.2009, 19:31 (ссылка)

(нет голосов)

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386

Цитата

Разумеется хочется этого добиться без явного указания высоты

Тогда нужно убрать явное указание высоты у .section и абсолютое позиционирование у .unitOuterContainer

--------------------

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Royan

Дата 6.4.2009, 00:22 (ссылка)

(нет голосов)

Загрузка ...

Dreamer

Профиль
Группа: Участник Клуба
Сообщений: 1708
Регистрация: 14.9.2002
Где: Лондон

Репутация: нет
Всего: 15

Цитата(bars80080 @ 5.4.2009, 16:29

)

не надо пользоваться float: left. кстати, совершенно не понятно, зачем он там

Быть может я придумываю велосипед но это сделано для того чтобы можно было горизонтально выстроить несколько блоков <LI class="sectionListItem"> например, если в приведенном выше примере вы добавите copy-paste'ом еще один блок LI то он аккуратно добавиться с права от текущего. Если есть возможность сделать тоже самое без помощи float: left и табличного форматирования буду благодарен за любую подсказку

Цитата(ksnk @ 5.4.2009, 16:31

)

Тогда нужно убрать явное указание высоты у .section и абсолютое позиционирование у .unitOuterContainer

Это гениально!

--------------------

Открыта вакансия Junior Java Developer'а в нашем лондонском офисе, подробнее можно узнать здесь

bars80080

Дата 6.4.2009, 00:45 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315

Цитата(Royan @ 6.4.2009, 00:22

)

Быть может я придумываю велосипед но это сделано для того чтобы можно было горизонтально выстроить несколько блоков <LI class="sectionListItem">

эт понятно, а здесь зачем?

Цитата(Royan @ 5.4.2009, 19:15

)

.sectionList {
FLOAT: left;

Royan

Дата 6.4.2009, 01:37 (ссылка)

(нет голосов)

Загрузка ...

Dreamer

Профиль
Группа: Участник Клуба
Сообщений: 1708
Регистрация: 14.9.2002
Где: Лондон

Репутация: нет
Всего: 15

Цитата(bars80080 @ 5.4.2009, 21:45

)

эт понятно, а здесь зачем

А это атавизм оставшийся от одного из экспериментов, он действительно не зачем

--------------------

Открыта вакансия Junior Java Developer'а в нашем лондонском офисе, подробнее можно узнать здесь

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »