PHP.SU

Программирование на PHP, MySQL и другие веб-технологии

PHP.SU Портал

Главная

Помощь

Поиск

Поиск Яндекс Вакансии

Пользователи

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

( Вход · Регистрация · Правила форума )

Забыли пароль?

Вопрос по css

Форумы портала PHP.SU » PHP » Программирование на PHP » Вопросы новичков (Модераторы: OrmaJever, Саныч, Строитель)

Страниц (1): [1]

Без описания

Поиск в теме | Версия для печати

Jef	Отправлено: 29 Сентября, 2011 - 21:37:51
Новичок Покинул форум Сообщений всего: 37 Дата рег-ции: Сент. 2011 Помог: 0 раз(а)	Всем добрый вечер! Делаю панель навигации сверху, хочу закруглить первый и последний элемент навигации, сделал для этого <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> (Отредактировано автором: 29 Сентября, 2011 - 21:49:06)

OlgaD	Отправлено: 30 Сентября, 2011 - 12:14:32
Новичок Покинул форум Сообщений всего: 9 Дата рег-ции: Сент. 2011 Помог: 0 раз(а)	Повести класс 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)

MrBeard	Отправлено: 30 Сентября, 2011 - 12:54:58
Гость Покинул форум Сообщений всего: 97 Дата рег-ции: Авг. 2011 Помог: 2 раз(а)	Цитата: хочу закруглить первый и последний элемент навигации ещё можно было бы глянуть на псевдо-классы first-child и last-child

Jef	Отправлено: 30 Сентября, 2011 - 12:58:29
Новичок Покинул форум Сообщений всего: 37 Дата рег-ции: Сент. 2011 Помог: 0 раз(а)	Спасибо вам большое! Заработало! Вы мне очень помогли! (Добавление) А как сделать что бы на широкоэкраниках граница меню не уменьшалась?

savenko	Отправлено: 30 Сентября, 2011 - 17:18:54
Новичок Покинул форум Сообщений всего: 26 Дата рег-ции: Дек. 2010 Помог: 0 раз(а)	Поставь .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; Такое решение обеспечит кросбраузерность

Jef	Отправлено: 30 Сентября, 2011 - 17:49:31
Новичок Покинул форум Сообщений всего: 37 Дата рег-ции: Сент. 2011 Помог: 0 раз(а)	Ок закругленные углы поменяю, однако savenko пишет: .menu ul { width: 200px; } я подобрал под себя нужный размер и меню по прежнему смещается на широкоэкараниках. Раньше было смещение на пол см вправо, теперь на пол см влево! (Отредактировано автором: 30 Сентября, 2011 - 17:50:18)

Jef	Отправлено: 02 Октября, 2011 - 22:50:17
Новичок Покинул форум Сообщений всего: 37 Дата рег-ции: Сент. 2011 Помог: 0 раз(а)	Эту проблему решил, надо было дописать строчку overflow: hidden; Казалось бы все хорошо, но увы не так, заметил другую проблему более подробно смотреть здесь http://forum.php.su/topic.php?fo...84708#1317584708

BoJlod9I	Отправлено: 03 Октября, 2011 - 01:28:09
Частый гость Покинул форум Сообщений всего: 129 Дата рег-ции: Февр. 2011 Помог: 1 раз(а)	попробуй просто. border-radius: 2px 2px 2px 2px;

Поиск в теме | Версия для печати

Страниц (1): [1]

Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)

« Вопросы новичков »

Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.