Помогите разобраться со стилем

#1 lakki-alex

Неактивные
2 сообщений

Репутация: 0

Отправлено 16 Ноябрь 2012 - 16:01

я новичок. Вопрос такой: выпадающее меню не получается затолкать в блок (в ксс файле он именуется - .cat, в html соответственно также) получается вот так: http://upwap.ru/2905896 .Под логотипом получается квадратик в котором мне бы хотелось видеть это самое выпадающее меню. Скажите что не так?

Прикрепленные файлы

css.css 2,76К Количество загрузок: 103
index.html 1,77К Количество загрузок: 158
index.html 1,77К Количество загрузок: 133
css.css 2,76К Количество загрузок: 102

robot

Пользователь PRO
2 652 сообщений

Репутация: 85

Советую обратить внимание на следующее:

#2 yury

Пользователь
642 сообщений

Репутация: 188

Отправлено 16 Ноябрь 2012 - 21:18

lakki-alex,
проблема в том, что у вас блок с id="nav" — плавающий (имеет стилевое свойство float:left;) и таким образом выведен из потока, в котором находится блок-родитель (тот что с классом "cat"). А блок вне потока располагается сам по себе вне зависимости от того, как расположен родитель. Подобная проблема решается очисткой потока. В вашем случае поможет, например, добавление в html-код строки

<br clear="all">

в конец блока с классом "cat"

#3 lakki-alex

Topic Starter

Неактивные
2 сообщений

Репутация: 0

Отправлено 17 Ноябрь 2012 - 16:46

http://upwap.ru/2906827

я правильно сделал? не помогло

#4 yury

Пользователь
642 сообщений

Репутация: 188

Отправлено 17 Ноябрь 2012 - 20:12

lakki-alex,
правильно так:

<!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>