راهنمایی در کدنویسی اچ تی ام ال

[سانای]

سلام دوستان
من سایتی با قالب جوملا2.5 دارم طراحی میکنم
sms504.ir/
اگه نگاه کنید 4 ایکن میخام قرار بدم
ولی بهم میخوره چکار کنم؟
این کدش:

کد php: (انتخاب همه)

<div id="icons-right-heder">
 
 <div id="icon1" >
 <a href="#"><img src="<?php echo $this->baseurl.'/images/icons/icon1.png'?>" alt="icon2.png" width="60" height="60" />
<div style="height:10px;color:#fff;text-decoration:none">
<b>رزومه</b></div> 
</a>
 </div><!------End icon1------>
<div id="icon2">
 <a href="#"><img src="<?php echo $this->baseurl.'/images/icons/icon2.png'?>" alt="icon2.png" width="60" height="60" />
<div style="height:10px;color:#fff;text-decoration:none">
<b>اعضای ویژه</b></div> 
</a>
 </div><!------End icon2------>
<div id="icon3">
 <a href="#"><img src="<?php echo $this->baseurl.'/images/icons/icon3.png'?>" alt="icon2.png" width="60" height="60" />
<div style="height:10px;color:#fff;text-decoration:none">
<b>محصولات</b></div> 
</a>
 </div><!------End icon3------>
<div id="icon4">
 <a href="#"><img src="<?php echo $this->baseurl.'/images/icons/icon4.png'?>" alt="icon2.png" width="60" height="60" />
<div style="height:10px;color:#fff;text-decoration:none">
<b>دوره ها</b></div> 
</a>
 </div><!------End icon4------>


  
 </div><!----End icons-right-heder-----> 


قسمت css هم برا هر ایکن این کد و نوشتم

کد php: (انتخاب همه)

height:80px;
width:90px;
float:left;
margin-left:5px;
overflow:hidden; 


درضمن میخام مثل سایت دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

باشه ک وقتی موس میره رو آیکن پس زمینه داشته باشه؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟؟/////

اگه مازولی میدونید ک این کارو انجام میده ممنون میشم لینکشو بدین
با سپاس

[صدرا حسابی]

سلام

دلیل اینکه کد آی دی آیکن 3 خونده نمی شه اینه که در این جا:

کد: (انتخاب همه)

.a{
height:60px;
width:60px;
background-image:url(/images/icons/bg-icons.jpg);
}
}
#icon3{
height:80px;
width:90px;
float:left;
margin-left:5px;
overflow:hidden;
}

بعد از اینکه کلاس a بسته شده یک } اضافه شده.

[سانای]

درسته برداشتم حل شد
ممنون
حالا چکار کنم ک وقتی موس بره رو هر آیکن پس زمینه نمایش داده شه؟؟؟
من این کد و مینویسم ج نمیده

کد php: (انتخاب همه)

#icon2 a:hover{
background-image:url(/images/icons/bg-icons.jpg);
} 


یا

کد php: (انتخاب همه)

#icon2 a:hover{
background-color:#79930c;
} 


مثل مدیر سبز؟؟؟

[صدرا حسابی]

دلیلش اینه که به جای اشتباهی دارید کد رو اعمال می کنید، و نکته دیگه سبک بودن css خیلی اهمیت داره تا جای که ممکنه کدارو کوتاه کنید و از گرو استفاده کنید، شما کدهای css که برای این 4 آیکن نوشتید رو پاک کتید و اینهارو اضافه کنید، هم hover به درستی کار می کنه و هم کدها خلاصه شدن، برای تگ ها هم چون از float:right استفاده کردم جای iconها برعکس شده و می تونید در html جابه جاشون کنید.

کد: (انتخاب همه)

