Перейти к содержимому

Сервис обмена электронных валют


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

#1 lakki-alex

lakki-alex
  • Пользователь
  • 2 сообщений
  • Репутация: 0
0

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

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

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

  • Прикрепленный файл  css.css   2,76К   Количество загрузок: 89
  • Прикрепленный файл  index.html   1,77К   Количество загрузок: 143
  • Прикрепленный файл  index.html   1,77К   Количество загрузок: 110
  • Прикрепленный файл  css.css   2,76К   Количество загрузок: 80

 

 

  • 0

#2 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

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

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

#3 lakki-alex

lakki-alex
    Topic Starter
  • Пользователь
  • 2 сообщений
  • Репутация: 0

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

http://upwap.ru/2906827

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

#4 yury

yury
  • Пользователь
  • 629 сообщений
  • Репутация: 176

Отправлено 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>

  • 0


Оформление форума – IPBSkins.ru