نحوه تغییرات در قالب ( تغییر تصویر در css )

Mr.Saraei · Sep 22, 2012

درود

دوستان من برای تغییر تصویر در CSS از این کد زیر استفاده می کنم درست هست چون اعمال نمی شه ؟؟؟

[CSSS]#volume a{
background:url(images/MRS_volume_hover.gif) no-repeat;
margin:0 0 50px 0;
}

#volume a:hover{
background:url(images/MRS_volume_hover.gif) no-repeat;
}[/CSSS]

ممنون

silverboy65 · Sep 23, 2012

باید اعمال بشه و مشکلی نداشته باشه ، احتمالا تصویر لود نمیشه ، البته الان در هر 2 صورت معمولی و hover یک عکس رو نمایش میده

آدرس دهی عکس باید نصب به محل قرار گیری فایل css باشه
مثلا اگه فایل css در فولدر style هستش ، باید اینجوری ادرس بدید

کد:

../images/image.gif

Mr.Saraei · Sep 23, 2012

درود

متاسفانه در پایین عکس ظاهر میشه

هرکاری هم می کنم روش قرار نمی گیره ... ؟؟؟

سپاس

این کدهای HTML :

[HTMLS]<!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>Mohammad Reza Saraei | Biomedical Engineer</title>
<link href="Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div id ="logo">
<img src="images/MRS_logo.gif" alt="Mohammadreza Saraei Logo | Bimedical Engineer"/>
</div>
</div>
<div class="main">
<div id ="volume">
<a target="_self" href="www.saraei.ir"><img src="images/MRS_volume.gif" alt="Music"/>
</a>
</div>
</div>
<div class="main">
<div id ="enter">
<a target="_self" href="www.saraei.ir"><img src="images/MRS_enter.gif" alt="Enter"/>
</a>
</div>
</div>
<div class="main">
<div id ="down">
<img src="images/MRS_down.gif" alt="Mohammadreza Saraei | Bimedical Engineer"/>
</div>
</div>
<div class="main">
<div id ="footer">
© Copyright Mr.Saraei 2012. All right reserved | Design by <a href="www.saraei.ir">MRS</a>
</div>
</div>
</body>
</html>

[/HTMLS]

Mr.Saraei · Sep 23, 2012

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

[CSSS]body{
background:url(images/MRS_bg.gif) no-repeat;
background-position:top center;
background-color:#000;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}

a:link{
text-decoration:blink;
color:#0C0;
}

a:hover{
color:#F00;
}

.main{
height:auto;
}

#logo{
margin:50px 0 0 400px;
}

#volume{
background:url(images/MRS_volume.gif) no-repeat;
float:right;
margin:-200px 255px 0 0;
}

#volume a:hover{
background:#FFF;
}

#enter{
float:right;
margin:-100px 310px 0 0;
}
#down{
margin:10px 0 0 180px;
}

#footer{
text-align:center;
font-size:12px;
}[/CSSS]

silverboy65 · Sep 23, 2012

الان شما از تگ img توی همون قسمت استفاده کردید ، و عکس رو دارید نمایش میدید ، همچنین دارید به همون عنصر دوباره همون عکس رو به عنوان بک گراند می دید ، برای همین hover روی اون کار نخواهد کرد

اگه می خواهید با رفتن روی اون ، بک گراند سفید بشه بهتره به #volume توی css عرض و ارتفاع بدید ( عرض و ارتفائ دقیق همون عکس ) و تگ img رو حذف کنید

اگه توضیح بیشتری بدید که می خواهید چیکار کنید + سرس به صورت آنلاین بهتر می شه راهنمایی کرد

Mr.Saraei · Sep 23, 2012

درود

ممنون حقیقتش من تضویر رو اپ می کنم من تازه با کد نویسی آشنا شدم دارم مطالعه می کنم اینجا اشکالاتم رو برطرف می کنم . من یه صفحه اینترو رو طراحی کردم براش کد نویسی کردم در تضویر سمت راست پایین دو تا دکمه وجود داره که میخ وام اونا قرار بدم در CSS فراخوانی کردم با دستور Background اما ظاهر نشدن مجبور شدم تا از تگ Img در Html استفاده کنم که دیدم ظاهر شد . می دونین علتش چی می تونه باشه ؟ بعد می خوام وقتی Hover میشه یه عکس دیگه ای روش ظاهر بشه .

اما نمیشه ...

سپاس

silverboy65 · Sep 23, 2012

علتش اینه که اون المنتتون عرض و ارتفاع نداشته ، بعد از اینکه عرض و ارتفاع دادید باید display : block هم بهش بدید تا در صفحه با عرض و ارتفاع کامل نمایش داده بشه ، البته اگر float داشته باشه block هستش

قبل از ادامه کار حتما Firebug رو روی فایر فاکس نصب کنید ، در صورتی که این اد آن نصب بود با دیدن source صفحه توی console و انتخاب اونها متوجه می شدید که المنتتون تو صفحه هیچ عرضی و ارتفاعی نداره و ...