CSS Roll overs Help plzz

[Prince]

Hi Friends i made this roll overs using 2 images btn1 and btn_f1.am herewith enclosing all the button images ihaveused in this layout rollovers.I Always in Doubt that am making rollovers using images in a wrongway. so plzz some one kindly teach me how to use the rollovers with css using the images plzz. I think i have to use ul,li etc???.. Am a novice in css plzz help me.Thanks in advance.

[b]Heres the Live Link of my css page[/b]
[url=\"http://www.ddotcom.com/raja.html\"]Click Here[/url]

[b]Heres is my Images i used in this layout[/b]

[img]http://img39.imageshack.us/img39/7536/btn17ov.jpg[/img]
[img]http://img39.imageshack.us/img39/8337/btn1f26jt.jpg[/img]
[img]http://img39.imageshack.us/img39/1820/home4aw.jpg[/img]
[img]http://img17.imageshack.us/img17/3158/homef24yi.jpg[/img]
[img]http://img17.imageshack.us/img17/3959/mail1os.jpg[/img]
[img]http://img17.imageshack.us/img17/4738/mailf28cy.jpg[/img]

[b]Here my css code[/b]

[quote]#header {
width: 758px;
height: 152px;
background-color: #FFFFFF;
}
#navbar {
width: 758px;
height: 31px;
}
#content {
background-color: #996600;
height: 250px;
width: 758px;
}

#wrapper {
width: 758px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding-left: 0.01em;
}
body {
font-size: 10px;
color: #333;
background-color: #c2b6a8;
font-family: "Trebuchet MS", Arial, sans-serif;
background-image: url(../images/bg.jpg);
margin: 0px;
padding: 0px;

}

h2 {
color: #999999;
font-size: 1.6em;
}
#home1{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial,

helvetica sans-serif;
height: 31px;
width: 29px;
float: left;


}
#home1 a {
background-image: url(../images/home.jpg);
background-repeat: no-repeat;
height: 31px;
width: 29px;
background-position: 0px 0px;
display: block;
font: normal bold 9px tahoma, trebuchet ms, verdana, arial,

helvetica sans-serif;
}
#home1 a:hover{
background-image: url(../images/home_f2.jpg);
background-repeat: no-repeat;
background-position: 0px 0px;
}



#home{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#home a {
background-image: url(../images/btn1.jpg);
background-repeat: no-repeat;
height: 31px;
width: 87px;
display: block;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;
;
}
#home a:hover{
background-image: url(../images/btn1_f2.jpg);
background-repeat: no-repeat;
color: #000000;
font-size: 10px;
font-weight: bold;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;
}
#portfolio{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#portfolio a{
background-image: url(../images/btn1.jpg);
background-repeat: no-repeat;
height: 31px;
width: 87px;
display: block;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;
}
#portfolio a:hover{
background-image: url(../images/btn1_f2.jpg);
background-repeat: no-repeat;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;
}
#forum{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#forum a{
background-image: url(../images/btn1.jpg);
background-repeat: no-repeat;
height: 31px;
width: 87px;
display: block;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;
}
#forum a:hover{
background-image: url(../images/btn1_f2.jpg);
background-repeat: no-repeat;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;
}
#templates{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#templates a{
background-image: url(../images/btn1.jpg);
background-repeat: no-repeat;
height: 31px;
width: 87px;
display: block;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}
#templates a:hover{
background-image: url(../images/btn1_f2.jpg);
background-repeat: no-repeat;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}
#tutorials{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#tutorials a{
background-image: url(../images/btn1.jpg);
background-repeat: no-repeat;
height: 31px;
width: 87px;
display: block;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}
#tutorials a:hover{
background-image: url(../images/btn1_f2.jpg);
background-repeat: no-repeat;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}

