HTML & CSS help - Categories Box / Link Positioning?

[choviohoya]

I'm currently trying to create a categories box, in this there will be links to the specified categories, HOWEVER, I have hit a road block and have been stuck on a CSS problem for quite some time today, this being the display of the links.

I wish for the box to look something like the categories box Yahoo! Answers has, it is where I got my inspiration from, I have created a nice little box with a graphic shadow and title etc ONLY PROBLEM?
The links are everywhere and not inline, if you look at the categories box on Yahoo! Answers, you will see that they are all inline going downwards A-Z and then in 4 sections, whereas mine, are everywhere in the box and are not inline and instead going horizontal rather than vertical.

Any help with this?


I currently have my 'simple' css and html coding like this.


HTML:

<div id="home_categories">
<h3>Categories</h3>

<a href=''>Arts & Humanities</a>
<a href=''>Beauty & Style</a>
<a href=''>Business & Finance</a>
<a href=''>Cars & Transportation</a>
<a href=''>Computers & Internet</a>
<a href=''>Consumer Electronics</a>
<a href=''>Dining Out</a>
<a href=''>Education & Reference</a>
<a href=''>Entertainment & Music</a>
<a href=''>Environment</a>
<a href=''>Family & Relationships</a>
<a href=''>Food & Drink</a>
<a href=''>Games & Recreation</a>
<a href=''>Health</a>
<a href=''>Home & Garden</a>
<a href=''>Local Businesses</a>
<a href=''>News & Events</a>
<a href=''>Pets</a>
<a href=''>Politics & Government</a>
<a href=''>Pregnancy & Parenting</a>
<a href=''>Science & Mathematics</a>
<a href=''>Social Science</a>
<a href=''>Society & Culture</a>
<a href=''>Sports</a>
<a href=''>Travel</a>
<a href=''>Websites</a>
<a href=''>Other</a>

<br><br><br>
</div>


CSS:

#home_categories { position:relative; top:25px; left:25px; border-style:solid; border-width:1px; border-color:#B8B8B8; width:650px; min-height:100px; background-image:url('/images/categories… background-repeat:repeat-x; }
#home_categories h3 { position:relative; top:10px; left:15px; font-size:18px; font-weight:bold; color:#000000; }
#home_categories a { position:relative; top:30px; left:10px; margin-bottom:5px; font-size:12px; margin-right:25px; display:inline; }
#home_categories a:link { color:#247cd4; text-decoration:none; }
#home_categories a:visited { color:#247cd4; text-decoration:none; }
#home_categories a:active { color:#247cd4; text-decoration:none; }
#home_categories a:hover { color:#247cd4; text-decoration:underline; }



Best Answer = Fixing it or at least sending me on my way to fixing it. Many thanks, I hope to help others so if you help me, feel free to post a link to your question(s). Thanks again!

-Liam

[gerard]

If I were you, I would wrap those links in a <ul> and put each <a> in a <li>. Then you can set the height and width of the list items in CSS to keep them uniform.

On a side note, you have a lot of extra CSS that you do not need on the links. It could be a bit cleaner if you include the color and text-decoration rules in the "#home_categories a" rule. Then you won't need the a:link, visited, and active rules and in the a:hover rule you will only need the text-decoration:underline; rule.

If you do use a <ul>, all the position and margin rules on the links will need to be removed too.

If all else fails, just look at the source code for the categories on Yahoo Answers and see how they set it up in the HTML and CSS.

Hope that helps