МагазинПрикрепленные файлы
-
css.css 2,76К
Количество загрузок: 99
-
index.html 1,77К
Количество загрузок: 154
-
index.html 1,77К
Количество загрузок: 129
-
css.css 2,76К
Количество загрузок: 98
Помогите разобраться со стилем
 |
#1
lakki-alex
-
- Неактивные
- 2 сообщений
Репутация: 0
Отправлено 16 Ноябрь 2012 - 16:01
я новичок. Вопрос такой: выпадающее меню не получается затолкать в блок (в ксс файле он именуется - .cat, в html соответственно также) получается вот так: http://upwap.ru/2905896 .Под логотипом получается квадратик в котором мне бы хотелось видеть это самое выпадающее меню. Скажите что не так?
#2
yury
-
- Пользователь
- 631 сообщений
Репутация: 179
Отправлено 16 Ноябрь 2012 - 21:18
lakki-alex,
проблема в том, что у вас блок с id="nav" — плавающий (имеет стилевое свойство float:left;) и таким образом выведен из потока, в котором находится блок-родитель (тот что с классом "cat"). А блок вне потока располагается сам по себе вне зависимости от того, как расположен родитель. Подобная проблема решается очисткой потока. В вашем случае поможет, например, добавление в html-код строки
проблема в том, что у вас блок с id="nav" — плавающий (имеет стилевое свойство float:left;) и таким образом выведен из потока, в котором находится блок-родитель (тот что с классом "cat"). А блок вне потока располагается сам по себе вне зависимости от того, как расположен родитель. Подобная проблема решается очисткой потока. В вашем случае поможет, например, добавление в html-код строки
<br clear="all">в конец блока с классом "cat"
#4
yury
-
- Пользователь
- 631 сообщений
Репутация: 179
Отправлено 17 Ноябрь 2012 - 20:12
lakki-alex,
правильно так:
* добавлена строка (5я строка с конца в моем примере):
правильно так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>Моя первая веб-страница</title> <link rel="stylesheet" type="text/css" href="css.css"> </head> <body> <div class="logo"> <img src="logo.png"> </div> <div class="cat"> <ul id="nav"> <li> <a href="#" title="Вернуться на главную страницу">Главная</a> </li> <li> <a href="#" title="Информация о компании">О нас</a> <ul> <li><a href="#">Продукты</a></li> <li><a href="#">Команда</a></li> </ul> </li> <li> <a href="#" title="Что мы можем для вас сделать">Услуги</a> <ul> <li><a href="#">Услуга один</a></li> <li><a href="#">Услуга два</a></li> <li><a href="#">Услуга три</a></li> <li><a href="#">Услуга четыре</a></li> </ul> </li> <li> <a href="#" title="Наша продуктовая линейка">Продукты</a> <ul> <li><a href="#">Маленький продукт (первый)</a></li> <li><a href="#">Маленький продукт (второй)</a></li> <li><a href="#">Маленький продукт (третий)</a></li> <li><a href="#">Маленький продукт (четвертый)</a></li> <li><a href="#">Большой продукт (пятый)</a></li> <li><a href="#">Большой продукт (шестой)</a></li> <li><a href="#">Большой продукт (седьмой)</a></li> <li><a href="#">Большой продукт (восьмой)</a></li> <li><a href="#">Невообразимый продукт (девятый)</a></li> <li><a href="#">Невообразимый продукт (десятый)</a></li> <li><a href="#">Невообразимый продукт (одиннадцатый)</a></li> </ul> </li> <li> <a href="#" title="Как с нами связаться">Контакт</a> <ul> <li><a href="#">Часы работы</a></li> <li><a href="#">Местоположение</a></li> </ul> </li> </ul> <br clear="all"><!-- тут добавлено--> </div> <!--</div> тут убрано--> </body> </html>По сравнению с вашим кодом:
* добавлена строка (5я строка с конца в моем примере):
<br clear="all">* убран один лишний закрывающий тэг (убрана строка перед закрывающим тэгом </body>):
</div>
