Форум

cuberboy · #1 (**permalink**) 27.11.2009, 17:50

<!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( как это бороть?
Кста непонятно почему свойство воздействует на родительский элемент .

Octane · #2 (**permalink**) 27.11.2009, 17:55

http://htmlbook.ru/css/clear.html

Kolyaj · #3 (**permalink**) 27.11.2009, 17:58

Код:

.main_menu {
    overflow: hidden;
}

subzey · #4 (**permalink**) 27.11.2009, 18:51

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

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

.

cuberboy · #5 (**permalink**) 27.11.2009, 20:07

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

subzey · #6 (**permalink**) 27.11.2009, 21:14

В флоаты выпадают из основного потока. Соответсвенно, в нормальных браузерах блок-контейнер, если внутри него нет не-флоатов, занимает по высоте 0. Второй элемент располагается сразу после после первого, а его элементы присоседиваются к флоатам первого.

subzey · #7 (**permalink**) 27.11.2009, 21:18

Понял, что ничего не объяснил. Короче, флоаты выпадают из основного потока и имеют особенности.

cuberboy · #8 (**permalink**) 08.12.2009, 20:58

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

Форум

Справочник

Discord чат

Курсы javascript