I currently have a table at the top of my website that consists of a table at 100% width, a single row, and then several table divisions. The number of nav divisions depends on what page you are on and is generated dynamically, so there is no way to easily set td widths. Additionally, I am trying to use a small image of an arrow as a sort of bullet point to each nav item, with each nav item's text centered, though I may end up removing this if I cannot get it to align.
My end goal is to have anywhere from 6-10 items on the nav bar, with varying sizes to fit the text, while evenly distributing those td cells within the bar, evenly spaced. My problems arise when I try to use both the arrow and the text together, since the text is automatically being wordwrapped onto the next line rather than in line with the text. This makes the table oddly shaped. Additionally, in some cases I have tried, the first cell may have the right size of padding I had set, like 7px left for example, but by the end of the table row, the spacing is completely wrong, like close to 50px.
Is there a sort of div, td, and CSS combination to make this work? Would I be better off making it out of divs instead? I am running out of ideas how to align these cells evenly while maintaining my nav format. Any help is appreciated.
Here is a screen capture of what I am currently at: http://dl.dropbox.com/u/27295687/Untitled.png
Is this what you are trying to do?
I guess the key CSS attribute is table-layout: fixed; on the table element
You need to show us the code that made this bar. There are a hundred ways to make this in HTML.
This could happen if your arrow images are wrapped in a <div>. Div-s automatically take up an entire line by having width: 100%. Make sure your image has a width, and if it's wrapped in a div use this style:
<div style="display: inline-block;"><img src="arrow.gif"></div>
However, you could get a direct answer if we seen the code.