ClioSport.net

This is a sample guest message. Register a free account today to become a member! Once signed in, you'll be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

  • When you purchase through links on our site, we may earn an affiliate commission. Read more here.

CSS Image Rollovers

ok ive been doing this tutorial:

http://www.tutorio.com/tutorial/pure-css-image-rollovers

MY CSS PAGE:

.rollover a {

display:block;
padding:10px 10px 10px 7px;
color:#333;
background: url("button.gif") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background-position: 0 -50px;

}
.rollover a:active {
background-position: 0 -100px;

}


MY HTML PAGE:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div class="rollover">

<a href="#">Item 1</a>

</div>
</body>
</html>


Should be a simple tutorial yea? That doesnt work can anyone see an obvious answer?
 
PHP:
<!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 ISSUES</title>
<style type="text/css">
.rollover a {
 display:block;
 padding:30px 10px 10px 7px;
 color:#333;
 background: url("btn_next.png") 0 0 no-repeat;
 text-decoration: none;
}
.rollover a:hover { 
 background: url("btn_prev.png");
 background-repeat: no-repeat;
}
.rollover a:active {
 background-position: 0 -25px;
}
</style>
</head>
<body>
<div class="rollover">
<a href="#">Item 1</a>
</div>
</body>
</html>
 
Gabi! Legend mate, I totally understand the rollovers now, works a treat, however why has this page got to be a PHP page? whats PHP in it?
 
It doesnt have to be PHP, just the forum tags he used to do it..

the important bit it the bit is

<style type="text/css">
.rollover a {
display:block;
padding:30px 10px 10px 7px;
color:#333;
background: url("btn_next.png") 0 0 no-repeat;
text-decoration: none;
}
.rollover a:hover {
background: url("btn_prev.png");
background-repeat: no-repeat;
}
.rollover a:active {
background-position: 0 -25px;
}
</style>

AND

<div class="rollover">
 
that code can be simplified and tidied up, however I did not have time to do it :)

Hope it helps, rollovers that way, I believe, are the most efficient method.

Dreamweaver is really handy as an editor, but a lot of the time, using the built in functions, really makes the code un-tidy.

Now, I am not a programmer, but I can get by :)
 
Back
Top