Форумы портала PHP.SU :: Версия для печати

1. Jef - 29 Сентября, 2011 - 21:37:51 - перейти к сообщению

Всем добрый вечер! Делаю панель навигации сверху, хочу закруглить первый и последний элемент навигации, сделал для этого <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>

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)

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;

Такое решение обеспечит кросбраузерность

6. Jef - 30 Сентября, 2011 - 17:49:31 - перейти к сообщению

Ок закругленные углы поменяю, однако

savenko пишет:

.menu ul {
width: 200px;
}

я подобрал под себя нужный размер и меню по прежнему смещается на широкоэкараниках. Раньше было смещение на пол см вправо, теперь на пол см влево!

7. Jef - 02 Октября, 2011 - 22:50:17 - перейти к сообщению

Эту проблему решил, надо было дописать строчку overflow: hidden;
Казалось бы все хорошо, но увы не так, заметил другую проблему более подробно смотреть здесь http://forum.php.su/topic.php?fo...84708#1317584708

8. BoJlod9I - 03 Октября, 2011 - 01:28:09 - перейти к сообщению

попробуй просто.
border-radius: 2px 2px 2px 2px;