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


Пользователь месяца
WGN WGN 1-й за Июль
Очков активности: 850 2 темы, 75 сообщений, 7 баллов репутации
Сайт: worldgamenews.com
ТОП самых активных за этот месяц
  • Фотография TimurR
    #1

    TimurR
    Очков активности: 273 3 темы, 17 сообщений, 7 баллов репутации

  • Фотография WGN
    #2

    WGN (worldgamenews.com)
    Очков активности: 64.5 Вне конкурса за определение пользователя месяца

  • Фотография ShowPrint
    #3

    ShowPrint (ShowPrint.ru)
    Очков активности: 52.5 0 тем, 7 сообщений, 5 баллов репутации

  • Фотография BlackLion
    #4

    BlackLion
    Очков активности: 36 0 тем, 24 сообщения, 1 балл репутации

  • Фотография Vmir
    #5

    Vmir
    Очков активности: 25.5 Вне конкурса за определение пользователя месяца

  • Фотография Napoleon-007
    #6

    Napoleon-007
    Очков активности: 21 0 тем, 14 сообщений, 1 балл репутации

  • Фотография Ixman
    #7

    Ixman (o5cat.ru)
    Очков активности: 21 0 тем, 7 сообщений, 2 балла репутации

  • Фотография alekswebart
    #8

    alekswebart
    Очков активности: 19.5 1 тема, 10 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 18 2 темы, 6 сообщений, 1 балл репутации

  • Фотография profi
    #10

    profi (1informer.com)
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 15.08.2018
Топ 5 участников по репутации


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

#1 Wolf_X

Wolf_X
  • Неактивные
  • 2 сообщений
  • Репутация: 0
0

Отправлено 08 April 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

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85
Советую обратить внимание на следующее:
  1. Выплывающие меню на CSS
  2. Переделать горизонтальное меню в вертикальное
  3. Урок (Viewport)#2 - создание выпадающих меню
  4. Верстаем горизонтальное меню по мотивам MasterWEBS
  5. Помогите с меню - переделать в выпадающее

#2 yury

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

Отправлено 08 April 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 April 2012 - 14:47

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

#4 Sosnovskij

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

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

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

:excl: Требуется ЛинкБилдер (создание ссылочной массы, 1200-1600 руб в сутки). Блог — https://sosnovskij.ru/.





Похожие темы

  Название темы Автор Статистика Последнее сообщение

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