Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Rounded table corners 1

Status
Not open for further replies.
mwebbo1

mwebbo1

Technical User
Jul 11, 2002
71
US
I am looking to find out the technique of using the rounded corners that are being used at groups.yahoo.com. I would appreciate as much detail as you can in you explanation.
Thanks for the help! (p.s. I also want to do this with no images, I have used the images in the corners)
 
Sort by date Sort by votes

I thought I would pre-empt the "OK... so I can't do it with no images. Can you show me how to do it with images?" question ;o)



[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
I went through the CSS sheet that they have and the code for the tables, I did not see any image references, that is not to say that I did not miss one, I would love to figure this out, I really like that slight rounded edge, nice clean page spacing too.
 
Upvote 0 Downvote
ahh, you are correct. I will have to take a look at that. Thanks for the help everyone!
 
Upvote 0 Downvote
Their css files are loaded with image references. Look at dcss.css - the corners are indeed images. Look for
Code: 
background-image: url([URL unfurl="true"]http://gui.grp.yahoofs.com/images?fmt=ne,ffffff,f[/URL] ...);
It's some complex css. They use 4 css files plus inline styles on the grou I was checking.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill
 
Upvote 0 Downvote
I am looking to find out the technique of using the rounded corners that are being used at groups.yahoo.com.
Click to expand...
Simple: Got to groups.yahoo.com, select "View Source" on your browser. That should get you started.

I also want to do this with no images
Click to expand...
Well, make your mind up! Yahoo are using background images defined in their CSS - basically the well-tried technique Dan linked to.

If you want to do it image-free, and you can't wait for CSS3 , that's possible too with a little trickery - check out this link . You can see it in action here: .

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
Sorry you didn't like the webdings idea!

Code: 
<html><head><style>
body {font-family:"Wingdings"; font-size:200px}
</style></head><body>&#74;</body></html>

You might consider using transparent rounded images that way you only need one set and they work for any color. The method is explained in the link Billy Ray gave you.

Clive
 
Upvote 0 Downvote
Thanks guys, will check out the Nifty site, hoping that it will work with just a 1px border and not a solit bg+border
 
Upvote 0 Downvote
why use that much messy css and java (yuk!) when you can use a simple table and images smaller than 1kb?

 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question
Display table td's as block element on mobile phone 1
Replies
3
Views
489
spamjim
spamjim
lupidol
  • Locked
  • Question
Table's title row's rounded corners border 1
Replies
2
Views
102
lupidol
lupidol
ashokkumary
  • Locked
  • Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
100
spamjim
spamjim
PeDa
  • Locked
  • Question
Table not formatted correctly in all browsers 1
Replies
2
Views
98
PeDa
PeDa
PSchubert
  • Locked
  • Question
Data in db table cell not displayed in asp table cell -- a CSS issue?
Replies
2
Views
87
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top