3 дива в одну линию и в центральном диве есть вложенные дивы

Мо ок · December 7, 2010

Добрый вечер товарищи.

У меня такая проблема, может она покажется вам пустяковою но я вот уже несколько часов бьюсь над ее решением, а она проклятая все никак не поддается.

Вот вам html код страницы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Тестовая главная страница</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div id="conteiner">
	  <div id="header">	 			
			<div id="left_img_header">
				<img src="img/bok00000.jpg" width="269" height="234" />
			</div>	<!--	left_img_header	-->	

			<div id="center_div_in_header">
				Здесь надпись для названия кружка нужен будет стиль и прочее
				<div id="img_center_div">
					<img src="img/verx0000.jpg" />
				</div>	<!--	img_center_div	-->				  
			</div>	<!--	center_div_in_header	-->			

			<div id="right_img_header">
				<img src="img/bok10000.jpg" width="269" height="234" />
			</div>	<!--	right_img_header	-->

	  </div>	<!--	header	-->


	</div>	<!-- conteiner -->
</body>
</html>

а вот вам css

/* CSS Document */

/*	Нижележащая строка нужна для того чтобы расстянуть страницу на всю высоту	*/
html {
	height: 100%;
	}
/*	Слой контейнера дабы все слои по центру выровнять	*/	
#conteiner {
	height:100%;
	width:100%;
	text-align:center;
	}

/*	Верхняя часть сайта	*/
#header {
	height:250px;
	width:1200px;
	margin-top:10px;
	border: 1px #000000 solid; /*	Тестовая линия	*/
	margin-left:auto;	/*	Эти отступы для того чтобы выровнять слой по центру относительно conteiner*/
	margin-right:auto;	/*	Эти отступы для того чтобы выровнять слой по центру относительно conteiner*/
	/*text-align:center;*/
	}
/*	Левый слой с изображением в header	*/
#left_img_header {
	/*display:inline;*/
	float:left;
	width:270px;
	height:235px;
	margin-top:0px;
	}
/*	Правый слой с изображением в header	*/
#right_img_header {
	/*display:inline;*/
	float:left;
	width:270px;
	height:235px;
	margin-top:0px;
	}
/*	Центральный слой в 	header*/
#center_div_in_header {
	/*display:inline;*/
	margin-left:auto;
	margin-right:auto;
	width:500px;
	height:100%;
	border: 1px #000000 solid; /*	Тестовая линия	*/
	}
#img_center_div {

	width:100%;
	margin-top:110px;
	text-align:center;
	/*border: 1px #000000 solid; /*	Тестовая линия	*/

	}

Я хочу в div хеадер поместить три тэга левое изображение, логотип, правое изображение.

Можно было бы сделать display:inline, но дело в том что если положить в центральный div еще два дива то все плывет.

Помогите начинающему. Буду признателен за ответы.

С уважением

Edited December 7, 2010 by Мо ок

Scrum · December 7, 2010

Есть прекрасное свойство background.

на вскидку:

css

#header_left {
background: url("left_image") no-repeat left top;
}
#header_right {
bacground: url ("right_image") no-repeat right top;
}
#header_content {
margin: 0 ?? /* на ширину картинок */
}

html

<div id="header">

<div id="header_left"></div>
<div id="header_right"><div>
<div id="header_content"></div>

</div>

можно попроще, но так нагляднее.

это в нагрузку.

Мо ок · December 7, 2010

Спасибо за ответ. Я тут еще немного поковырял html-код, и обнаружил что последовательность div имеет значение, последним нужно было вставлять центральный div. Спасибо что помогли в решении.

Scrum · December 7, 2010

последним нужно было вставлять центральный div

это при плавающих блоках, тогда надо еще поменять расположение левого блока с правым.

Вообще я немного некорректно пример привел. Надо было оборачивать центральный блок.

<div id="left">
   <div id="right">
	  <div id="center">
	  </div>
   </div>
</div>

тогда можно обойтись без плавающих элементов.

Удачи на этом нелегком поприще.

Sign In

3 дива в одну линию и в центральном диве есть вложенные дивы

Question

Мо ок

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

Мо ок

Link to comment

Share on other sites

Scrum

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information