Проблема с отображением списка

an1401 · June 25, 2011

Добрый день! Возникла такая проблема: требуется вывести каталог товаров в виде горизонтального списка.

Но при добавлении float:left тэгу LI или Div (внутри LI), весь дизайн съежает...Кто может помочь советом? Буду благодарен.

Вот скрины и код примерной схемы:

Если нет float:

И если добавить float:left тэгу LI или Div (внутри LI):

<!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>Документ без названия</title>
<style type="text/css">
<!--
#wrapper {
	background-color: #999999;
	height: 100%;
	width: 100%;
}
#wrapper #main {
	background-color: #FFFF00;
	width: 1000px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#wrapper #main #zag {
	background-color: #000000;
	height: 50px;
	width: 500px;
	margin-left: 200px;
}
#wrapper #main #catalog {
	background-color: #FF0000;
	width: 900px;
	margin-top: 50px;
	margin-left: 50px;
	position: relative;
}
#wrapper #main #catalog li {
	list-style-type: none;

}
#wrapper #main #catalog ul {
	margin:0px;


}
#wrapper #main #catalog #cat {
	background-color: #009900;
	height: 150px;
	width: 250px;
	margin-top: 50px;
	float:left;
	 margin-left: 25px;
}
#wrapper #footer {
	background-color: #3300FF;
	height: 50px;
	width: 100%;
}
#wrapper #main #catalog #test {
	background-color: #66FF00;
	height: auto;
	width: 850px;
	position: relative;
	margin:auto;
}
-->
</style>
</head>

<body>
<div id="wrapper">
<div id="main">
<div id="zag"></div>
<div id="catalog">
<div id="test">
<ul>
<li>
<div id="cat"></div>
</li>
<li>
<div id="cat"></div>
</li>
<li>
<div id="cat"></div>
</li>
<li>
<div id="cat"></div>
</li>
</ul>
</div>
</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>

Softlink · June 25, 2011

зачем вы столько селекторов нагородили? Лучше бы присваивали каждому пункту отдельный класс. Очень плохо читается КСС.

По теме могу сказать, что попробуйте родителю, куда вкладываете флотнутые элементы, задать:

overflow:hidden

Edited June 25, 2011 by Softlink

an1401 · June 25, 2011

Прикрутил overflow:hidden тэгу UL, а тэгу LI поставил flost:left;

вроде помогло! Спасибо.

Sign In

Проблема с отображением списка

Какой браузер Вы используете?
2 members have voted

Question

an1401

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

an1401

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information

Sign In

Проблема с отображением списка

Какой браузер Вы используете? 2 members have voted

Question

an1401

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

Softlink

Link to comment

Share on other sites

an1401

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information

Какой браузер Вы используете?
2 members have voted