How to float 2 image hyperlinks on same line

[AdRock]

I have an image that i have created for a next button and a previos button.

I would like them on the same line but opposite ends of the div but all i have got it to do is move to opposite sides but not on the same line.

What am I doing wrong?

CSS

Code: Select all

 
#page .left {
   float: left;
}
#page .right {
   float: right;
}

HTML

Code: Select all

 
<div id="page">
    <a href="helmet.htm"><img class="prev" src="../images/prev1.png" alt="Previous" /></a>
    <span  class="right"><a href="lorica.htm"><img src="../images/next1.png" alt="Next" /></a></span>
 </div>

[AdRock]

All fixed now.....duh!!

[karinne]

And how did you fix it?

[AdRock]

Like this

Code: Select all

 
<div id="page">
    <a href="jars.htm"><img class="left" src="../images/prev1.png" alt="Previous" /></a>
    <span class="right"><a href="coffin.htm"><img src="../images/next1.png" alt="Next" /></a></span>
 </div>

Code: Select all

 
.left {
   float: left;
}
.right {
   float: right;
}

[AdRock]

BTW is there a way you can use 2 images (1 for rollover) without using Javascript?

I have 2 of the same image but don't know how to have it so it displays the other image on hover

[karinne]

Of course! Pure CSS rollovers without Javascript

[masonbarge]

CSS pseudo-classes such as hover, visited, and active give you javascript-type control. All you can do is change the css, but since you just want a to change appearance . . . '

The most efficient way to do it is to make a button in CSS and then change the border, color, etc. on hover. You can do a good 3D rollover with this.

If you want an image, just set the background to the image with repeat-no, then change the image with pseudo-classes.

You can do both javascript and css on the same button, say for example if you want a popup window if the browser has js, and a link to the window url if he doesn't. The js "this.class" will take precedence over the pseudo-class.