ورود

View Full Version : سوال: اشکال تنظیمات ul li در سی اس اس


man_iran
یک شنبه 29 شهریور 1388, 19:51 عصر
سلام
وقتی برای یه قسمت از صفحه ul li لینک ها را با سی اس اس تنظیم می کنم با مشکلات زیر روبرو می شم :
شما فزض کنید می خواهیم ul li یک قسمت را کد نویسی کنیم. برای هر لینک یک عکس (آیکون) قرار می دیم که در سمت راست آن قرار گیرد. و وقتی موس بر روی آن قرار گیرد عکس (آیکون) به آیکونی دیگر تبدیل می شود برای این کار a:hover را تنظیم می کنیم.
حال مشکل: من می خوام این تغییرات در سه مرورگر اکسپلورر - موزیلا - اوپرا درست جواب بده ولی برای اینکه آیکون با لینک فاصله داشته باشه باید از پادینگ در آن استفاده کنم.
ولی اگر پادینگ را در قسمت راست تنظیم کنم در بعضی از مررورگر های گفته شده مشکل به وجود میات و فاصله حفظ نمی شه اگر هم در قسمت چپ اعمال کنم باز این مشکل در دیگر مرورگرها اتفاق می افته!!
حالا برای رفع این مشکل چه کار کنم ؟

این را در نظر بگیرید که تمام این مشکلات وقتی رخ می دهند که قالب ما rtl شده باشد
man_iran
سه شنبه 31 شهریور 1388, 08:23 صبح
من طبق گفته شما عمل کردم ولی بهتر نشد.
یه سری مشکلات هم پیش آمد!

این یه نمونه کد :


<!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=iso-8859-1" />
<title>page</title>
<style>
body {
font-family: Tahoma, Arial, sans-serif;
line-height: 1.3em;
margin: 0;
padding: 0;
font-size: 11px;
color: #999;
width: 995px;
direction:rtl;
}
#right{
margin: 0;
width: 190px;
float: right;
text-align: right;
padding: 0;
}
#right ul li a{
text-decoration: none;
color: #000000;
font-weight: normal;
font-size: 11px;
margin: 0;
}
#right ul li,#right ul li:link{
line-height: 18px;
text-decoration: none;
color: #000000;
font-weight: normal;
font-size: 11px;
background: url(pic1...) no-repeat right center;
margin: 0;
height: 10px;
padding: 0 0 0 14px;
}
#right ul li:hover{
background: url(pic2...) no-repeat right center;
}
</style>
</head>
<body>
<div id="right">
<ul>
<li><a href="www...">site</a></li (http://www...">site</a></li)>
<li><a href="www...">site</a></li (http://www...">site</a></li)>
<li><a href="www...">site</a></li (http://www...">site</a></li)>
</ul>
</div>

</body>
</html>


چطور میشه این کد را طبق گفته شما درست کرد ؟
emad_67
سه شنبه 31 شهریور 1388, 12:33 عصر
معمولا این مشکل برای ul-li همیشه هست. شما بهتره یک تگ a داخل li قرار بدی و تصویری که می گی رو در زمینه تگ a بزاری نه li. همچنین دیگه لازم نیست li:hover رو استایل دهی کنی. فقط توی a:hover تصویر زمینه رو عوض کن.
man_iran
سه شنبه 31 شهریور 1388, 18:20 عصر
معمولا این مشکل برای ul-li همیشه هست. شما بهتره یک تگ a داخل li قرار بدی و تصویری که می گی رو در زمینه تگ a بزاری نه li. همچنین دیگه لازم نیست li:hover رو استایل دهی کنی. فقط توی a:hover تصویر زمینه رو عوض کن.

می شه همین کد را طبق گفته خودتون عوض کنید.
درست متوجه نشدم!
emad_67
چهارشنبه 01 مهر 1388, 00:26 صبح
یه همچین حالتی باید باشه:


#right ul
{
margin: 0;
padding: 0;
}
#right ul li{
margin: 0;
padding: 0;
}
#right ul li a:link{
display: block;
text-align: right;
text-decoration: none;
color: #000000;
font-weight: normal;
font-size: 11px;
background: url(pic1...) no-repeat right center;
margin: 0;
height: 10px;
padding: 0 0 0 14px;
}
#right ul li a:hover{
background: url(pic2...) no-repeat right center;
}