Can't get the menu horizontal

Question posted by: ©® (Guest) on July 1st, 2008 09:05 PM

I am trying a CSS rollover tutorial
(http://www.elated.com/articles/css-rollover-buttons/) and it is working
nicely but I can't get it
to be horizontal.

My CSS looks like this:
---
#gallery
{
display: block;
width: 48px;
height: 48px;
background: url("images/rollovers/gallery.gif") no-repeat 0 0;
}

#gallery:hover
{
background-position: 0 -48px;
}

#gallery span
{
display: none;
}

#contact
{
display: block;
width: 48px;
height: 48px;
background: url("images/rollovers/contact.gif") no-repeat 0 0;
}

#contact:hover
{
background-position: 0 -48px;
}

#contact span
{
display: none;
}
---

and my html looks like this:
---
<p>
<a id="gallery" href="#" title="Gallery"><span>Gallery</span&g
t;</a>
<br>
<a id="contact" href="#" title="Contact"><span>Contact us</span></a>
</p>
---


Here is a test link:
http://www.flipside.co.uk/~cwlinde/test/test.html but I want the buttons
to the left and right of each other - not on top of each other, like
this:
http://www.flipside.co.uk/~cwlinde/...mages/test2.png

The solution's most probably staring me right in the face but I am
stuck! Help!

Not the answer you were looking for? Post your question . . .
190,473 Experts ready to help you find a solution.
Sign up for a free account, or Login (if you're already a member).