Hold on to your hats y'all, cause I am very new to rounded corners!

I have figured out somewhat how to do a column with rounded corners with text inside the column. Right now it rests (in peace) at the bottom of my browser screen.

My questions are:

How do I apply rounded corners to all my columns, not just the one?

Do I have to use classes for each one with the ensuing coding that I had to do to get just the one rounded corner column?

And since my one, lonely rounded corner column is resting in peace at the bottom of my screen, how to I position the darn thing up higher and to the left or right?

Probably sounds like pretty simple stuff to y'all, but I am getting frustrated ~ and we can't have that now, can we?

Thanks a bunch!

Jules

the problem must be at line 65 of the CSS file

Julie I think what Chris is saying is we need to see some code or better yet a link to the page in question. There's generally not a one size fits all approach to coding.

You can try the approach of spiffy corners for creating rounded corners. I belive there are a few others that have modified versions of the spiffy corners approach.

Thanks guys...I used images with this, but see there is a way to do it without, so that might be an option, too. I don't have this uploaded to my site yet, so...

Here is the CSS:


div.rounded {
background: #663333 url(../images/bottomleft.gif) no-repeat bottom left;
color: #dddddd;
position: relative;
padding-top: 0;
padding-bottom: 18px;
margin: 1em 10px 0 0 ;
height:100%;
}

div.rounded * {
background: #663333 url(../images/bottomright.gif) no-repeat bottom right;
color: #dddddd;
padding: 1em 2em 18px 0;
margin: 0 0 -18px 18px;
height:100%;
}

div.rounded {
background: #663333 url(../images/topleft.gif) no-repeat top left;
color: #dddddd;
position: relative;
padding-top: 0;
padding-bottom: 18px;
margin: 1em 10px 0 0 ;
height:100%;
}

div.rounded * {
background: #663333 url(../images/topright.gif) no-repeat top right;
color: #dddddd;
padding: 1em 2em 18px 0;
margin: 0 0 -18px 18px;
height:100%;
}

Thanks a bunch,
Jules

Okay, Steve, I added a width to the first div.rounded and my column is now a good width. But, since I can see all of it now, there are no bottom rounded corners to it.

I am probably going to go to spiffy and see what I can get from that site and especially since you don't need images to do it at spiffy ~ the one I got my present coding from makes it seem like way too much code to have to do for every column I want to create.

Unless there is a way to use what I have for other div's/classes within the current coding I have?

And now I have to figure out why the bottom rounding isn't working.

Spiffy, here I come??

Thanks ~ and thanks, too for deleting my double-post!

Jules

I have just added rounded corners to my the current site i'm working on located at www.jasoneyermann.toucansurf.com.
You can take a look at my code if you want think this is what you are looking for.

Thank you, Jason ~ I will check it out! I need all the help I can get here. It stinks to be a newbie at this stuff!

Jules