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


Конкурс "Лучший отзовик"
× Быстрый вопрос
Пользователь месяца
ShowPrint ShowPrint 1-й за Март
Очков активности: 1 152 1 тема, 61 сообщение, 12 баллов репутации
Сайт: ShowPrint.ru
ТОП самых активных за этот месяц
  • Фотография Андрей WPMasterKZ
    #1

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 837 Вне конкурса за определение пользователя месяца

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

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

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

    Vmir
    Очков активности: 430.5 3 темы, 32 сообщения, 7 баллов репутации

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

    Mandarin
    Очков активности: 246 7 тем, 20 сообщений, 4 балла репутации

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

    ShowPrint (ShowPrint.ru)
    Очков активности: 204 Вне конкурса за определение пользователя месяца

  • Фотография maxnik
    #6

    maxnik (konovalovpavel.ru)
    Очков активности: 72 1 тема, 21 сообщение, 2 балла репутации

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

    pozitron123
    Очков активности: 67.5 3 темы, 6 сообщений, 3 балла репутации

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

    Megoydagi
    Очков активности: 63 1 тема, 18 сообщений, 2 балла репутации

  • Фотография re-search
    #9

    re-search
    Очков активности: 49.5 7 тем, 12 сообщений, 1 балл репутации

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

    Constantine
    Очков активности: 39 4 темы, 14 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 20.04.2019
  • Яндекс выдача: 21.04.2019
Топ 5 участников по репутации


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

#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
  • Пользователь
  • 647 сообщений
  • Репутация: 192

Отправлено 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
  • Администратор
  • 5 060 сообщений
  • Репутация: 762

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

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

:excl: Конкурс "Лучший отзовик Masterwebs" - 5000 рублей за отзывы на форуме. Блог — https://sosnovskij.ru/.





Похожие темы

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

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