PDA

View Full Version : سوال: عرض گزینه های منو اعمال نمیشه


css-man
جمعه 29 مهر 1390, 03:36 صبح
گزینه هایی که در منو دارم خصیصه عرض بهشون اعمال نمیشه
منو هایی که با سی اساس درست میشن
معمولا عرض رو در قسمت کلاسی که به منو مدادیم اعمال میکردیم که همه گزینه ها عرض یکسان داشته باشن ولی نمیدونم چرا هرچی به این گزینه عرض میدم اعنال نمیشه





<!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" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Untitled Document</title>
</head>

<body>
<div id="wrapper">
<div id="header">
<img src="img/Sugar cubes.png" width="128" height="91" /><img src="img/web design.png" width="128" height="80" />
</div>
<div id="menu">
<ul>
<li><a class="menu" href="#">صفحه اصلی</a></li>
<li><a class="menu" href="#">اخبار</a></li>
<li><a class="menu" href="#">گالری</a></li>
<li><a class="menu" href="#">عضویت</a></li>
<li><a class="menu" href="#">ورود</a></li>
<li><a class="menu" href="#">درباره ما</a></li>
<li><a class="menu" href="#">تماس با ما</a></li>
</ul>
</div>
</div>
</body>
</html>





@charset "utf-8";
/* CSS Document */

html,body{
margin:0px;
padding:0px;
}
#wrapper{
width:800px;
height:auto;
margin:0px auto;
min-height:700px;
border:1px solid #666;
}
#header{
width:800px;
height:100px;
background-color:#7ab300;
float:left;
}
#menu{
width:800px;
height:40px;
direction:rtl;
background-color:#2e2f2b;
float:left;

}
ul{
width:auto;
margin:0px;

}
li{
display:inline;
text-align:center;
}
a.menu{
height:30px;
border-radius:12px;
text-decoration:none;
color:#FFFFFF;
font-family:"B Nazanin";
font-size:16px;
width: 30px;
}
a.menu:hover{
background-color:#7ab300;



}
Saber Mogaddas
جمعه 29 مهر 1390, 11:02 صبح
سلام
دوست عزیز می تونی به جای


displat:inline;

از


display: inline-block;



من برات این کارو کردم..
76878

موفق باشــــــــــی..
css-man
جمعه 29 مهر 1390, 11:43 صبح
نشد بازهم عرض هر گزینه به اندازه تعداد حروف اون گزینه هست در حالی که من میخوام ماله همه به یک اندازه باشه

تو این عکسها منظورم بهتر مشخصه
76881
76882

روی دو گزینه ایکه توی دو عکس هست وقتی کلیک میشه محیط شون یه اندازه نیست
css-man
جمعه 29 مهر 1390, 15:59 عصر
اقا گسی نمیدونه درد این چیه؟

نه ارتفاع قبول میکنه و نه عرض چی کار کنم ؟؟؟؟
tux-world
جمعه 29 مهر 1390, 16:52 عصر
<div class="codropsmenu1" id="menu">
<ul>
<li><a href="" class="first"><span>Home</span></a></li>
<li><a href=""><span>About</span></a></li>
<li><a href=""><span>Portfolio</span></a></li>
<li><a href=""><span>Contact</span></a></li>
<li><a href=""><span>Support</span></a></li>
<li><a href="" class="last"><span>Login</span></a></li>
</ul>
</div>


CSS:

.codropsmenu1{
padding:3px;
height:30px;
background-color:#282828;
}
.codropsmenu1 ul{
list-style:none;
margin:0px;
padding:0px;
}
.codropsmenu1 ul li{
display:inline;
position:relative;
}
.codropsmenu1 ul li a{
float:left;
height:28px;
line-height:30px;
text-align:center;
text-decoration:none;
display:block;
background-color:#282828;
font-size:12px;
color:#DDDFDF;
text-shadow: 0 1px 0 #000000;
border-right:1px solid #000;
border-left:1px solid #404040;
border-top:1px solid #282828;
border-bottom:1px solid #282828;
outline:none;
cursor:pointer;
overflow:hidden;
}
.codropsmenu1 ul li a.last{
border-right:1px solid #282828;
}
.codropsmenu1 ul li a.first{
border-left:1px solid #282828;
}
.codropsmenu1 ul li a:hover,
.codropsmenu1 ul li a.selected{
background-color:#404040;
border-top:1px solid #111;
border-bottom:1px solid #111;
color:#fff;
}
css-man
جمعه 29 مهر 1390, 17:51 عصر
<div class="codropsmenu1" id="menu">
<ul>
<li><a href="" class="first"><span>Home</span></a></li>
<li><a href=""><span>About</span></a></li>
<li><a href=""><span>Portfolio</span></a></li>
<li><a href=""><span>Contact</span></a></li>
<li><a href=""><span>Support</span></a></li>
<li><a href="" class="last"><span>Login</span></a></li>
</ul>
</div>


