| |
 111.9 Кб |
|
| | Помогите разобраться со стилями в верхнем меню!!!
Как то по дурацки отображается список по вертикали
Угробил пол дня и не смог понять причину по которой если в списке ul li появляется не ссылка а просто текст то все последующие li отображаются с новой строки :(((
Прикрепляю файл | |
| |
|
|
| |
|
|
| |
для: andriano
(17.10.2008 в 21:28)
| | | Если Вам главное, чтоб работало, то в CSS строку замените на . А так, у Вас там вообще много чего лишнего и некорректного. В частности, несколько тегов имеют одинаковый ID - надо не ID повторять, а CLASS. | |
| |
|
|
| |
1.5 Кб |
|
| |
для: Nytrogen
(17.10.2008 в 21:48)
| | | Большое спасибо за ответ! Частично решил проблемму. Но появилась теперь другая - дублируются разделительные линии между пунктами меню.
Повторю вопрос: Как добиться нормального отображения меню и где ошибка в CSS:
Вот CSS код
#header {
width: 987px;
height: 20px;
margin: 0 0;
padding: 0 0;
background: #CCCCCC url(/images/site__05.gif) repeat-x;
}
/* Menu */
#menu {
padding: 0 0 0 0;
list-style: none;
margin: 0;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
background: url(/images/site__04.gif) no-repeat;
}
#menu li {
color: #FFFFFF;
display: inline;
}
#menu * {
margin: 0;
float: left;
display: block;
padding: 0px 9px 0px 12px;
text-decoration: none;
border-right-color: #000000;
border-right-width: 1px;
border-right-style: outset;
/* padding: 3px 9px 0px 12px; */
color: #000000;
}
#menu a:hover {
background: #009900 url(/images/site__07.gif) repeat-x;
color: #00CC00;
}
#menu #current a{
background: #009900 url(/images/site__07.gif) repeat-x;
color: #FFFFFF;
}
#menu a:active {
background: #009900 url(/images/site__07.gif) repeat-x;
color: #FFFFFF;
}
#menu #right a{
display: block;
background: #009900 url(/images/site__09.gif) repeat-x;
color: #00CC00;
float: right;
border-right-width: 0px;
}
#menu #right a:hover{
color: #00FF00;
}
/*#menu .active a {
background: #009900 url(images/greenbuttion.gif) repeat-x;
color: #FFFFFF;
}
|
А вот html
<html>
<head>
<title>CMS Ortus :: лицензия</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<META NAME='keywords' CONTENT='keywords '><META NAME='description' CONTENT='description '><link href="css/common.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<ul id="menu">
<li><a href='index.php?ortupg=9'>о системе</a></li><li>лицензия</li><li><a href='index.php?ortupg=12'>документация</a></li><li><a href='index.php?ortupg=20'>статьи</a></li><li><a href='index.php?ortupg=22'>обо мне</a></li><li><a href='index.php?adm=main'>админка</a></li>
</ul>
<ul id="menu">
<li id="right"><a href=index.php?rev=contacts><img src="images/flag_ru.gif" width="21" height="16" /></a></li>
<li id="right"><a href=index.php?rev=contacts><img src="images/flag_en.gif" width="21" height="16" /></a></li>
<li id="right"><a href=index.php?rev=contacts>MEMBER AREA </a></li>
</ul>
</div>
</body>
</html>
|
И прикрепляю набор фоновых картинок для кнопок
Возможно есть более рациональное решение такого же меню, с благодарностью выслушаю любые советы!!
Заранее спасибо!! | |
| |
|
|
| |
|
|
| |
для: andriano
(19.10.2008 в 11:59)
| | | >дублируются разделительные линии между пунктами меню.
Тут вот какое дело: когда вы используете в CSS универсальный селектор *, то объявления применяются ко всем вложенным тегам. Таким образом, объявления
border-right-color: #000000;
border-right-width: 1px;
border-right-style: outset;
|
применяются ко всем тегам, находящимся внутри контейнера <ul id="menu"> : как к <A></A>, так и к <LI></LI>, что является причиной для создания двойной границы.
Лучшим решением данной проблемы, на мой взгляд, является смена неоправданной структуры списка (по сути теги <LI> и <UL> применяются только при необходимости, т.е. когда нужен вертикальный список с bullet'ами): заменяем <UL> на <DIV>, а от <LI> избавляемся вовсе, оставляя только контейнеры ссылок. Лишняя вложенность ни к чему, если опять-таки это не оправдано контекстом или теми или иными особенностями стилей. | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(19.10.2008 в 23:05)
| | | Еще раз благодарю за ответ.
Наверно я по пояс деревянный, но до сих пор не получается сделать все как надо
Нужно что бы были названия кнопок с с разделительными вертикальными линиями и при наведении на кнопку-ссылку подсвечивался весь бэкграунд между двумя соседними линиями а не только текст кнопки-ссылки. Потому попытался каждую кнопку запихать в свой div. В диве текст с вертикальной линией в конце
Теперь при наведении мышкой на кнопку подсвечивается не все пустое пространство между вертикальными линиями а только текст. Как можно это исправить?
P/S. Никогда бы не подумал что на это горе меню у меня уйдет столько времени
ВОт код
<div id="header">
<div id="menu" > <a href=index.php?rev=about>Main</a> </div>
<div id="menu" ><a href=index.php?rev=product>About us</a></div>
<div id="menu" ><a href=index.php?rev=bussines>Services</a></div>
<div id="menu" ><a href=index.php?rev=materials>Portfolio</a></div>
</div>
|
в css вот что:
#menu {
text-decoration: none;
float: left;
display:inline;
list-style: none;
text-transform: uppercase;
font-size: 14px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
border-right-color: #000000;
border-right-width: 1px;
border-right-style: outset;
color: #000000;
padding: 3px 9px 0px 12px;
}
#menu li {
color: #FFFFFF;
display:inline-block;
border-right-color: #000000;
border-right-width: 1px;
border-right-style: outset;
}
#menu * {
float: left;
text-decoration: none;
/* padding: 3px 9px 0px 12px; */
color: #000000;
}
#menu a:hover {
background: #009900 ;
color: #00CC00;
}
#menu #current a{
background: #009900 url(/images/site__07.gif) repeat-x;
color: #FFFFFF;
}
#menu a:active {
background: #009900 url(/images/site__07.gif) repeat-x;
color: #FFFFFF;
}
#menu #right a{
display: block;
background: #009900 url(/images/site__09.gif) repeat-x;
color: #00CC00;
float: right;
border-right-width: 0px;
}
#menu #right a:hover{
color: #00FF00;
}
|
| |
| |
|
|
| |
|
|
| |
для: andriano
(20.10.2008 в 01:19)
| | | Ваша ошибка в том, что у св-ва background не может быть значения #цвет. Используя background-color, можно обойтись без DIV'ов.
К сожалению, нет времени редактировать Ваш код, поэтому приведу аналогичный:
<html>
<head>
<style>
a {
border-right: 2px solid red;
padding: 0px 15px;
}
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<div id=menu>
<a href=#>Main</a><a
href=#>About Us</a><a
href=#>Portfolio</a><a
href=#>Useful</a><a
href=#>Contacts</a>
</div>
</body>
</html>
|
P.S. НЕ ИСПОЛЬЗУЙТЕ повторяющиеся ID!!! Пишите CLASS = MENU, а в CSS вместо #MENU пишите .MENU. | |
| |
|
|
| |
|
|
| |
для: Nytrogen
(20.10.2008 в 17:28)
| | | спасибо за помошь!!! | |
| |
|
|
