ClioSport.net

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?
 
  Rav4
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?
 

KDF

  Audi TT Stronic
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">
 
  Rav4
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 :)
 


Top