Т.е. меню по центру, состоит из горизонтального списка li, главное то, что оно должно растягиваться по мере наполнения. А по бокам блока меню должны быть прижаты картинки.

Получается так что margin: 0 auto не работает так как ширина для меню не задается.

Заранее спасибо за ответы.

Вся эта конструкция должна располагаться по-центру экрана и растягиваться по мере наполнения!

Edited February 8, 2011 by tipx

Vlad · February 8, 2011

Таблица, не?

mishka · February 8, 2011

можно флоаты + центрирование 3мя блоками.

или display: inline-block; + text-align: center; ( это мне больше нравиться )

psywalker · February 8, 2011

Лови дружище.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3 Колонки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 500px;}
	div { height: 100px;}
	#wrap1 {
		margin: 5px;
		position: relative;
		float: left;
		left: 50%;

	}
	#wrap2 {
		float: left;
		left: -50%;
		position: relative;
		padding: 5px;
		border: 1px solid #000;
	}
	div.left {
		position: absolute;
		width: 200px;
		background: red;
		left: 5px;
		top: 5px;
	}
	div.right {
		position: absolute;
		width: 200px;
		background: red;
		right: 5px;
		top: 5px;
	}	
	div.content {
		background: blue;
		position: absolute;
		left: 210px;
		right: 210px;
		top: 5px;
	}
	div#s {
		height: 80px;
		margin: 10px 100px 0;
		display: table;
		position: relative;
		z-index: 2;
		background: #fff;
		opacity: 0.7;
		filter:alpha(opacity=70);


	}
	div#s p { display: table-cell;vertical-align: middle; }
</style>

<!--[if IE 6]>
<style type="text/css">
	div#s {display: inline; float: left;}
	body {width:expression(document.documentElement.clientWidth < 500 ? "500px" : "auto");}
div.content{width: expression(this.parentNode.offsetWidth-210-213+'px');}
	div#s p {margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
	div#s { margin-top: 15px;height: 80px;}
	div#s p {margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
</style>
<![endif]-->
</head>

<body>

<div id="wrap1">
<div id="wrap2">
	<div id="s">
		<p>	Soon our new web shop
				will be launche again with
				new design and great
				featurearmed with many
				new products and the
				</p>		
	</div>	
	<div class="left"></div>
	<div class="right"></div>
	<div class="content"></div>
</div>			
</div>

</body>
</html>

tipx · February 8, 2011

Лови дружище.

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3 Колонки</title>
<style type="text/css">
	*{ margin: 0; padding: 0;}
	body { min-width: 500px;}
	div { height: 100px;}
	#wrap1 {
		margin: 5px;
		position: relative;
		float: left;
		left: 50%;

	}
	#wrap2 {
		float: left;
		left: -50%;
		position: relative;
		padding: 5px;
		border: 1px solid #000;
	}
	div.left {
		position: absolute;
		width: 200px;
		background: red;
		left: 5px;
		top: 5px;
	}
	div.right {
		position: absolute;
		width: 200px;
		background: red;
		right: 5px;
		top: 5px;
	}	
	div.content {
		background: blue;
		position: absolute;
		left: 210px;
		right: 210px;
		top: 5px;
	}
	div#s {
		height: 80px;
		margin: 10px 100px 0;
		display: table;
		position: relative;
		z-index: 2;
		background: #fff;
		opacity: 0.7;
		filter:alpha(opacity=70);


	}
	div#s p { display: table-cell;vertical-align: middle; }
</style>

<!--[if IE 6]>
<style type="text/css">
	div#s {display: inline; float: left;}
	body {width:expression(document.documentElement.clientWidth < 500 ? "500px" : "auto");}
div.content{width: expression(this.parentNode.offsetWidth-210-213+'px');}
	div#s p {margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
</style>
<![endif]-->

<!--[if IE 7]>
<style type="text/css">
	div#s { margin-top: 15px;height: 80px;}
	div#s p {margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");}
</style>
<![endif]-->
</head>

<body>

<div id="wrap1">
<div id="wrap2">
	<div id="s">
		<p>	Soon our new web shop
				will be launche again with
				new design and great
				featurearmed with many
				new products and the
				</p>		
	</div>	
	<div class="left"></div>
	<div class="right"></div>
	<div class="content"></div>
</div>			
</div>

</body>
</html>

охо хо, дружище. Это даже работает!!! Спасибо, распечатаю и повешу на стену! Жаль так много букоффф.

mishka · February 8, 2011

Та да, Макс, както ты много кода наваял.

Sign In

Меню

Question

tipx

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Vlad

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

tipx

Link to comment

Share on other sites

mishka

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information