Click here to get back home

Can't get the menu horizontal
 Home | NewsGroups | Search | About
Login Password
Register Now!
 comp.infosystems.www.authoring.html    Post an article   get this group's latest topics as an RSS feed add this group's latest topics to your My MSN content add this group's latest topics to your My Yahoo content
Subject Author Date
Can't get the menu horizontal ©® 07-01-2008
Posted by ©® on July 1, 2008, 4:59 pm
Please log in for more thread options
 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/test/images/test2.png

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




Posted by dorayme on July 1, 2008, 8:35 pm
Please log in for more thread options
> 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

Posted by ©® on July 1, 2008, 11:38 pm
Please log in for more thread options
> 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!



Posted by Ben Bacarisse on July 1, 2008, 8:46 pm
Please log in for more thread options

> 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.

Similar ThreadsPosted
Is it possible to keep this on the same horizontal? February 15, 2008, 1:33 pm
Is horizontal scrolling okay? December 28, 2004, 2:52 pm
Horizontal row of images... June 20, 2005, 10:04 am
Horizontal scroll to nowhere---why? October 23, 2007, 11:38 pm
prevent horizontal scrolling February 5, 2008, 10:47 pm
Vertical and Horizontal Frames that Scroll Together October 7, 2004, 5:35 pm
Always turning off horizontal scrolling in an iframe January 23, 2005, 9:36 pm
Only Vertical Scroll bar no horizontal bars August 26, 2005, 3:44 am
question about horizontal scrollbar in frames August 11, 2006, 4:00 am
Horizontal CSS list, last entry right-aligned? April 11, 2008, 3:01 pm

Our other projects:

Art Dolls, Fairies and Mermaids - Sunnyfaces.net

Roy's Linux, Programming and Search Engines messages

1-Script XML SitemapXML Sitemap