X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

Открыть тему
Тема закрыта
> Горизонтальное меню
Wolf_X_mw
Wolf_X_mw
Topic Starter сообщение 8.4.2012, 21:20; Ответить: Wolf_X_mw
Сообщение #1


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

Помогите, пожалуйста, с выравниванием горизонтального меню по центру.
<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
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
yury_mw
yury_mw
сообщение 9.4.2012, 0:32; Ответить: yury_mw
Сообщение #2


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;
}
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Wolf_X_mw
Wolf_X_mw
Topic Starter сообщение 9.4.2012, 15:47; Ответить: Wolf_X_mw
Сообщение #3


Большое СПАСИБО! Все получилось
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
sosnovskij
sosnovskij
сообщение 11.4.2012, 17:41; Ответить: sosnovskij
Сообщение #4


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

Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.


--------------------
Блог https://sosnovskij.ru/, телеграм https://t.me/sosnovskij
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Тема имеет прикрепленные файлыПеренести меню
 1 Викторио_mw 1466 28.8.2018, 0:10
автор: TimurR
Открытая тема (нет новых ответов) Необходимо разрезать и установить Меню для группы ВКонтакте
 2 boltuk 3408 4.12.2017, 14:44
автор: tezoro
Открытая тема (нет новых ответов) Помогите с меню - переделать в выпадающее
 1 lepota 1128 4.12.2017, 13:29
автор: yury_mw
Открытая тема (нет новых ответов) Слайдер под меню
 0 Olya_Poy 4637 29.11.2017, 11:09
автор: -garmoni-
Открытая тема (нет новых ответов) На разных разрешениях меню выглядит по разному
 0 SPiar 4813 28.9.2017, 17:45
автор: -korotkov-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 16.4.2024, 10:36

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet