Резина в меню

okunev2 · July 26, 2008

Есть css вот такой:

#menu {
	 position: absolute;
	 margin: 352px 0 0 213px;
}

#menu li {
	 float: left;
	 padding-right: 35px;
	 margin-left: -1px;
}

#menu li a {
	 float: left;
	 text-decoration: underline;
	 font-size: 11px;
	 color: #202e2e;
	 font-family: Verdana;
}

#menu li a:hover {
	 text-decoration: none;
}

				<ul id="menu">
					<li><a href="#">меню1</a></li>
					<li><a href="#">меню2</a></li>
				</ul>

Как сделать чтобы это меню было в ширину резиновым на 100%, но при этом сохранились расстояния между пунктами меню как есть при сужении окна браузера?

okunev2 · July 26, 2008

Azadi · July 26, 2008

Наверное как-то так:

<!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" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
* {	
	padding:0;
	margin:0;
	zoom:1;
}
#wrap {
	position:relative;
	margin:100px;
}
UL#menu {
	 position:absolute;
	 top:0;
	 left:0;
	 right:0;
	 background:#eee;
}
UL#menu:after {
	content:"";
	clear:both;
	display:block;
}

#menu li {
	 float:left;
	 display:block;
	 background:#fff;
	 width:50%;
	 text-align:center;
}

#menu li A {
	 display:block;
	 font-size: 11px;
	 font-family: Verdana;
	color: #202e2e;
	line-height:2;
	text-decoration:underline;
	margin:0 10px;
	background:#ccc;
}
#menu li A:hover{	 
	 background:#bbb;
	 text-decoration:none;
}
</style>
</head>

<body>
   <div id="wrap">
	   <ul id="menu">
			<li><a href="#">меню1</a></li>
			<li><a href="#">меню2</a></li>
		</ul>
   </div>
</body>
</html>

Только вот меню ведет себя малость неадекватно при ресайзе окна просмотра в IE.

okunev2 · July 27, 2008

А более гибкого решения для того меню нет?

okunev2 · July 27, 2008

okunev2 · July 28, 2008

Наверное как-то так:

<!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" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style type="text/css">
* {	
	padding:0;
	margin:0;
	zoom:1;
}
#wrap {
	position:relative;
	margin:100px;
}
UL#menu {
	 position:absolute;
	 top:0;
	 left:0;
	 right:0;
	 background:#eee;
}
UL#menu:after {
	content:"";
	clear:both;
	display:block;
}

#menu li {
	 float:left;
	 display:block;
	 background:#fff;
	 width:50%;
	 text-align:center;
}

#menu li A {
	 display:block;
	 font-size: 11px;
	 font-family: Verdana;
	color: #202e2e;
	line-height:2;
	text-decoration:underline;
	margin:0 10px;
	background:#ccc;
}
#menu li A:hover{	 
	 background:#bbb;
	 text-decoration:none;
}
</style>
</head>

<body>
   <div id="wrap">
	   <ul id="menu">
			<li><a href="#">меню1</a></li>
			<li><a href="#">меню2</a></li>
		</ul>
   </div>
</body>
</html>

Только вот меню ведет себя малость неадекватно при ресайзе окна просмотра в IE.

Пример хороший, пасиб

Но хотелось бы чтобы у всего этого резинового меню были отсупы слева и справа от краев окна?

Azadi · July 28, 2008

У UL#menu left и right укажите нужные. А для IE left и width: expression( this.parentNode.clientWidth - 'значение right' + 'px' ); Наверное, заработает

Sign In

Резина в меню

Question

okunev2

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

okunev2

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

okunev2

Link to comment

Share on other sites

okunev2

Link to comment

Share on other sites

okunev2

Link to comment

Share on other sites

Azadi

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information