سوال: تنظیم منو آبشاری [بایگانی]

ehsan-usr

چهارشنبه 03 خرداد 1391, 16:04 عصر

سلام خدمت دوستان.
من یه منو دارم که به صورت آبشاری هست. اما یه مشکل داره که ایتم های منو خیلی به هم چسبیدن و از هم فاصله ندارن. برای اینکار نمیدونم چه چیز رو تغییر بدم.margin-left تو قسمت css رو هم تغیرر دادم اما فرق نکرد.

#navigation ul li
{display:inline; height:30px; float:left; list-style:none;margin-left:22px;}

کد کامل منو ساخته شده با css هم این هست.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>Insert title here</title>
<style type="text/css">

#navigation{
width:70%;
height:30px;
background-color:#999;
margin-left:150px;
}

#navigation ul
{margin:0px; padding:0px;}

#navigation ul li
{display:inline; height:30px; float:left; list-style:none;margin-left:22px;}
#navigation li a
{color:#fff; text-decoration:none;}

#navigation li a:hover
{text-decoration:underline;}

#navigation li ul
{
margin:0px;
padding:0px;
display:none;
}

#navigation li:hover ul
{
display:block;
width:160px;
}

#navigation li li
{
list-style:none;
display:list-item;
width:100%;
}
#navigation ul li
{
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
position:relative;
}
#navigation li ul
{
margin:0px;
padding:0px;
display:none;
position:absolute;
left:0px;
top:20px;
background-color:#999;
}
#navigation li li a
{color:#fff; text-decoration:none;}

#navigation li li a:hover
{text-decoration:underline;}
</style>
</head>
<body>
<div id="navigation">
<ul>
<li><a href="">Television</a>

<ul> <li><a href="">Sony</a></li>
<li> <a href="">Samsung</a></li>
<li><a href="">LG</a></li>
<li><a href="">Panasonic</a></li>
</ul>
</li>

<li><a href="">LapTop</a>

<ul> <li><a href="">Dell</a></li>
<li><a href="">Sony</a></li>
<li><a href="">Asus</a></li>
<li><a href="">Toshiba</a></li>
</ul>
</li>

<li><a href="">Mobile </a>
<ul> <li><a href="">Nokia</a></li>
<li><a href="">Sonyericson</a></li>
<li><a href="">Samsung </a></li>
</ul>
</li>

<li><a href="">Camera</a>
<ul> <li> <a href="">Canon</a></li>
<li><a href="">Sony</a></li>
<li><a href="">Nikon </a></li>
</ul>
</li>
</ul>

</div>
</body>
</html>

Saber Mogaddas

چهارشنبه 03 خرداد 1391, 17:18 عصر

سلام
من مقدار margin-left رو زیاد کردم فاصله گرفت مشکلی نبود ..منظور شما کجای منو هست ؟

ehsan-usr

پنج شنبه 04 خرداد 1391, 00:02 صبح

سلام
من مقدار margin-left رو زیاد کردم فاصله گرفت مشکلی نبود ..منظور شما کجای منو هست ؟

منظورم اینه که فاصله ایتم های Television و Laptop و mobile و camera بیشتر بشه. من مقدار margin-left رو بیشتر از 22px کردم و هیچ تغییری نکرد.
و حالا این کارو انجام دادم و فاصله ها بهتر شده. اما نمیدونم این کار درسته یا نه

#navigation ul li
{display:inline; height:30px; float:left; list-style:none;margin-left:22px; padding-left:20px; padding-right:100px; }

Saber Mogaddas

پنج شنبه 04 خرداد 1391, 09:53 صبح

سلام
کار که درسته ولی اگه دقت کنید این selector : #navigation ul li همه li های منو رو دربر می گیره و به همش margin-left میده ..شما باید برای به هم نریختن زیر منوها یه selector نیز برای li های زیر منو قرار بدید مثل #navigation ul ul li و در استایل این selector :margin-left رو تنظیم کنید..
موفق باشی..