CSS! Гориз. резиновое меню из ul li, как его расстянуть по ширине на весь экран? - HTML и CSS

AlienNation · 20.01.2012, 19:50

Надо расстянуть менюшку по всей ширине, желатльно использовать только %, так как сайт резиновый, и еще когда стягиваешь окно, бывает так что последние блоки списка падают вниз, как этого избежать? вот страничка:

Код HTML:

<!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=utf-8" />
<title>li menu</title>
</head>

<body>
<style>
div {
	width: 100%;
	height: 3%;
	background: red;
	opacity: 0.7;
}
ul {
	width:100%;
	list-style:none;
	padding: 0;
	margin: 0;
}

ul li {
 background-color:yellow;
 display: inline;
 text-align: center;
 width:30%;
}
</style>
<div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
        <li>item 4</li>
        <li>item 5</li>
    </ul>
</div>

</body>
</html>

AlienNation · 21.01.2012, 01:27

Ладно, черт с ним, резиновое я сделал кое-как, но мне нужно чтобы оно немного с отрицательным отступом сверху было, но в webkit не желает вообще показывать картинку, вот пример: test.zip, может кто-нть подскажет почему и что с ним тогда делать?

20.01.2012, 19:50	#1
AlienNation Пользователь Регистрация: 22.08.2010 Сообщений: 85	CSS! Гориз. резиновое меню из ul li, как его расстянуть по ширине на весь экран? Надо расстянуть менюшку по всей ширине, желатльно использовать только %, так как сайт резиновый, и еще когда стягиваешь окно, бывает так что последние блоки списка падают вниз, как этого избежать? вот страничка: Код HTML: <!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=utf-8" /> <title>li menu</title> </head> <body> <style> div { width: 100%; height: 3%; background: red; opacity: 0.7; } ul { width:100%; list-style:none; padding: 0; margin: 0; } ul li { background-color:yellow; display: inline; text-align: center; width:30%; } </style> <div> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> <li>item 5</li> </ul> </div> </body> </html>

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Резиновое меню списком внутри DIV	Kolik317	HTML и CSS	3	05.09.2011 19:27
Горзонтальное резиновое меню, 6 элементов, зазор	Kolik317	HTML и CSS	2	15.05.2011 20:37
динамическое гориз меню вверх	ilma55	HTML и CSS	0	23.06.2010 13:45
как запретить раскрытия формы на весь экран?	designer999	Общие вопросы Delphi	10	18.02.2010 16:07
игры по ширине не на весь экран	batist65	Свободное общение	6	19.02.2009 11:56

21.01.2012, 01:27	#2
AlienNation Пользователь Регистрация: 22.08.2010 Сообщений: 85	Ладно, черт с ним, резиновое я сделал кое-как, но мне нужно чтобы оно немного с отрицательным отступом сверху было, но в webkit не желает вообще показывать картинку, вот пример: test.zip, может кто-нть подскажет почему и что с ним тогда делать?