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

webdev · October 9, 2010

Значит просто вспоминаю верстку странички, делаю элементарное, но вот ступор

почему hauptbox не в диве container?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
	<title>Praktikum1</title>
	<link href="style.css" type="text/css" rel="stylesheet" media="all" />
</head>
<body>
	<div id="container">
		<div id="header">Header - Logo</div>
		<div id="hauptbox">
			<div id="menu">
				<p><a href="">Alles</a></p>
				<p><a href="">Fotos</a></p>
				<p><a href="">Videos</a></p>
				<p><a href="">Anderes</a></p>
			</div>
			<div id="content">
				<div class="box">
					<div class="imgbox"><img src="images/ipernity_03.png" alt="ipernity_03"></div>
					<div class="txtbox">Text zu Bild 1</div>
					<div class="kommbox">Kommentar zu Bild 1</div>
				</div>
				<div class="box">
					<div class="imgbox"><img src="images/ipernity_05.png" alt="ipernity_05"></div>
					<div class="txtbox">Text zu Bild 2</div>
					<div class="kommbox">Kommentar zu Bild 2</div>
				</div>
				<div class="box">
					<div class="imgbox"><img src="images/ipernity_07.png" alt="ipernity_07"></div>
					<div class="txtbox">Text zu Bild 3</div>
					<div class="kommbox">Kommentar zu Bild 3</div>
				</div>
				<div class="box">
					<div class="imgbox"><img src="images/ipernity_12.png" alt="ipernity_12"></div>
					<div class="txtbox">Text zu Bild 4</div>
					<div class="kommbox">Kommentar zu Bild 4</div>
				</div>
				<div class="box">
					<div class="imgbox"><img src="images/ipernity_13.png" alt="ipernity_13"></div>
					<div class="txtbox">Text zu Bild 5</div>
					<div class="kommbox">Kommentar zu Bild 5</div>
				</div>
				<div class="box">
					<div class="imgbox"><img src="images/ipernity_14.png" alt="ipernity_14"></div>
					<div class="txtbox">Text zu Bild 6</div>
					<div class="kommbox">Kommentar zu Bild 6</div>
				</div>
			</div>
		</div>
		<div id="footer">Praktikum1 - Advanced Rich Media Applications - Fedak Oleg</div>
	</div>
</body>
</html>

body{
	border:0;
	margin:0 auto;
	padding:0}

 #container {
	width:1000px;
	margin:0 auto;
  }
 #header {
	height: 90px;
	text-align:center;
	font-size:50px;
	background-color: #666666;
  }
 #hauptbox{
	background-color:#343434;
 }
 #menu {
	width:110px;
	padding:0 10px;
	float:left;
	background-color:#222333;
  }
 #content {
	padding-left:20px;
	background: #565656;
	float:left;
  }
 #footer {
	height:20px;

	text-align:center;
	background-color: #ff0000;
	font-size:15px;

  }
 .box{
	height:240px;
	width:240px;
	margin:5px;
	float:left;
	background-color:#324322;
 }
 .imgbox{
	height:160px;
  }
 .txtbox{
	height:40px;
  }
 .kommbox{
	height:40px;
  }

psywalker · October 9, 2010

#container {overflow:hidden;

webdev · October 9, 2010

Все осталось по прежнему, только если смотреть firebug, тоисть если навести на див container показывает как должно показывать, но элементы остались по прежнему разбросаны...

Kaylang · October 9, 2010

Добавить див со свойством clear:both не пробовал?

Edited October 9, 2010 by Kaylang

webdev · October 9, 2010

Неа, не знаю о таком.

А посмотрите, мне кажется все должно работать?

Все логически вроде правильно.

И должно работать просто и без всяких хаков...

Kaylang · October 9, 2010

Это не хак. Это очистка свойства float.

Попробуй так:

<body>
	<div id="container">
		<div id="header">Header - Logo</div>
		<div id="hauptbox">
			<div id="menu">
				<p><a href="">Alles</a></p>
				<p><a href="">Fotos</a></p>
				<p><a href="">Videos</a></p>
				<p><a href="">Anderes</a></p>
			</div>
			<div id="content">
				 тут боксы.
			</div>
		<div class="clear"></div>  <!—   Update: !!!Сорри, только сейчас заметил, что не закрыл див.!!! —>
		</div>
		<div id="footer">Praktikum1 - Advanced Rich Media Applications - Fedak Oleg</div>
	</div>
</body>

А в CSS добавь:

.clear{
	clear:both;
}

Edited October 9, 2010 by Kaylang

webdev · October 9, 2010

Пасиб, помогло, а можете коротенько, в двух словах зачем очищать?

И еще, у меня в дивах меню и контент стоит float:left они должны бть друг за другом, а они друг под другом. Тоисть ихний верх должен быть на одной прямой..

Kaylang · October 9, 2010

Пасиб, помогло, а можете коротенько, в двух словах зачем очищать?

Затем, что если не очистить, то footer тоже начинает "плавать".

И еще, у меня в дивах меню и контент стоит float:left они должны бть друг за другом, а они друг под другом. Тоисть ихний верх должен быть на одной прямой..

А ты куда вставил div очистки? Если в то место, куда я указал, то должно работать правильно.

Надеюсь ты не вставлял clear:both; в свойства всех дивов?

ЗЫ. Кажется понял проблему с div'ами "menu" и "content". Походу, у тебя боксы слишком расширяют div "content" и "menu"+"content" становятся шире 1000px.

Ну, да. 6 боксов шириной (240px+10px в марджинах) итого 250*6=1500px. А у тебя "container" всего 1000px.

И задай div'у "content" свойство overflow:hidden;.

Edited October 9, 2010 by Kaylang

webdev · October 9, 2010

overflow:hidden - не помогло.

А как тогда выстроить 6 боксов в одном диве по три в ряд?

Kaylang · October 9, 2010

overflow:hidden - не помогло.
А как тогда выстроить 6 боксов в одном диве по три в ряд?

Вставь <div class="clear"></div> между третьим и четвертым боксом.

webdev · October 10, 2010

Пасиб, просветили - оч полезная весч. Все работает. Вопрос решен!

Sign In

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

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information