Всем добрый вечер! Делаю панель навигации сверху, хочу закруглить первый и последний элемент навигации, сделал для этого <li class="left"> хочу задать ему в ксс border-radius: 0 0 20px 0px; но никак не могу правильно подключить этот класс в ксс. Вот ниже я привел код, буду очень рад если скажите как правильно подключить этот класс в ксс!
<div class="menu">
<ul>
<li class="left"><a href="/">Главная1</a></li>
<li><a href="/">Главная2</a></li>
<li><a href="/">Главная 3</a></li>
</ul></div>
<style>
.menu li { display:inline; margin: 1px; vertical-align: 7px; font-size: 0px }
.menu li a {
background:#539E0D;
font-weight:bold;
font: 20px ATrebuchet MS; bold; color: #333232; font-weight:bold;
padding:3px 25px;
color:#ffffff;
text-decoration:none;
outline:none;
}
.menu li a:visited {color:#ffffff; }
.menu li a:activ {color:#ffffff;}
.menu li a:hover {
background:#234A0B;
color:#ffffff;
text-decoration:none;
}
</style>
1. Jef - 29 Сентября, 2011 - 21:37:51 - перейти к сообщению
2. OlgaD - 30 Сентября, 2011 - 12:14:32 - перейти к сообщению
Повести класс left не на li, а на ссылку a:
<style>
.menu li { display:inline; margin: 1px;}
.menu li a.left{
border-radius: 0 0 20px 0;
}
.menu li a {
background:#539E0D;
font-weight:bold;
font: 20px ATrebuchet MS; bold; color: #333232; font-weight:bold;
padding:3px 25px;
color:#ffffff;
text-decoration:none;
outline:none;
}
.menu li a:hover {
background:#234A0B;
text-decoration:none;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a class="left" href="/">Главная1</a></li>
<li><a href="/">Главная2</a></li>
<li><a href="/">Главная 3</a></li>
</ul></div>
</body>
И не надо для псевдоклассов a: везде прописывать color, он и так наследуется(у вас в стилях для .menu li a 2 раза прописан, используется последний прописанный #ffffff)
<style>
.menu li { display:inline; margin: 1px;}
.menu li a.left{
border-radius: 0 0 20px 0;
}
.menu li a {
background:#539E0D;
font-weight:bold;
font: 20px ATrebuchet MS; bold; color: #333232; font-weight:bold;
padding:3px 25px;
color:#ffffff;
text-decoration:none;
outline:none;
}
.menu li a:hover {
background:#234A0B;
text-decoration:none;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a class="left" href="/">Главная1</a></li>
<li><a href="/">Главная2</a></li>
<li><a href="/">Главная 3</a></li>
</ul></div>
</body>
И не надо для псевдоклассов a: везде прописывать color, он и так наследуется(у вас в стилях для .menu li a 2 раза прописан, используется последний прописанный #ffffff)
3. MrBeard - 30 Сентября, 2011 - 12:54:58 - перейти к сообщению
Цитата:
хочу закруглить первый и последний элемент навигации
ещё можно было бы глянуть на псевдо-классы first-child и last-child
4. Jef - 30 Сентября, 2011 - 12:58:29 - перейти к сообщению
Спасибо вам большое! Заработало! Вы мне очень помогли!
(Добавление)
А как сделать что бы на широкоэкраниках граница меню не уменьшалась?
(Добавление)
А как сделать что бы на широкоэкраниках граница меню не уменьшалась?
5. savenko - 30 Сентября, 2011 - 17:18:54 - перейти к сообщению
Поставь
.menu ul {
width: 200px;
}
Свой размер подбери
и еще замечание по поводу закругленных углов. Правильно писать так:
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-khtml-border-top-left-radius: 5px;
border-top-left-radius: 5px;
Такое решение обеспечит кросбраузерность
.menu ul {
width: 200px;
}
Свой размер подбери
и еще замечание по поводу закругленных углов. Правильно писать так:
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-khtml-border-top-left-radius: 5px;
border-top-left-radius: 5px;
Такое решение обеспечит кросбраузерность
6. Jef - 30 Сентября, 2011 - 17:49:31 - перейти к сообщению
Ок закругленные углы поменяю, однако
я подобрал под себя нужный размер и меню по прежнему смещается на широкоэкараниках. Раньше было смещение на пол см вправо, теперь на пол см влево!
savenko пишет:
.menu ul {
width: 200px;
}
width: 200px;
}
я подобрал под себя нужный размер и меню по прежнему смещается на широкоэкараниках. Раньше было смещение на пол см вправо, теперь на пол см влево!
7. Jef - 02 Октября, 2011 - 22:50:17 - перейти к сообщению
Эту проблему решил, надо было дописать строчку overflow: hidden;
Казалось бы все хорошо, но увы не так, заметил другую проблему более подробно смотреть здесь http://forum.php.su/topic.php?fo...84708#1317584708
Казалось бы все хорошо, но увы не так, заметил другую проблему более подробно смотреть здесь http://forum.php.su/topic.php?fo...84708#1317584708
8. BoJlod9I - 03 Октября, 2011 - 01:28:09 - перейти к сообщению
попробуй просто.
border-radius: 2px 2px 2px 2px;
border-radius: 2px 2px 2px 2px;