Высота родительского элемента не изменяется
Здравствуйте.
Меня волнует один вопрос. Опишу проблему: на моей странице в родительском контейнере mainContainer находится блок rightMenu, но вот проблема высота этого родительского контейнера никак не меняется в зависимости от содержимого. Рамка почему-то перекрывается div-ом rightMenu, а не очерчивает его снаружи. Проверял в FireFox3.0 и Opera9.02, в IE5 работает как надо. В чем дело, подскажите.
Меня волнует один вопрос. Опишу проблему: на моей странице в родительском контейнере mainContainer находится блок rightMenu, но вот проблема высота этого родительского контейнера никак не меняется в зависимости от содержимого. Рамка почему-то перекрывается div-ом rightMenu, а не очерчивает его снаружи. Проверял в FireFox3.0 и Opera9.02, в IE5 работает как надо. В чем дело, подскажите.
Простите, но снятие порчи по фотографии не проводим. Код покажите!
<!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" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta http-equiv="cache-control" content="public" />
<meta name="description" content="Paper 'The Smiling faces'" />
<meta name="author" content="Moiseev Kirill" />
<meta name="copyright" content="© SmilePaper.com" />
<title>Главная страница</title>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="expStyle.css" type="text/css" media="screen" />
</head>
<body>
<div class="mainContainer">
<div class="baner"></div>
<div class="popularArea">
<h3>Popular Area 1</h3>
<img src="latnew1.gif" alt="Latest New 1" height="50" width="100%" />
<p>
<a href="#" title="link1">Lorem Ipsum philosophia elementum...</a>
</p>
</div>
<div class="popularArea">
<h3>Popular Area 2</h3>
<img src="latnew1.gif" alt="Latest New 2" height="50" width="100%" />
<p>
<a href="#" title="link2">Lorem Ipsum philosophia elementum...</a>
</p>
</div>
<div class="popularArea">
<h3>Popular Area 3</h3>
<img src="latnew1.gif" alt="Latest New 3" height="50" width="100%" />
<p>
<a href="#" title="link3">Lorem Ipsum philosophia elementum...</a>
</p>
</div>
<!--Вот этот div-чек вылазит за пределы родительского элемента-->
<div class="rightMenu">
<h4>10 last best stories</h4>
<ul>
<li>"The ninth shaft"</li>
<li>"Greeding boy"</li>
<li>"Mike's Adventures"</li>
<li>"The ninth shaft"</li>
<li>"Takin sunbath"</li>
<li>"Considerable decision"</li>
<li>"Sparkling eyes"</li>
<li>"Get me, mom, back"</li>
<li>"Brilliant present"</li>
<li>"Destiny child"</li>
</ul>
<h4>Week's authors</h4>
<ul>
<li>Noris North</li>
<li>Frank Morison</li>
<li>Charlie Blackmore</li>
</ul>
</div>
<div class="mainContent">
<!--<p>
<h1>Lorem Ipsum</h1>
Lorem Ipsum necessitatibu; Ornatus libero autem habeo egestas recteque
ponderum dicit. Viderer dui antiopam nostrud nullam prima puto curabitur
reprimique omnesque nunc modus dui iaculis veri adversarium movet!
</p>-->
</div>
<!--Мои способ решения проблемы с элементом hr-->
<hr />
</div>
</body>
</html>
Да я уже нашел выход: просто в контейнере mainContainer в конец поместил элемент <hr /> с CSS-правилами: clear: both; visibility: hidden; все заработало
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta http-equiv="cache-control" content="public" />
<meta name="description" content="Paper 'The Smiling faces'" />
<meta name="author" content="Moiseev Kirill" />
<meta name="copyright" content="© SmilePaper.com" />
<title>Главная страница</title>
<link rel="stylesheet" href="screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="expStyle.css" type="text/css" media="screen" />
</head>
<body>
<div class="mainContainer">
<div class="baner"></div>
<div class="popularArea">
<h3>Popular Area 1</h3>
<img src="latnew1.gif" alt="Latest New 1" height="50" width="100%" />
<p>
<a href="#" title="link1">Lorem Ipsum philosophia elementum...</a>
</p>
</div>
<div class="popularArea">
<h3>Popular Area 2</h3>
<img src="latnew1.gif" alt="Latest New 2" height="50" width="100%" />
<p>
<a href="#" title="link2">Lorem Ipsum philosophia elementum...</a>
</p>
</div>
<div class="popularArea">
<h3>Popular Area 3</h3>
<img src="latnew1.gif" alt="Latest New 3" height="50" width="100%" />
<p>
<a href="#" title="link3">Lorem Ipsum philosophia elementum...</a>
</p>
</div>
<!--Вот этот div-чек вылазит за пределы родительского элемента-->
<div class="rightMenu">
<h4>10 last best stories</h4>
<ul>
<li>"The ninth shaft"</li>
<li>"Greeding boy"</li>
<li>"Mike's Adventures"</li>
<li>"The ninth shaft"</li>
<li>"Takin sunbath"</li>
<li>"Considerable decision"</li>
<li>"Sparkling eyes"</li>
<li>"Get me, mom, back"</li>
<li>"Brilliant present"</li>
<li>"Destiny child"</li>
</ul>
<h4>Week's authors</h4>
<ul>
<li>Noris North</li>
<li>Frank Morison</li>
<li>Charlie Blackmore</li>
</ul>
</div>
<div class="mainContent">
<!--<p>
<h1>Lorem Ipsum</h1>
Lorem Ipsum necessitatibu; Ornatus libero autem habeo egestas recteque
ponderum dicit. Viderer dui antiopam nostrud nullam prima puto curabitur
reprimique omnesque nunc modus dui iaculis veri adversarium movet!
</p>-->
</div>
<!--Мои способ решения проблемы с элементом hr-->
<hr />
</div>
</body>
</html>
Да я уже нашел выход: просто в контейнере mainContainer в конец поместил элемент <hr /> с CSS-правилами: clear: both; visibility: hidden; все заработало
Ну правил css я откровенно тут не заметил ))
Попробуйте задать для родительського блока overflow:hidden; zoom:1;
Попробуйте задать для родительського блока overflow:hidden; zoom:1;
* {
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 180%;
}
div.mainContainer {
margin-left: auto;
margin-right: auto;
width: 760px;
border: solid 1px #C0C0C0;
height: auto;
padding-bottom: 1em;
}
div.baner {
width: inherit;
height: 90px;
background-color: #E2E2E2;
}
div.popularArea {
width: 160px;
float: left;
border: dotted 1px #cecece;
margin-left: 5px;
margin-top: 10px;
background-color: #E0F0C2;
}
div.popularArea p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 120%;
color: #828282;
margin: 5px;
}
div.popularArea h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #88BD26;
font-size: 85%;
color: White;
margin: 0px;
padding-left: 0.5em;
line-height: 160%;
}
div.rightMenu {
float: right;
width: 249px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 5px;
padding: 0px;
}
div.rightMenu h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #7645D1;
font-size: 120%;
color: White;
margin: 0px;
padding: 0.6em 0.7em;
cursor: pointer;
}
div.rightMenu ul {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
padding-left: 0;
}
div.rightMenu ul li {
list-style-type: none;
background-color: #D0C3E8;
padding-left: 1em;
border-bottom: dotted 1px Grey;
}
div.mainContent {
clear: left;
width: 494px;
margin: 5px;
}
div.mainContent p {
padding: 0.5em 1em;
}
div.mainContent h1 {
margin-top: 0px;
font-family: Georgia, "Times New Roman", serif;
font-weight: lighter;
}
Вот моя таблица стилей.
Прости, у меня вопрос: А что это за свойство "zoom:1;" и для чего оно нужно.
margin: 0;
padding: 0;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 180%;
}
div.mainContainer {
margin-left: auto;
margin-right: auto;
width: 760px;
border: solid 1px #C0C0C0;
height: auto;
padding-bottom: 1em;
}
div.baner {
width: inherit;
height: 90px;
background-color: #E2E2E2;
}
div.popularArea {
width: 160px;
float: left;
border: dotted 1px #cecece;
margin-left: 5px;
margin-top: 10px;
background-color: #E0F0C2;
}
div.popularArea p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 80%;
line-height: 120%;
color: #828282;
margin: 5px;
}
div.popularArea h3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #88BD26;
font-size: 85%;
color: White;
margin: 0px;
padding-left: 0.5em;
line-height: 160%;
}
div.rightMenu {
float: right;
width: 249px;
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
margin-bottom: 5px;
padding: 0px;
}
div.rightMenu h4 {
font-family: Verdana, Arial, Helvetica, sans-serif;
background-color: #7645D1;
font-size: 120%;
color: White;
margin: 0px;
padding: 0.6em 0.7em;
cursor: pointer;
}
div.rightMenu ul {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
padding-left: 0;
}
div.rightMenu ul li {
list-style-type: none;
background-color: #D0C3E8;
padding-left: 1em;
border-bottom: dotted 1px Grey;
}
div.mainContent {
clear: left;
width: 494px;
margin: 5px;
}
div.mainContent p {
padding: 0.5em 1em;
}
div.mainContent h1 {
margin-top: 0px;
font-family: Georgia, "Times New Roman", serif;
font-weight: lighter;
}
Вот моя таблица стилей.
Прости, у меня вопрос: А что это за свойство "zoom:1;" и для чего оно нужно.
Цитата:
Прости, у меня вопрос: А что это за свойство "zoom:1;" и для чего оно нужно.