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



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

#1 lakki-alex
lakki-alex
  • Неактивные
  • 2 сообщений
  • Репутация: 0
0

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

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

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

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

 

 

  • 0

#2 yury
yury
  • Пользователь
  • 648 сообщений
  • Репутация: 195

Отправлено 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
  • Пользователь
  • 648 сообщений
  • Репутация: 195

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



Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 22.5 3 темы, 6 сообщений, 1 балл репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 18 Вне конкурса за определение пользователя месяца

  • Фотография SergiuS85
    #3

    SergiuS85
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография kuztoday
    #4

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография Megoydagi
    #5

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография mkreine
    #6

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография kolver
    #7

    kolver
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Фотография Totti
    #8

    Totti
    Очков активности: 7.5 0 тем, 5 сообщений, 1 балл репутации

  • Фотография r0mZet
    #9

    r0mZet (rz-style.ru)
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Фотография fedornabilkin
    #10

    fedornabilkin (plohoneponyal.ru)
    Очков активности: 6 1 тема, 1 сообщение, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

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