#icon1, #icon2, #icon3, #icon4 {
    text-align: center;
    float: right;
    padding: 0 15px;
    margin-left: 5px;
    border: 1px solid transparent;
}
#icon1:hover, #icon2:hover, #icon3:hover, #icon4:hover {
    background: #437C00;
    border: 1px solid #69A226;
}
#icon1 div, #icon2 div, #icon3 div, #icon4 div {
    margin: -5px;
}
#icon1 a, #icon2 a, #icon3 a, #icon4 a {
    text-decoration: none !important;
}

*البته این توضیحات جنبه آموزش داشت فقط، چون چند افزونه مختلف در خود جوملا قابلیت ساخت منوی تصویری دارند.

* می تونید از طریق css3 هم کاری کنید که وقتی موس روی تصاویر رفت رنگ با افکت عوض بشه، ( #icon1, #icon2, #icon3, #icon4 ). برای تولید کد برای مرورگرهای مختلف می تونید از مولد css3 که در امضام هست و گزینه افکت اسفاده کنید.

[سانای]

ممنون همونی شد ک میخاستم
فقط میخاستم متن هم عوض شه این کد تو قسمت hover نوشتم تغییری نکرد

کد php: (انتخاب همه)

color:#99cc00; 


چجوری کادر پس زمینه و زیاد کنم ک متن هم داخل کادر باشه؟؟؟؟
بازم ممنون

[صدرا حسابی]

عکس های شما به نسبت هدرتون بزرگ هستند و تنها راهش اینه عکسها کوچکتر بشن، اول از همه برای #icon1, #icon2, #icon3, #icon4 و #icon1 a, #icon2 a, #icon3 a, #icon4 a این کدهارو جایگزین کنید:

کد: (انتخاب همه)

#icon1, #icon2, #icon3, #icon4 {
    border: 1px solid rgba(0, 0, 0, 0);
    float: left;
    margin-left: 5px;
    padding: 0 11px 20px;
    text-align: center;
    -webkit-transition: all 300ms linear;
-moz-transition: all 300ms linear;
-ms-transition: all 300ms linear;
-o-transition: all 300ms linear;
transition: all 300ms linear;
}

کد: (انتخاب همه)

#icon1 a, #icon2 a, #icon3 a, #icon4 a {
    text-decoration: none !important;
    font-size: 11px;
    font-family: tahoma;
}

و برای کوچک شدن عکس ها و تغییر رنگ در حالت هاور:

کد: (انتخاب همه)

#icon1 img, #icon2 img, #icon3 img, #icon4 img {
    width: 45px;
    height: auto;
}
#icon1:hover b, #icon2:hover b, #icon3:hover b, #icon4:hover b {
    color: #99cc00;
}

[سانای]

از لطفطتون ی دنیا ممنون
فقط ی سوال داشتم
میشه بگین این کدها برای چیه؟

کد php: (انتخاب همه)

-webkit-transition: all 300ms linear;
   -moz-transition: all 300ms linear;
   -ms-transition: all 300ms linear;
   -o-transition: all 300ms linear;
    transition: all 300ms linear; 


[صدرا حسابی]

همون طور که در بالا هم گفتم برای افکتی هست که وفتی موس روی عکس ها می ره به آرامی رنگش تغییر کنه، برای همین هم پیشنهاد دادم از مولد css3 استفاده کنید، علت اینکه چند کد هم اضافه شده سازگاری این کد با مرورگرهای مختلف هست. البته مرورگرهایی قدیمی از css3 پشتیبانی نمی کنند.

[سانای]

سلام دوستان
منویی با کد اچ تی ام ال دارم ولی وقتی موس میخاد بره رو زیر منو ، زیر منو مخفی میشه کد کجاش مشکل داره؟؟؟؟؟؟؟یعنی کجا رو اشتباه کردم
دیدن لینک ها برای شما امکان پذیر نیست. لطفا ثبت نام کنید یا وارد حساب خود شوید تا بتوانید لینک ها را ببینید.

[سانای]

حل شد تداخل در ماژول بود