#flash{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#flash a{
background-image: url(../images/btn1.jpg);
background-repeat: no-repeat;
height: 31px;
width: 87px;
display: block;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}
#flash a:hover{
background-image: url(../images/btn1_f2.jpg);
background-repeat: no-repeat;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}
#graphics{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#graphics a{
background-image: url(../images/btn1.jpg);
background-repeat: no-repeat;
height: 31px;
width: 87px;
display: block;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}
#graphics a:hover{
background-image: url(../images/btn1_f2.jpg);
background-repeat: no-repeat;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}
#feedback{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
}
#feedback a{
background-image: url(../images/btn1.jpg);
background-repeat: no-repeat;
height: 31px;
width: 87px;
display: block;
font-size: 10px;
font-weight: bold;
color: #FFFFFF;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}
#feedback a:hover{
background-image: url(../images/btn1_f2.jpg);
background-repeat: no-repeat;
font-size: 10px;
font-weight: bold;
color: #000000;
text-decoration: none;
font-family: "Trebuchet MS", Arial, sans-serif;

}
#mai{
font: normal bold 9px tahoma, trebuchet ms, verdana, arial,

helvetica sans-serif;
height: 31px;
width: 33px;
float: left;

}
#mai a {
background-image: url(../images/mail.jpg);
background-repeat: no-repeat;
height: 31px;
width: 33px;
display: block;
}
#mai a:hover{
background-image: url(../images/mail_f2.jpg);
background-repeat: no-repeat;
}[/quote]

[b]Here is My HTML.[/b]

[quote]<!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>Css</title>
<link href="css/raja.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header"></div>
<div id="navbar">
<div id="home1"><a href="home.htm" title="home"></a></div>
<div id="home">
<div align="center" ><a href="home.htm" title="home"

>Home</a></div>
</div>
<div id="portfolio">
<div align="center"><a href="portfolio.htm"

title="Portfolio" >Portfolio</a></div>
</div>
<div id="forum">
<div align="center"><a href="forum.htm"

title="forum" >Forum</a></div>
</div>
<div id="templates">
<div align="center"><a href="templates.htm"

title="templates" >Templates</a></div>
</div>
<div id="tutorials">
<div align="center"><a href="tutorials.htm"

title="tutorials" >Tutorials</a></div>
</div>
<div id="flash">
<div align="center"><a href="flash.htm"

title="flash" >Flash</a></div>
</div>
<div id="graphics">
<div align="center"><a href="graphics.htm"

title="graphics" >Graphics</a></div>
</div>
<div id="feedback">
<div align="center"><a href="feedback.htm"

title="feedback" >Feedback</a></div>
</div>
<div id="mai"><a href="mailto:raja_web_19@yahoo.com"

title="Mail"></a></div>
</div>
<div id="content"></div>
</div>
</body>
</html>[/quote]

Thanks in Advance

cheers
Raja /biggrin.gif\' class=\'bbc_emoticon\' alt=\':D\' />

[us3rX]

Maybe i dont understand what your talking about... but when i goto the site, the mouse overs work for me, the only thing that looks out of place is the text on the buttons. if you add [b]padding: Zpx;[/b] to the css for
home, like so;

[code]#home{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
padding: Zpx;
}[/code]

just replace \"Z\" with some number... try like 5px first then see how far down the text is, if you need more add more... need less make the number smaller... o.0

us3rX /ph34r.gif\' class=\'bbc_emoticon\' alt=\':ph34r:\' />

[Prince]

[quote name=\'us3rX\' post=\'31322\' date=\'Jan 23 2006, 11:48 PM\']Maybe i dont understand what your talking about... but when i goto the site, the mouse overs work for me, the only thing that looks out of place is the text on the buttons. if you add [b]padding: Zpx;[/b] to the css for
home, like so;

[code]#home{
font: bold normal 10px;
height: 31px;
width: 87px;
float: left;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, sans-serif;
font-size: 10px;
font-weight: bold;
padding: Zpx;
}[/code]

just replace "Z" with some number... try like 5px first then see how far down the text is, if you need more add more... need less make the number smaller... o.0

us3rX /ph34r.gif\' class=\'bbc_emoticon\' alt=\':ph34r:\' />[/quote]

Thanks a lot us3rX for ur prompt reply. what i wanted to know is is it the correct way of making css rollovers using images? or else i should use <ul><li> ?

[us3rX]

well it just depends on the person, but yeah there might be a \"cleaner\" way of doing but, but your way works just fine.

us3rX /ph34r.gif\' class=\'bbc_emoticon\' alt=\':ph34r:\' />

[Scott]

There is no \"right\" way to do this. Yes, it could be done using lists, but do you really want to change it all when it\'s working fine? Your version is compliant to xhtml standard, which is more than can be said for many websites out there. /good.gif\' class=\'bbc_emoticon\' alt=\'(Y)\' />