Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.11.2009, 17:50
Аватар для cuberboy
Профессор
Отправить личное сообщение для cuberboy Посмотреть профиль Найти все сообщения от cuberboy
 
Регистрация: 20.07.2009
Сообщений: 202

несколько горизонтальных списков по центру
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

<title>horizontal menu</title>

<style type="text/css">
<!--
.main_menu li {
	float: left;
	list-style: none;
	text-align: center;
	background: brown;
}

.main_menu li a {
	width: 100px;
	display: block;
	font-size: 12px;
	color: #fff;
	text-decoration: none;
}

.main_menu li a:hover {
	background-color: burlywood;
}
-->
</style>

</head>

<body>

<ul class="main_menu"> 
 <li><a href="#">item #1</a></li> 
 <li><a href="#">item #2</a></li> 
 <li><a href="#">item #3</a></li> 
 <li><a href="#">item #4</a></li> 
 <li><a href="#">item #5</a></li> 
 <li><a href="#">item #6</a></li> 
</ul>


<ul class="main_menu"> 
 <li><a href="#">item #1</a></li> 
 <li><a href="#">item #2</a></li> 
 <li><a href="#">item #3</a></li> 
 <li><a href="#">item #4</a></li> 
 <li><a href="#">item #5</a></li> 
 <li><a href="#">item #6</a></li> 
</ul>

</body>
</html>


работает замечательно но для одного списка , второй уже становится не на новой строке 8( как это бороть?
Кста непонятно почему свойство воздействует на родительский элемент .
Ответить с цитированием
  #2 (permalink)  
Старый 27.11.2009, 17:55
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

http://htmlbook.ru/css/clear.html
Ответить с цитированием
  #3 (permalink)  
Старый 27.11.2009, 17:58
Новичок на форуме
Отправить личное сообщение для Kolyaj Посмотреть профиль Найти все сообщения от Kolyaj
 
Регистрация: 19.02.2008
Сообщений: 9,177

Код:
.main_menu {
    overflow: hidden;
}
Ответить с цитированием
  #4 (permalink)  
Старый 27.11.2009, 18:51
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Замечу лишь, что Kolyaj предлагает абсолютно работающее решение, но есть кое-что, на что следует обратить внимание. При overflow:hidden браузер вынужден увеличить высоту объекта до самого нижнего флоата, однако не забывайте, что это все-таки overflow:hidden, иначе Вы можете сильно удивиться, куда это делся кусок элемента position:absolute внутри.

Если высоту ul увеличивать особо-то и не нужно, ограничьтесь clear: both, сэкономите немного нервов .

Последний раз редактировалось subzey, 27.11.2009 в 18:52. Причина: смайлы в коде
Ответить с цитированием
  #5 (permalink)  
Старый 27.11.2009, 20:07
Аватар для cuberboy
Профессор
Отправить личное сообщение для cuberboy Посмотреть профиль Найти все сообщения от cuberboy
 
Регистрация: 20.07.2009
Сообщений: 202

спасибо. нервы сэкономили таблицы 8 )...надо буит заменить.
а почему свойство float передаётся за пределы блока?
Зачем использовать overflow: hidden; не по назначению?

Последний раз редактировалось cuberboy, 27.11.2009 в 20:13.
Ответить с цитированием
  #6 (permalink)  
Старый 27.11.2009, 21:14
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

В флоаты выпадают из основного потока. Соответсвенно, в нормальных браузерах блок-контейнер, если внутри него нет не-флоатов, занимает по высоте 0. Второй элемент располагается сразу после после первого, а его элементы присоседиваются к флоатам первого.
Ответить с цитированием
  #7 (permalink)  
Старый 27.11.2009, 21:18
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

Понял, что ничего не объяснил. Короче, флоаты выпадают из основного потока и имеют особенности.
Ответить с цитированием
  #8 (permalink)  
Старый 08.12.2009, 20:58
Аватар для cuberboy
Профессор
Отправить личное сообщение для cuberboy Посмотреть профиль Найти все сообщения от cuberboy
 
Регистрация: 20.07.2009
Сообщений: 202

8 )) пасип, успешно пользую "clear: both"
флоаты выпадают из основного потока
ну нееее....они меняют его!!!! 8)))
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Слой по центру окна sasyk Events/DOM/Window 2 26.01.2009 09:52