List help + general site critique.

After many attempts I have been unable to get an unordered link list to fill the desired width. The main nav list should be the same width as the boxes in the left column. http://test.solidgroundnc.com/sg_css4.htm

I would also appreciate any and all suggestions regarding my code/design for that same page. I'm not a web designer, not nearly, as my first attempt using tables proves - http://www.solidgroundnc.com. I was flamed so much when asking a question about that one that I decided to learn more, which includes css, and probably enought to get me into more trouble. ;-)

Cheers,
Golem

It shouldnt be the <ul> tag you try to make wider... or the <li>... it should be the table cells inside the list.

Try this...

In the table cells... put this.

<td id="linktable">

And for the css...

#linktable {
width: 5354543513531241343225236253px;
}

Instead of an inline list, try a float:right list. You can set width to 25% so the four links will take the full width.

cheers,

gary

@CodyM

Not sure if you misread me, I misunderstand you, you are just tongue-n-cheeking me, or, you started happy hour a bit too early! :-)


@kk5st

You are clairvoyant! You answered a question I had yet to ask. I believe you speak of positioning my sublinks above the main column (hope I've not put my foot in mouth!). I will give it a shot and am sure it will work.

Could I bother you to take a shot at the main links at the top of the left column?


Cheers,
Golem

@kk5st (and all)

When I set the list to 25% at "#sub-navcontainer ul li" it results in a widtht slightly wider (about 5px) than the box below. It probably has something to do with the way in which I implimented padding in the right column? I can set a pixel value (137) which gives me the correct width but it also pushes the box below it down about 10px.

Guess I'm still trying to get a grip on what effects/ramifications setting padding and margins has on adjacent objects and floats.

Also, is there a better way to instruct that nav container to fill the width considering the number of li's may be different from page to page? Possibly a percentage or specific value for the "#sub-navcontainer" as a whole?

As for the nav list at the top of the left column...setting a pixel or percent width of the ul/li causes the list to extend to the right. Unfortunately the unfilled space to the left remains while causing the floated right column to seek a new home "below" the left floated column, kinda getting squeezed out it seems. :-(

Appreciate any and all input.

(note - the above concerns are evident in IE6)

Cheers,
Golem

Quickie answers;
Yes, padding and borders and margins all add up. For this type of list, set text-align: center, and no padding. If you use a border, fudge a percent or so as a finagle factor.

If the numbers vary, vary the percent. 3 ≈ 33%, 4 ≈ 25%, 5 ≈ 20%, 6 ≈ 16%, 7 ≈14%, 8 ≈ 12.5%, etc.

make thisinto this
cheers,

gary

Gary,

Thanks a bunch! I applied the change to the main nav and it worked like a charm. I'll investigate a lot more the list options to truly understand the reasoning.

As for the sub-nav, percentages seem to not allow for exact width control as it always ends up being a few pixels +/-. What I may try is switching my padding/margins from the rt-column to the elements that lie within.

I seem to learn the most from trial and error so I'll give it a shot. If after a few days or a week I get frustrated I'll be back! ;-)

Cheers again for the wise insight!
Golem