Google
HTML Tutorial


 Forum HomeForum Home   FAQFAQ   SearchSearch   MemberlistMemberlist   RegisterRegister 
 ProfileProfile   Log in to check your private messagesLog in to check your private messages   Log inLog in 
RegisterRegister - Not registered yet? Got something to say? Join HTML Code Tutorial!
CSS Rollovers
Post new topic   Reply to topic    HTML Help Forum Index -> CSS
View previous topic :: View next topic  
Author Message
raja



Joined: 14 Jan 2006
Posts: 11
PostPosted: Sun Jan 22, 2006 12:08 am     CSS Rollovers Reply with quote
HiFriends 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.sp plzz some one teach me how to create rollovers and kindly recreate the rollovers using the same images plzz.i thinki have to use ul,li etc.. Am anovice in css.Thanks a lot.

Heres the Live Link of my css page
Click Here

Heres is my Images i used in this layout








Here my css code

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;
}


Here is My HTML.

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_19atyahoo.com" title="Mail"></a></div>
</div>
<div id="content"></div>
</div>
</body>
</html>


Thanks in Advance

cheers
Raja
Very Happy
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8316
Location: Castle Pines North, CO USA
PostPosted: Sun Jan 22, 2006 5:26 am     Reply with quote


Check out Rollover trouble
raja



Joined: 14 Jan 2006
Posts: 11
PostPosted: Sun Jan 22, 2006 8:47 am     CSS Rollovers Reply with quote
Corey Bryant i dont want javascript based roll overs can u help me regarding css based ones plz? Thanks in advance
cheers
Raja
Corey Bryant
Site Admin


Joined: 15 May 2004
Posts: 8316
Location: Castle Pines North, CO USA
PostPosted: Sun Jan 22, 2006 9:12 am     Reply with quote
Check out Uberlink CSS List Menus, otherwise check out these tutorials Listamatic: one list, many options - Using CSS and a simple list to create radically different list options
Display posts from previous:   
Post new topic   Reply to topic    HTML Help Forum Index -> CSS All times are GMT - 8 Hours
Page 1 of 1

 
Jump to:  
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
HTML Help Archive
Powered by phpBB © 2001, 2005 phpBB Group
HTML Help topic RSS feed 
 
HOSTING / DESIGN
$1.99 Domain Registration
Cheap Web Hosting
Website Templates
MAKE MONEY
Sell Domain Names
Sell Website Templates

Home   |   Tutorials   |   Forum   |   Quick List   |   Link Directory   |   About
Copyright ©1997-2002 Idocs and ©2002-2007 HTML Code Tutorial