Switch Table Menu into CSS

[redndahead]

I'm new to css and I'm trying to Switch a table menu I have to css. Here is the menu:

<table>
<tr>
<td valign="top">
<a href="/index.php?reference_index=1" title="Home"><img src="./default_images/link_icons/places/home.png" alt="Home" /><br />Home</a>
</td>
<td>
&nbsp;
</td>
<td valign="top">
<a href="/faq.php?reference_index=1" title="FAQs"><img src="./default_images/link_icons/apps/help-browser.png" alt="FAQs" /><br />FAQs</a>
</td>
<td valign="top">
<a href="/index.php?reference_index=2" title="Microsoft Campus Agreement (MCCA)"><img src="./default_images/link_icons/other/windows.png" alt="Microsoft Campus Agreement (MCCA)" /><br />Microsoft Campus Agreement (MCCA)</a>
</td>
<td valign="top">
<a href="/index.php?reference_index=3" title="Work At Home"><img src="./default_images/link_icons/actions/go-home.png" alt="Work At Home" /><br />Work At Home</a>
</td>
<td valign="top">
<a href="/index.php?reference_index=4" title="Licensing"><img src="./default_images/link_icons/actions/format-justify-fill.png" alt="Licensing" /><br />Licensing</a>
</td>
<td valign="top">
<a href="/index.php?reference_index=5" title="Personal Use Software"><img src="./default_images/link_icons/devices/media-cdrom.png" alt="Personal Use Software" /><br />Personal Use Software</a>
</td>
<td valign="top">
<a href="/index.php?reference_index=6" title="Accessibility"><img src="./default_images/link_icons/apps/preferences-desktop-accessibility.png" alt="Accessibility" /><br />Accessibility</a>
</td>
</tr>
</table>

The part i'm having a difficulty with is how I can create multiple rows and still line it up horizontally.

So I want

img img2 img3
centered text centered text 2 centered text 3


Thanks for any help.

Adam

[KDLA]

You use inline lists to do that. Below is an example. You may need to play with these values.
CSS

ul.nav {margin: 0; padding: 0;}
ul.nav li {display: inline; width: ###px; height: ####px; list-style-type: none; margin: 0; padding: 0; text-align: center;}

HTML

<ul class="nav">
<li><a href="/index.php?reference_index=1" title="Home"><img src="./default_images/link_icons/places/home.png" alt="Home" /><br/>Text</a>
</li>
<li><a href="/faq.php?reference_index=1" title="FAQs">
<img src="./default_images/link_icons/apps/help-browser.png" alt="FAQs" />
<br/>Text
</a>
</li>
<li>
<a href="/index.php?reference_index=2" title="Microsoft Campus Agreement (MCCA)"><img src="./default_images/link_icons/other/windows.png" alt="Microsoft Campus Agreement (MCCA)" /><br/>Text
</a>
</li>
<li>
<a href="/index.php?reference_index=3" title="Work At Home">
<img src="./default_images/link_icons/actions/go-home.png" alt="Work At Home" /><br/>Text</a>
</li>
<li>
<a href="/index.php?reference_index=4" title="Licensing"><img src="./default_images/link_icons/actions/format-justify-fill.png" alt="Licensing" /><br/>Text</a>
</li>
<li>
<a href="/index.php?reference_index=5" title="Personal Use Software"><img src="./default_images/link_icons/devices/media-cdrom.png" alt="Personal Use Software" /><br/>Text</a>
</li>
<li>
<a href="/index.php?reference_index=6" title="Accessibility">
<img src="./default_images/link_icons/apps/preferences-desktop-accessibility.png" alt="Accessibility" /><br/>Text</a>
</li>
</ul>

[redndahead]

Thanks for the help.

When I try this the <br /> in the list keeps them from lining up horizontally. Any idea of how to get this fixed?

[ray326]

text-align:center

[KDLA]

text-align:center
That's what I had in the CSS in the previous post -- did that not work?

Usability Note: Really, you might reconsider using images AND text as your list elements. It might be better to use the images as background images.

KDLA

[ray326]

That's what I had in the CSS in the previous postDoh! Didn't scroll it to see.

[redndahead]

That's what I had in the CSS in the previous post -- did that not work?

Usability Note: Really, you might reconsider using images AND text as your list elements. It might be better to use the images as background images.

KDLA

The images are never known. It is kind of a content management system so people can add and remove links as needed. The table works I was just trying to remove as many formatting tables as necessary. Thanks for the help.

[The Little Guy]

This seems easier to me:

CSS:
.nav{
float:left;
text-align:center
}

HTML:
<div class="nav">
<a href="#"><img src="1.png"></a><br>
Some Text 2
</div>
<div class="nav">
<a href="#"><img src="1.png"></a><br>
Some Text 1
</div>
<div class="nav">
<a href="#"><img src="1.png"></a><br>
Some Text 3
</div>

[KDLA]

(Really, a menu is a list of links (not separate divs) -- if you're trying to achieve semantic mark-up. But, I can see your point! :) )

[The Little Guy]

(Really, a menu is a list of links (not separate divs) -- if you're trying to achieve semantic mark-up. But, I can see your point! :) )
OK, fine... Then here:

CSS:
li{
text-align:center;
margin:1px;
list-style-type:none;
float:left;
}

HTML:
<ul>
<li><a href="#"><img src="1.png"></a>
<br>Some Text 2</li>
<li><a href="#"><img src="1.png"></a>
<br>Some Text 1</li>
<li><a href="#"><img src="1.png"></a>
<br>Some Text 3</li>
</ul>