Can't get the menu horizontal

[©®]

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/t...ages/test2.png

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

[dorayme]

In article <g4**********@aioe.org>, "©®" <n0**@n0ne.comwrote:

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:

Here is something from the dorayme dirty tricks factory which is open
this morning for the next few minutes:

Try

<p style="float: left;"><a id="gallery" href="#"
title="Gallery"><span>Gallery</span></a></p>

<p style="float: left;margin-top: -5px"><a id="contact" href="#"
title="Contact"><span>Contact
us</span></a></p>

<p style="clear:left;"><font face="'Lucida Sans Unicode', Tahoma,
Verdana, Verdana, Arial, Helvetica, sans-serif" size="-1">Lorem....

--
dorayme

[Ben Bacarisse]

"©®" <n0**@n0ne.comwrites:

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.

You need to find another tutorial, this time about menus. The usual
method is to float each item left.

--
Ben.

[©®]

Try

>
<p style="float: left;"><a id="gallery" href="#"
title="Gallery"><span>Gallery</span></a></p>

<p style="float: left;margin-top: -5px"><a id="contact" href="#"
title="Contact"><span>Contact
us</span></a></p>

<p style="clear:left;"><font face="'Lucida Sans Unicode', Tahoma,
Verdana, Verdana, Arial, Helvetica, sans-serif" size="-1">Lorem....

Thanks very much - it worked!