Перейти к содержимому



Горизонтальное меню

#1 Wolf_X

Wolf_X
  • Пользователь
  • 2 сообщений
  • Репутация: 0
0

Отправлено 08 Апрель 2012 - 20:20

Всем доброго времени суток!

Помогите, пожалуйста, с выравниванием горизонтального меню по центру.
<div id="menu">
<ul>
<li><a href="#" class="current">home</a></li>
<li><a href="#">about us</a></li>
<li><a href="#">services</a></li>
<li><a href="#">solutions</a></li>
<li><a href="#">products</a></li>
<li><a href="#">contact us</a></li>
</ul>
</div>


Css
*{
margin:0;
padding:0;
}
body{
background:#fff;
color:#666;
font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
}
  #menu ul{
   list-style:none;
  }
   #menu li{
    list-style:none;
    display:block;
    float:left;
    height:66px;
    line-height:66px;
    margin:0 1px;
   }
    #menu li a{
	 display:block;
	 float:left;
	 color:#9a9a9a;
	 font-size:11px;
	 font-weight:bold;
	 line-height:66px;
	 text-decoration:none;
	 padding:0 25px;
	 background:#e7eff1 url(images/menu_039_bg.gif) repeat-x;
    }
	 #menu li a:hover{
	  color:#fff;
	  background:#da6800 url(images/menu_039_h.gif) repeat-x left;
	 }
    #menu li a.current{
	 display:block;
	 float:left;
	 color:#fff;
	 background:#da6800 url(images/menu_039_h.gif) repeat-x left;
	 font-size:11px;
	 font-weight:bold;
	 line-height:66px;
	 text-decoration:none;
	 padding:0 25px;
    }
	 #menu li a:hover.current{
	  color:#fff;
	 }


 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 08 Апрель 2012 - 23:32

html
<!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="en" lang="en">
<head>
<title>centred menu</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="menu">
  <ul>
    <li><a href="#" class="current">home</a></li>
    <li><a href="#">about us</a></li>
    <li><a href="#">services</a></li>
    <li><a href="#">solutions</a></li>
    <li><a href="#">products</a></li>
    <li><a href="#">contact us</a></li>
  </ul>
</div>
</body>
</html>
css
*{
  margin:0;
  padding:0;
}
body{
  background:#fff;
  color:#666;
  font:12px/18px Tahoma, Arial, Helvetica, sans-serif;
}
#menu{
  text-align: center; /*центруем вложенные строчные элементы*/
}
#menu ul{
  list-style:none;
  display: inline-block; /*делаем элемент строчным*/
  //display: inline; /*то же для IE6-7*/
  zoom: 1; /*layout для IE*/
}
#menu li{
  float:left;
  height:66px;
  line-height:66px;
  margin:0 1px;
}
#menu li a{
  float:left;
  color:#9a9a9a;
  font-size:11px;
  font-weight:bold;
  line-height:66px;
  text-decoration:none;
  padding:0 25px;
  background:#e7eff1 url(images/menu_039_bg.gif) repeat-x;
}
#menu li a:hover{
  color:#fff;
  background:#da6800 url(images/menu_039_h.gif) repeat-x left;
}
#menu li a.current{
  float:left;
  color:#fff;
  background:#da6800 url(images/menu_039_h.gif) repeat-x left;
  font-size:11px;
  font-weight:bold;
  line-height:66px;
  text-decoration:none;
  padding:0 25px;
}
#menu li a:hover.current{
  color:#fff;
}

  • 1

#3 Wolf_X

Wolf_X
    Topic Starter
  • Пользователь
  • 2 сообщений
  • Репутация: 0

Отправлено 09 Апрель 2012 - 14:47

Большое СПАСИБО! Все получилось
  • 0

#4 Sosnovskij

Sosnovskij
  • Администратор
  • 3 883 сообщений
  • Репутация: 565

Отправлено 11 Апрель 2012 - 16:41

Перенес в Javascript и языки разметки
  • 0

Не стесняйтесь ставить оценки темам :) Правила форума. Мой блог http://sosnovskij.ru/.




Оформление форума – IPBSkins.ru