Jump to content

table with rounded corners


yoshida
 Share

Recommended Posts

Re-opening a thread here...Here's my css

#r1 {display: block height: 1px background: #fafaff margin: 0px 5px}#r2 {display: block height: 1px background: #fafaff margin: 0px 3px}#r3 {display: block height: 1px background: #fafaff margin: 0px 2px}#r4 {display: block height: 1px background: #fafaff margin: 0px 1px}#r5 {display: block height: 1px background: #fafaff margin: 0px 1px}#content {background: #fafaff padding: 5px}

This is what I do to create a table with rounded corners.Here's how I use it.

<html><head><link rel=stylesheet type="text/css" href=rond.css></head><body><div id=r1></div><div id=r2></div><div id=r3></div><div id=r4></div><div id=r5></div><div id=content>Here's where your content should go</div><div id=r5></div><div id=r4></div><div id=r3></div><div id=r2></div><div id=r1></div></body></html>

I guess the concept is simple. Blocks with a decreasing side margin are stacked to create rounded corners without using images. This is an adaption from the links I posted earlier.Please try opening this link in both Firefox and IE. It already came to my attention that Firefox is the webmaster's one and only true friend but What Part of height: 1px Doesn't IE Understand?? (more important: how do I solve this?)

Link to comment
Share on other sites

I wonder what would happen if you put this inside of a table with a specific height. I bet it would make the table larger but it may work. you could also try doing this with layers but I couldnt help much there

Link to comment
Share on other sites

Got it. Ya gotta add overflow: hidden to each line.Check this site for a neat example (if I may say so myself) in which I added a gradient to the top and bottom. Its all code.

Link to comment
Share on other sites

Got it. Ya gotta add overflow: hidden to each line.Check this site for a neat example (if I may say so myself) in which I added a gradient to the top and bottom. Its all code.

lol, thats not code at all. the gradient it a picture.. nice lie..
Link to comment
Share on other sites

lol, thats not code at all. the gradient it a picture.. nice lie..

The purple header gradient is a picture, you've got that right.The blue, rounded gradient on top and bottom of each container div is all code. Show me the picture in that. I think your error boils down to misinterpretation on your side, and not a lie on mine. I'm sorry for not making myself clear enough to you.I fixed the border so that it shows correctly in up-to-date versions of IE6 and Firefox 1.5.0.3.Go ahead, you're free to steal parts of my CSS. It's not copyrighted. The statement at the bottom of each page refers to the displayed content and not the code itself.By the way, for those who've read my rant on iframes, I abandoned that and went back to regular frames instead. It's much easier and less maintenance intensive. Iframes made me hiss like a snake and growl like a wolf so something is not healthy about that.
Link to comment
Share on other sites

I changed the CSS for a little less typing by grouping the elements togetherCSS:

.p1,.p2,.p3,.p4,.p5,.p6{display:block;overflow:hidden;background:#1E90FF;}.p1,.p2,.p3,.p4{height:1px;}.p1{margin: 0px 8px;}.p2{margin: 0px 6px;}.p3{margin: 0px 4px;}.p4{margin: 0px 3px;}.p5{margin: 0px 2px;height:2px;}.p6{margin: 0px 1px;height:3px;}

and html:

<div class="r1"></div><div class="r2"></div><div class="r3"></div><div class="r4"></div><div class="r5"></div><div class="r6"></div><div id="contentwhatever">This is content</div><div class="r6"></div><div class="r5"></div><div class="r4"></div><div class="r3"></div><div class="r2"></div><div class="r1"></div>

Link to comment
Share on other sites

Awesome, thanks. :) I'll also try to save some space with other divs that way.Someone else told me you could even say <div class=r1 r2 r3 r4 r5 r6></div> but wouldn't they end up nested that way?Thanks again.

Link to comment
Share on other sites

setting all the classes may work together and it may not but it will Not work for rounded corners. I wish i could draw a picture here but i cant. each div is a line each line gets longer then you have your main div and theneach line/div gets smaller. thats bassically how the rounded corners workso if you only had one div with all the classes set at onec you would have a corners that has just one px missing.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...