VPF::растянуть корневой див за счёт других слоёв

supervladislav

Дата 8.5.2011, 02:50 (ссылка)

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

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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

скажите у меня вышла большая заминка  есть код

слой menuniz имеет цвет ,а внутри слоя находится меню слева ,а справа контентная область ,
проблема в том ,что  в том месте где есть меню ,слой  не растягивается вниз(тоесть нижняя часть непрокрашивается) а,растягивается только та часть где есть контент.
Как сделать чтобы слой  menuniz тянулся полностью .Тоесть и там где есть меню и где есть контент резиново.

Код


<div id="menuniz">

<div id="menuleft">
<ul>
<li><a href="index.html"><img src="./images/main.png" alt="" width="72px" border="0"></a></li>
<li><a href="index.html"><img src="./images/about.png" alt="" width="72px" border="0"></a></li>
<li><a href="index.html"><img src="./images/predskazania.png" alt="" width="108px" border="0"></a></li>
<li><a href="index.html"><img src="./images/diagnostika.png" alt="" width="100px" border="0"></a></li>
<li><a href="index.html"><img src="./images/sudba.png" alt="" width="67px" border="0"></a></li>
<li><a href="index.html"><img src="./images/privorot.png" alt="" width="75px" border="0"></a></li>

</ul>

</div>
<div id="menucontent">
<h1>adsfasdfsdfasdf</h1>
<p>
 asdfa sdaf sdf asdf asdfa sdf adsf
  asdfa sdaf sdf asdf asdfa sdf adsf
   asdfa sdaf sdf asdf asdfa sdf adsf
    asdfa sdaf sdf asdf asdfa sdf adsf
</p>
<p>
 asdfa sdaf sdf asdf asdfa sdf adsf
  asdfa sdaf sdf asdf asdfa sdf adsf
   asdfa sdaf sdf asdf asdfa sdf adsf
    asdfa sdaf sdf asdf asdfa sdf adsf
</p>

</div>
</div>

Код


div#menuniz{background-color:#f5e8c5;margin-top:-10px;margin-left:3px;border:2px red solid;padding-right:10px;}  

div#menuleft{float:left;width:10%;background-color:#f5e8c5;}
div#menuleft ul{list-style-type:none;margin-left:20px;margin-top:45px;}
div#menuleft  li{padding:5px;padding-bottom:1px solid #89afd7;}

div#menucontent{float:left;width:90%;background-color:#f5e8c5;}
div#menucontent p{font-size:13pt;text-align:justify;text-indent:4pt;font-family:"Times New Roman", Times, serif;
line-height:2;padding-right:15pt;padding-left:15pt;}
div#menucontent  h1,h2,h3,h4,h5{color:#0b3892;font-family:Geneva, Arial, Helvetica, sans-serif;text-align:center;font-size:10pt;padding:1em 1em;}

Amphiluke

Дата 8.5.2011, 18:35 (ссылка)

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

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 9
Всего: 112

Используйте какой-нибудь clearfix, например.

Скажем,

Код


.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix {
    display: inline-block;
}
html[xmlns] .clearfix {
    display: block;
}
* html .clearfix {
    height: 1%;
}

Код


...
<div id="menuniz" class="clearfix">
...

supervladislav

Дата 8.5.2011, 20:34 (ссылка)

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

Загрузка ...

///\\\///\\\///\\\

Профиль
Группа: Завсегдатай
Сообщений: 1771
Регистрация: 18.5.2006

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

Amphiluke, уважаемый Amphiluke спасибо за помощь , а могли бы вы пояснить как это работает

Amphiluke

Дата 8.5.2011, 21:24 (ссылка)

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

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 9
Всего: 112

В clearfix основную работу (в современных браузерах) выполняет псевдоэлемент :after, которому назначается стиль clear:both, запрещающий обтекание блока нижеследующими элементами. Содержимое псевдоэлемента делантся невидимым при помощи задания нулевой высоты.
Для версий IE, не поддерживающих псевдоэлементы типа :after и инлайновые блоки, проблема решается хаком.

DenWeb

Дата 10.5.2011, 08:29 (ссылка)

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

Загрузка ...

Верстальщик

Профиль
Группа: Участник
Сообщений: 10
Регистрация: 26.12.2010

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

Можно перед последним закрывающим div:

Код


<div style="clear:both;"></div>

Amphiluke

Дата 10.5.2011, 20:31 (ссылка)

(голосов:1)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 9
Всего: 112

DenWeb, несемантично это. smile

Что если таких блоков на странице штук десять? И на остальных полутора сотнях страниц сайта штук по несколько? Разметка захламляется такими элементами, затрудняя разбор кода.

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