CSS:

.codropsmenu1{
padding:3px;
height:30px;
background-color:#282828;
}
.codropsmenu1 ul{
list-style:none;
margin:0px;
padding:0px;
}
.codropsmenu1 ul li{
display:inline;
position:relative;
}
.codropsmenu1 ul li a{
float:left;
height:28px;
line-height:30px;
text-align:center;
text-decoration:none;
display:block;
background-color:#282828;
font-size:12px;
color:#DDDFDF;
text-shadow: 0 1px 0 #000000;
border-right:1px solid #000;
border-left:1px solid #404040;
border-top:1px solid #282828;
border-bottom:1px solid #282828;
outline:none;
cursor:pointer;
overflow:hidden;
}
.codropsmenu1 ul li a.last{
border-right:1px solid #282828;
}
.codropsmenu1 ul li a.first{
border-left:1px solid #282828;
}
.codropsmenu1 ul li a:hover,
.codropsmenu1 ul li a.selected{
background-color:#404040;
border-top:1px solid #111;
border-bottom:1px solid #111;
color:#fff;
}




این هم دقیقا همین منوی خودمه همین مشکل رو داره
ممنون از توجهتون
sanay_esh
جمعه 29 مهر 1390, 18:34 عصر
یه فایرباگ نصب کنی میتونی دلیلشو پیدا کنی به نظر من که باید با فایرباگ پیدا بشه!!!
mahdioo12194
جمعه 29 مهر 1390, 18:58 عصر
توی کد tux-world (http://barnamenevis.org/member.php?17548-tux-world) اگر width بدین درست می شه




<!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" />
<link rel="stylesheet" href="style.css" type="text/css" />
<title>Untitled Document</title>
<style type="text/css">
@charset "utf-8";
/* CSS Document */

html,body{
margin:0px;
padding:0px;
}
#wrapper{
width:800px;
height:auto;
margin:0px auto;
min-height:700px;
border:1px solid #666;
}
#header{
width:800px;
height:100px;
background-color:#7ab300;
float:left;
}
#menu{
width:800px;
height:40px;
direction:rtl;
background-color:#2e2f2b;
float:left;

}
ul{
width:auto;
margin:0px;

}
li{
display: inline-block;
height: 30px;
margin-top: 6px;
text-align: center;
width:66px;
}
a.menu{
float:right ;

height:28px;
line-height:30px;
text-align:center;
text-decoration:none;

font-size:12px;
color:#FFFFFF;

outline:none;
cursor:pointer;
overflow:hidden;
width:50px;
border-radius:12px;

}
a.menu:hover{
background-color:#7ab300;



}
</style>
</head>

<body>
<div id="wrapper">
<div id="header">
<img src="img/Sugar cubes.png" width="128" height="91" /><img src="img/web design.png" width="128" height="80" />
</div>
<div id="menu">
<ul>
<li><a class="menu" href="#">صفحه اصلی</a></li>
<li><a class="menu" href="#">اخبار</a></li>
<li><a class="menu" href="#">گالری</a></li>
<li><a class="menu" href="#">عضویت</a></li>
<li><a class="menu" href="#">ورود</a></li>
<li><a class="menu" href="#">درباره ما</a></li>
<li><a class="menu" href="#">تماس با ما</a></li>
</ul>
</div>
</div>
</body>
</html>
css-man
جمعه 29 مهر 1390, 19:53 عصر
مرسی بچه ها درست شد
مشکل از عرض ul بود که اوتو گذاشته بودم به درصد تغییر دادم درست شد
ممنون از لطف همگی
tux-world
جمعه 29 مهر 1390, 22:18 عصر
این هم دقیقا همین منوی خودمه همین مشکل رو داره
ممنون از توجهتون
من که تست کردم رو فایرفاکس مشکلی نداشت احتمالا از IE ویندوز استفاده میکنید. در این صورت بلی باید width رو به UL میدادید.
css-man
شنبه 30 مهر 1390, 02:48 صبح
روی هیچ کدوم از مرورگرهای من با اون شرایط کار نمی کرد
من از کروم استفاده میکنم
Saber Mogaddas
شنبه 30 مهر 1390, 17:35 عصر
سلام
می دونم حل شد ولی می تونید اینجوریم اعمال کنید..
76933
موفق باشی..