Aligning Links

[Genie1]

Hi CDF Team,

I have been trying to do some hover buttons,

This is how it looks:

http://img132.imageshack.us/img132/7709/vhgk2.gif

The left(blue background) is what i want but i want it to be listed horizontally not vertical.

My CSS code


#homeBT {
background-image: url(images/hoverbt.gif);
background-repeat: no-repeat;
height: 28px;
width: 100px;
color: #FFFFFF;
font-weight:bold;
}

#homeBT a{
background-image:url(images/hoverbtN.gif);
background-repeat: no-repeat;
height: 28px;
width: 100px;
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 3px 0px 6px 12px;
}

#homeBT a:hover{
background: none;
}

#aboutusBT {
background-image: url(images/hoverbt.gif);
background-repeat: no-repeat;
height: 28px;
width: 100px;
color: #FFFFFF;
font-weight:bold;
}

#aboutusBT a{
background-image:url(images/hoverbtN.gif);
background-repeat: no-repeat;
height: 28px;
width: 100px;
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 3px 0px 6px 12px;
}

#aboutusBT a:hover{
background: none;
}

#contactusBT {
background-image: url(images/hoverbt.gif);
background-repeat: no-repeat;
height: 28px;
width: 100px;
color: #FFFFFF;
font-weight:bold;
}

#contactusBT a{
background-image:url(images/hoverbtN.gif);
background-repeat: no-repeat;
height: 28px;
width: 100px;
display: block;
text-decoration: none;
color: #FFFFFF;
padding: 3px 0px 6px 12px;
}

#contactusBT a:hover{
background: none;
}


My HTML code:


<div id="homeBT">
<a href="index.html" title="Home" target="_self">Home</a>
</div>
<div id="aboutusBT">
<a href="aboutus.html" title="About us" target="_self">About Us</a>
</div>
<div id="contactusBT">
<a href="contactus.html" title="Contact us" target="_self">Contact us</a>
</div>


Thank you for helping out.

Thank you

[GardenGnome2]

Use the 'display:inline;' property. This will allow your divs to go horizontal.

PS: You should use an unordered list,<ul>, to create a menu

[Excavator]

Hello Genie1,
It looks like a float:left; will make those divs into a horizontal menu.

A lot of people here will tell you to make that a list but it doesn't really have to be. (http://www.cssplay.co.uk/menus/tutorial.html)
There is also no need for those 3 links to be in their own div. It's really easy to get divitis (google divitis (http://www.google.com/custom?q=divitis&sa.x=0&sa.y=0&safe=active&client=pub-3794288947762788&forid=1&channel=1975384696&ie=UTF-8&oe=UTF-8&hl=en&cof=GALT%3A%23008000%3BGL%3A1%3BDIV%3A%23336699%3BVLC%3A663399%3BAH%3Acenter%3BBGC%3AFFFFFF%3BLBGC%3 A336699%3BALC%3A0000FF%3BLC%3A0000FF%3BT%3A000000%3BGFNT%3A0000FF%3BGIMP%3A0000FF%3BFORID%3A1)). It works just as well to float the links, all three in one div, instead.

[Genie1]

Hello Team,

Thank you for a quick response and for useful info, for some reason the 'display:inline; . Did not do the trick but the float:left; did, however thank you for helping out. Regarding using UList but at this moment of time i am not to sure on how i will do that, at this moment of time i have just about learn t HTML.

I am learning CSS little by little.


Thank you for info,

Have a good day.

[Excavator]

Regarding using UList but at this moment of time i am not to sure on how i will do that, at this moment of time i have just about learn t HTML.

Please look at that link I gave you. It will help. A lot.

[jerry62704]

Just an FYI. The inline should work, but it's not important to work on now. The difference between the two (inline v. float) is the float keeps it as a block. That allows you to have a width to it. You might want all the menu choices the same width for example. Further, it allows a link to extend the entire width, not just the word in the link.