CSS Roll overs Help plzz

Get Help With All Aspects of Web Design & Design Software

Moderators: Moderator, Global Moderator

Post Reply
Prince
Newbie
Newbie
Posts: 2
Joined: Sun Jan 22, 2006 7:55 pm

CSS Roll overs Help plzz

Post by 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 <img src=\'http://www.killanet.net/forum3/public/s ... iggrin.gif\' class=\'bbc_emoticon\' alt=\':D\' />
Last edited by Prince on Mon Jan 23, 2006 5:59 pm, edited 1 time in total.
Top
us3rX
Hero Member
Hero Member
Posts: 1194
Joined: Thu May 06, 2004 6:11 am

CSS Roll overs Help plzz

Post by 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 <img src=\'http://www.killanet.net/forum3/public/s ... /ph34r.gif\' class=\'bbc_emoticon\' alt=\':ph34r:\' />
Last edited by us3rX on Mon Jan 23, 2006 6:23 pm, edited 1 time in total.
[align=center]

Image

"Time is never wasted, when your wasted all the time" ~ Radio Dj/Unknown Source

"Death is the inevitable end to the suffering of the living." ~Unknown

"You were born an original. Don't die a copy" ~Murdoc Niccals

[/align]
Top
Prince
Newbie
Newbie
Posts: 2
Joined: Sun Jan 22, 2006 7:55 pm

CSS Roll overs Help plzz

Post by 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 <img src=\'http://www.killanet.net/forum3/public/s ... /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> ?
Top
us3rX
Hero Member
Hero Member
Posts: 1194
Joined: Thu May 06, 2004 6:11 am

CSS Roll overs Help plzz

Post by 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 <img src=\'http://www.killanet.net/forum3/public/s ... /ph34r.gif\' class=\'bbc_emoticon\' alt=\':ph34r:\' />
[align=center]

Image

"Time is never wasted, when your wasted all the time" ~ Radio Dj/Unknown Source

"Death is the inevitable end to the suffering of the living." ~Unknown

"You were born an original. Don't die a copy" ~Murdoc Niccals

[/align]
Top
Scott
Administrator
Administrator
Posts: 1651
Joined: Sun Apr 25, 2004 1:08 pm

CSS Roll overs Help plzz

Post by 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. <img src=\'http://www.killanet.net/forum3/public/s ... >/good.gif\' class=\'bbc_emoticon\' alt=\'(Y)\' />
Top
Post Reply

Return to “Web Design Principles”