ورود

View Full Version : یک مشکل با منو li


Gold_cpp
پنج شنبه 17 فروردین 1391, 10:27 صبح
سلام
میخوام برای عرض 535px یک منو بسازم !(دقیقا همین اندازه)خوب این رو ساختم و مشکلی ندارم
مشکل من از جایی شروع مبشه که میخوام زیر منو رو بسازم ، عرض زیر منو بیشتر از همون لینکی از منو که hover میکنم است و این زیاد بودن عرض زیر منو بر روی خود منو اصلی تاثیر میگذارد و اندازه اون رو بهم میزنه باید چکار کنم که عرض منوی اصلی من تغییری نکند !؟؟


<!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>Untitled Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
}
div.mnu{
width:535px;/*width:535px;*/
height:40px;
outline:1px solid red;
overflow:visible;
}
div.mnu ul{
list-style-type:none;
}
div.mnu li{
float:left;
cursor:auto;
background-image:url(MenuSplitter_2.png), url(bg-menu.png);
background-repeat:no-repeat, repeat-x;
}
div.mnu li ul{
outline:1px solid red;
}
div.mnu li li{
float:none;
}
div.mnu li:hover > a{
text-shadow:1px 1px 5px green;
}
div.mnu a{
display:block;
text-decoration:none;
padding:10px 26px;
color:dimGray;
text-decoration: none;
font-size: 9pt;
font-family:Tahoma, Geneva, sans-serifl
}
</style>
</head>
<body>
<div class="mnu">
<ul>
<li><a href="#">امکانات</a></li>
<li><a href="#">پژوهش</a></li>
<li><a href="#">آموزشی</a></li>
<li><a href="#">اساتید</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#" style="padding-left:10px;padding-right:10px;">صفحه اصلی</a>
<ul>
<li><a href="#">پورتال دانشجویی</a></li>
<li><a href="#">پورتال اساتید</a></li>
<li><a href="#">نگارش فنی</a></li>
</ul>

</li>
</ul>
</div>
</body>
</html>
Gold_cpp
پنج شنبه 17 فروردین 1391, 18:54 عصر
و همچنان منتظر جواب ... !
hamid_shrk
پنج شنبه 17 فروردین 1391, 19:07 عصر
زیاد متوجه نشدم چی میخواید ولی این رو هم به css تون اضافه کنید.

div.mnu li ul li a
{
padding:0;
}
Gold_cpp
پنج شنبه 17 فروردین 1391, 20:36 عصر
همون اول این اعمال شده است



*{
padding:0;
margin:0;
}
hamid_shrk
پنج شنبه 17 فروردین 1391, 20:42 عصر
همون اول این اعمال شده است



*{
padding:0;
margin:0;
}

بله ولی اگه با فایرباگ چک کنید اعمال نشده.چون اولویت با اینیکیه


div.mnu a{ display:block; text-decoration:none; padding:10px 26px; color:dimGray; text-decoration: none; font-size: 9pt; font-family:Tahoma, Geneva, sans-serifl }

دستوری که گذاشتم چک کردید؟
ariyadownload
پنج شنبه 17 فروردین 1391, 20:50 عصر
سلام
منظور این دوستمون این هست که وقتی تویه زیر منو هر متنی نوشت عرض یا همون width تغییر کنه و ثابت نباشه
این هم کد رفع مشکل

کاملش رو از اول نوشتم :d فایل اتچ شد
Gold_cpp
پنج شنبه 17 فروردین 1391, 21:07 عصر
دوستان مشکلم حل شد این هم کد کامل با راهنمایی های دوستمون ariyadownload


<!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>Untitled Document</title>
<style type="text/css">
*{
padding:0;
margin:0;
direction:rtl;
}
div.mnu{
width:535px;/*width:535px;*/
height:40px;
overflow:visible;
outline:1px solid red;
}
div.mnu ul{
list-style-type:none;
}
div.mnu ul > li{
float:left;
cursor:auto;
background-image:url(MenuSplitter_2.png), url(bg-menu.png);
background-repeat:no-repeat, repeat-x;
position:relative;
}
div.mnu li ul{
outline:1px solid red;
display:none;
position:absolute;
}
div.mnu li li{
background:url(bg-menu.png) repeat-x;
float:none;
}
div.mnu li ul a{
white-space:nowrap;
}
div.mnu li:hover > a{
text-shadow:1px 1px 5px green;
}
div.mnu li:hover ul {
display:block;
}
div.mnu a{
display:block;
text-decoration:none;
padding:13px 24px;
color:dimGray;
text-decoration: none;
font-size: 9pt;
font-family:Tahoma, Geneva, sans-serifl
}
</style>
</head>
<body>
<div class="mnu">
<ul>
<li><a href="#">امکانات</a></li>
<li><a href="#">پژوهش</a></li>
<li><a href="#">آموزشی</a></li>
<li><a href="#">اساتید</a></li>
<li><a href="#">خدمات</a></li>
<li><a href="#">صفحه اصلی</a>
<ul>
<li><a href="#">پورتال دانشجویی</a></li>
<li><a href="#">پورتال اساتید</a></li>
<li><a href="#">نگارش فنی</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>



دستوری که گذاشتم چک کردید؟

بله با این کار درست میشه منتهای امر اینکه زیر منو بهم میریزه
کد Ariya رو یک نگاه بنداز متوجه میشید :X