Laying out first CSS designed site - no tables!

[HitLines]

This is my first attempt at building a non-nested table design so please pardon all the beginner questions. (Hey that is what this section of the forum is for, right?)

Here is the site as it is currently coded: http://people.ku.edu/~nate-dog/kansan.com/NCAA/ncaa.html

Here is the mockup as the site needs to be designed: http://people.ku.edu/~nate-dog/kansan.com/NCAA/main1.jpg

Questions
How do I float the tab ("also visit" graphic) to the far right? Is there a way to do so without making the graphic take up the entire space? As it is right now, all the space above it is clickable. Would like to be able to just float the tab instead of making an image map over the tab gfx.

How do I add the curve to the main column? (the graphic right under the word "Men's")

Is there a better way to give the main column a padding of 10pix on either side instead of giving all content a padding of 5?
.content{padding:5px;} /*padding for content */

Also I think I need some help with the left nav between FF and IE.

Thanks!

[ray326]

How do I float the tab ("also visit" graphic) to the far right? Make the words text and the tab a background image. The markup would be something like:

<div id="alsotab"><p>Also visit: <a href="?">Kansan.com</a></p></div>

How do I add the curve to the main column? (the graphic right under the word "Men's") With a little square image that fits in that corner and has the colored arc.

[HitLines]

With a little square image that fits in that corner and has the colored arc.

You misread me -- I know how to get the effect http://people.ku.edu/~nate-dog/kansan.com/NCAA/curve_left.gif , I am not sure how to position it correctly.

[Tim158]

quote:
--------------------------------------------------------------------------------
How do I add the curve to the main column? (the graphic right under the word "Men's")
--------------------------------------------------------------------------------

You could try adding the image as a background to the content DIV like:

.content {
background-image:url('curve_left.gif');
background-repeat:no-repeat;
}

...or if it is being a real pain, I guess you could just put it in the code at the top or bottom of the BODY and position it absolutely:

.imgClass {
position:absolute;
left:999px;
top:999px;
z-index:2;
}

...but that wouldn't be the most accessable way of doing it.

[ray326]

Originally posted by HitLines
You misread me -- I know how to get the effect http://people.ku.edu/~nate-dog/kansan.com/NCAA/curve_left.gif , I am not sure how to position it correctly. The first thing I'd try is making it the first element in the div and styled display:block.