Rounded Corners?

[buddyb]

To do rounded corners with backgrounds, is there any way of doing it other than a background developed in a drawing/paint program? That seems to be the easy way, but the weight can be heavy and unflexible.
Thanks,
BuddyB

[DaveSW]

there is a css3 function to do it, but nothing supports it apart from mozilla firefox 1.0, so...

[buddyb]

there is a css3 function to do it, but nothing supports it apart from mozilla firefox 1.0, so...

I'm with your on this, but if you go to eBay you'll see a lot of rounded corners in their basic designs. You can't download a graphic by right clicking the area in question, so I assumed (and we know what happens when assuming) :) there was a way other than in a graphics program. Do you suppose they have a way of blocking the downloading of their graphics? I would like to be able to do that myself.
BuddyB

[lovablefool]

hi,

you can avoid viewers to download the graphics in a site through a javascript code. But even though it is there, there are quite lots of option to download..... name for a few 'saving the file from the file menu of the browser window', 'print screen the page and take that to an editor and doing the alterations there.'

otherwise there is no option to create a rounded corner in CSS. Go to www.w3.org to know more on CSS options.

lovablefool

[lovablefool]

All the rounded corners in ebay are images. And it is a very small size. If you right click in the extreme end of the corner, you can get save as option.

[DaveSW]

there is no option to create a rounded corner in CSS

Like I said, there is a CSS option, but it isn't well supported: http://www.w3.org/TR/css3-border/#the-border-radius

My usual technque is to nest a number of divs, and apply the solid background color to the bottom one, along with the first corner, then have the rest transparent, but each has a different corner as a background. I'll find an example for you if you like.
If you examine the ebay code you find a link to the following image: http://pics.ebaystatic.com/aw/pics/navbar/topLeft_12x12.gif
it's just droppped in front of the text and gives the rounded corner effect, whilst allowing the block to expand (theoretically).

[tgreer]

If you use solid gifs, the format is quite simple. The colors are simple hex-pairs, and so can be manipulated on the fly. One site I worked on years ago, we altered and served the gifs on the fly to make a rounded corner match the user's color scheme. I was quite proud of that little trick.

With ASP.NET, there is the System.Drawing namespace, which allows you to create bitmaps dynamically, on the fly, and and them to the response stream.

All of that is just "FYI", as your question has already been answered: rounded corners are graphics, not CSS (yet).

If the idea is just visual appeal, consider floating text around a graphic...

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm

[kernel]

Just put a corner piece in each of the 4 corners and leave the remaining table space with a background color that matches the color of the corners.

[DaveSW]

...remaining table space...

tables are for tabulated data, not layout.
http://www.hotdesign.com/seybold/

[kernel]

I disagree. Its yet another matter of opinion. Its not a good thing to portray an opinion on coding as fact.

[lovablefool]

"tables are for tabulated data, not layout." -

Certainly disagree. Tables are not only for tabulated data but also for layouts.
It plays the role as a vital design elemant in the html. Certainly tables cannot be ignored or simply considered as a stand for tabulated data.

[DaveSW]

It's not an opinion. It is a fact. The W3 says clearly:

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

Read it for yourself: http://www.w3.org/TR/html4/struct/tables.html

[lovablefool]

If W3C guidelines are followed, there cannot be a design elemant. You should put a stop to your creativity. W3c guidelines are to be followed in some cases, to be ignored in some cases, as simple as easy.;)

[DaveSW]

Not necessarily.
http://www.csszengarden.com/

[buddyb]

This has turned out to be an interesting thread. I've picked up a lot, so thanks. Yes, I finally discovered the small rounded .gif and know how to set it up because of youse guys..good show. Boy howdy, I still have a lot of questions, but this covers this.
BuddyB

[DaveSW]

lol well I'm glad you learned something and I'm sorry we sortof hijacked your thread ;)

[kernel]

It's not an opinion. It is a fact. The W3 says clearly:

"Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables."

Key word: "may present problems" . It doesn't always and won't always. So saying no matter what it shouldn't be used for this is nonsense.

And here, "Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display." Once again, "MAY". This part can simply be stopped via testing by the coder/designer. And once again, won't always happen. Testing comes into play here.

Just to quickly say though, I do not dislike css and do not think that tables are "better" (I actually use both since my designs are so graphic intensive, tables and css for the table and cell attributes), but to say they should not be used for something as simple as rounded corners is crazy. Not everyone in the world is worried about 100% pristine/perfect code in the eyes of W3. Especially for something so small.

[DaveSW]

Why would you need a table for rounded corners? The table is simply a means of producing a block level element on the page. A div is exactly the same in function, it just needs less code.

You are correct that the screen width problem can be negated by careful design. However, the may in 'may present problems' is dependant upon the user agent, not a random probability of sometimes it does and sometimes it doesn't. Certain text only browsers ignore tabulated content completely. Others render your content reading left to right, which means the order is completely wrong if you have a table with a few columns/rows. A complex layout can be completely screwed up. And since google is like a text only browser, you should care.
The W3C was cited as evidence that CSS for layout was a fact, not an opinion. The real reasons why CSS is better are in the first link - centralised control over presentation, reduced code redundancies resulting in bandwidth savings, easier to edit source code, improved control over presentation of your content to older browsers and non-standard browsers (such as pda/mobile phone small screen devices)... etc.