| 0
- 10.03.2015 - 15:45
|
Помогите с реализацией выпадающего горизонтального меню. Навоял код менюшки, но вот не пойму как сделать чтоб выезжали подпункты с таким же оформлением css. Прописывал такое, но ничего не отображает <style> .fancyNav ul ** display: none; position: absolute; top: 100%; ** .fancyNav li:hover ul ** display: block; ** .fancyNav, .fancyNav ul ** margin: 0; padding: 0; list-style-type: none; ** .fancyNav li ** float: left; position: relative; ** .fancyNav ul li ** float: none; ** </style> <html> <head> ..... </head> <body> <nav> <ul class="fancyNav"> <li id="home"><a href="#home" class="homeIcon">Главная</a></li> <li id="news"><a href="">Новости</a></li> <li id="otchet"><a href="">Отчётность</a></li> <li id="info"><a href="">Информация</a></li> <li id="house"><a href="">Дома</a></li> <li id="obsh"><a href="">Общение</a></li> <ul> <li><a href="#">Адрес</a></li> <li><a href="#">Телефон</a></li> <li><a href="#">Email</a></li> </ul> <li id="contact"><a href="">Контакты</a></li> <li id="dolgniki"><a href="">Должники</a></li> </ul> </nav>     | |
| 1
- 10.03.2015 - 18:52
|
Элемент ul должен быть в элементе li, а не между элементами li <li id="obsh"><a href="">Общение</a> <ul> <li><a href="#">Адрес</a></li> <li><a href="#">Телефон</a></li> <li><a href="#">Email</a></li> </ul> </li> | |
| 2
- 18.03.2015 - 13:18
|
1-Искусственный Интеллект1 >Спасибо, всё получилось, правда ещё была небольшая ошибка в стилях. Если можно ещё вопрос. Хочу чтоб рядом с текстом было ещё и изображениие. <li id="home"><a href="#home" class="home">Главная</a></li> В стилях #home ** background:url('images/homem.png') no-repeat center center; display: block; overflow: hidden; padding-left: 12px; padding-right: 120px; text-indent: -9999px; width: 10px; ** Но при этом картинка показывается, а текст нет | |
| 3
- 18.03.2015 - 13:35
|
2-qazz >Во первых не #home а .home ! - Это если class Во вторых не background:url('images/homem.png') no-repeat center center; а background:url('images/homem.png') no-repeat 0 50%; - если хочешь изображение слева и по центру строки! Или background: .... no-repeat 100% 50%; если картинка справа! Смотри Справочник по CSS http://htmlbook.ru/css | |
| 4
- 18.03.2015 - 13:40
|
Ну и естественно что текста НЕТ text-indent: -9999px; Надо убить эту строку или хотя бы сделать text-indent: 10px; | |
| 5
- 18.03.2015 - 13:45
|
Да откуда ВЫ этот БРЕД взяли там еще и width: 10px; Этож размер всего блока в 10 точек а у вас отступы слева padding-left: 12px; а справа padding-right: 120px; Куда там тексту ПОМЕЩАТЬСЯ? | |
| 6
- 18.03.2015 - 14:29
|
2-qazz >Для того что бы все нормально работало - Надо: <li class="home"><a href="#home">Главная</a></li> В стилях .home ** background:url('images/homem.png') no-repeat 0 50%; display: block; overflow: hidden; padding-left: 12px; margin: 0px 5px 2px 10px; width: 150px; ** Вот и все! margin - устанавливает отступы от других элементов: сверху - 0 точек, справа - 5 точек, снизу - 2 точки, слева - 10 точек width: 150px; размер блока (<li>) по горизонтали 150 точек | |
| 7
- 18.03.2015 - 14:41
|
.fancyNav a.homeIcon{ background:url('images/homem.png') no-repeat 0 50%; display: block; overflow: hidden; padding-left: 22px; padding-right: 12px; width: 100px; ** Всё заработало. Спасибо. Далее курю справочник | |
Интернет-форум Краснодарского края и Краснодара |
