Div в div'e

Eudelis · March 13, 2010

Привет

Появилась проблема с вложенными дивами и я не могу ее сам решить

Нужна такая конструкция (нарисовал на скорую руку)

http://img532.imageshack.us/img532/144/atata.png

Блоки (1) и (2) находятся один под одним, в блок (2) входят два блока: (3) и (4). В свою очередь в блоки (3) и (4) входят еще одна "конструкция". (по сути, в 3м и 4м блоке будет одно и тоже, только с разной шириной.

В общем, все это я пытаюсь сделать следующим образом: (4го блока тут нет, ибо даже не пытался сделать, без нормального 3го)

<div class="center-menu"></div> /* блок (1) */
<div class="center-body"> /* Блок (2) */

<div class="left-menu"> /* Блок 3 */
<div style="float: left; width: 26px;height: 18px; background: url('menu/menu_01.PNG') center no-repeat;"></div>
<div style="float: left; width: 150px;height: 18px;background: url('menu/menu_02.PNG') repeat-x;"></div>
<div style="clear:left; float: left; width: 176px; background-color: #808082; background: url('menu/menu_03.png') center repeat-y;">тест тест<br>2</div>
<div style="clear:left;float: left; width: 176px; height: 17px; background: url('menu/menu_04.png');">тест тест тест</div>
</div>
</div>

css этого действа

div.center-menu {width: 748px;height: 33px; background-color: #000;}
div.center-body {width: 748px;height: 300px; background-color: #4a4c47;}
div.left-menu {float: left;margin:20px;}

И теперь в чем проблема:

Когда я не использую div под своим номером (3), а просто делаю так:

<div class="center-menu"></div> /* блок (1) */
<div class="center-body"> /* Блок (2) */

<div style="float: left; width: 26px;height: 18px; background: url('menu/menu_01.PNG') center no-repeat;"></div>
<div style="float: left; width: 150px;height: 18px;background: url('menu/menu_02.PNG') repeat-x;"></div>
<div style="clear:left; float: left; width: 176px; background-color: #808082; background: url('menu/menu_03.png') center repeat-y;">тест тест<br>2</div>
<div style="clear:left;float: left; width: 176px; height: 17px; background: url('menu/menu_04.png');">тест тест тест</div>

</div>

То все норм отображается, но как только загоняю те дивы со стайлами в <div class="left-menu">, то имею следующий результат

http://img682.imageshack.us/i/atata2.png/

В чем ошибка, что подправить, чтобы они нормально отображались?

Edited March 13, 2010 by Eudelis

klierik · March 14, 2010

как по моему, то проще попросту сделать готовое решение и выложить )

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>

	<title>domain :: main page</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<style type="text/css">

	body {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 0.625em;	/* default page font size is 10px (1em) */
	}

		body,div,dl,dt,dd,ul,ol,li,form,table,tr,td,
		h1,h2,h3,h4,h5,h6,pre,p,span,b,i,
		input,textarea, fieldset { margin: 0; padding: 0; /*outline: none;*/ }

		.g-clear {clear:both;}

		div.l-top {height:10em; background:#6CF;}

		div.l-content {overflow:hidden; height:40em; background:#6CF;}
			div.l-left {float:left; width:30%; overflow:hidden;}
			div.l-right {margin-left:31%; overflow:hidden;}

				div.left-top-cell {float:left; width: 3em; height:5em; background:green;}
				div.right-top-cell {margin-left:3em; height:5em; background:#9CC;}
				div.data {height:10em; background:#096;}
				div.under-data{height:5em; background:#0CF;}


	</style>

	<!--[if IE]>
	<style type="text/css">

		html {font-size: 101%;}

		div.l-content, div.l-left, div.l-right {zoom:1;}

		div.left-top-cell {_margin-right: -100%;}

	</style>	
	<![endif]-->

</head>
<body>

	<div class="l-top"></div>

	<div class="l-content">

		<div class="l-left">

			<div class="left-top-cell"></div>
			<div class="right-top-cell"></div>
			<div class="g-clear"></div>

			<div class="data"></div>
			<div class="under-data"></div>

		</div>

		<div class="l-right">

			<div class="left-top-cell"></div>
			<div class="right-top-cell"></div>
			<div class="g-clear"></div>

			<div class="data"></div>
			<div class="under-data"></div>

		</div>

	</div>

</body>
</html>

Eudelis · March 14, 2010

как по моему, то проще попросту сделать готовое решение и выложить )

Благодарю Чуть-чуть отредактировал и получил именно то, что требовалось

klierik · March 14, 2010

u wellcome

Sign In

Div в div'e

Question

Eudelis

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

klierik

Link to comment

Share on other sites

Eudelis

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information