[surferboy]

I am a rookie trying to use dreamweaver, photoshop, etc. to design a page layout. My goal is to develop a grey page with the center being white with round corners- similar to the Macromedia web pages (Here).

I have read about numerous ways to design a rounded corner table, and my favorite so far is this. It is a nice way to do it. The corners work well. The problem is that I can see a very subtle outline around the corners (like a small rectangular shadow that outlines the corner). Obviously I'm doing something wrong.

I realize there are a billion ways to skin this cat, but before I describe each step I'm taking, I was wondering if anyone wanted to try this method? If you get it done successfully, can you describe to me exactly how you did it?

Thanks so much- pulling my hair out at this point....

[skalie]

That Macromedia page's rounded corner table thingy renders horribly in Firefox (win) btw, if that makes you feel any better in your persuit of perfection.

[mdc]

look at the base of each of the content blocks on my site and you will see they are rounded.

my site does not have tables, it's css. the bottom corners are an image that gets placed below the content. if i wanted rounded corners above content, i'd have another one of those above the content.

the end code looks something like this

Code:
<div class="bg_top"></div>
<div class="content"></div>
<div class="bg_bottom"></div>

.bg_top would have a background image for the top corners.
content would have a background image for the regular background
.bg_bottom would have the bottom rounded corners.

works for me.

[surferboy]

Mike,
Thanks. That helps. I like it. I like that layout. I want a white center with rounded corners and grey on the rest of the page. More rookie questions: Is that a fixed width layout? If so, how does the browser extend the grey all the way to the edge of the screen when the window is expanded? Or, is it a relative width layout? I would like to do what you've done except I'd like to put a navigation bar across the top and more navigation links on the left side. I plan to use dreamweaver to lay it out with "dummy" tables, then convert it to CSS.

Any advice?

Thanks again,

[Chris O'Brien]

-moz-border-radius is a wonderful thing. Shame border-radius isn't supported in Safari

Anyhoo, big Simon Willison has an answer: http://www.sitepoint.com/article/rou...css-javascript

[mdc]

@surferboy,
it is fixed width. the grey is a background color that you give to the body in your css file. there are a few different color styles for the site, all of which have different bg images (could have used a transparent .png but for ie's sake, individual gifs it was) and the body has a different bg color.

[Millennium]

The best solution would be to use the CSS3 border-radius property, since it uses no images, flows with any layout, requires no changes to your HTML, and easily lets you set each corner's radius independently of the others. Unfortunately, it has one major drawback: no one supports it. Gecko (Netscape, Mozilla, Firefox, etc) comes the closest, with its pseudo-proprietary -moz-border-radius extension (which, it is thought, will work much the same way as the final standard), but it's the only browser which supports anything like this.

However, all is not lost. Dean Edwards has a very elegant technique which uses images, but flows to accommodate almost any layout and requires no changes to your HTML. Ordinarily this doesn't support IE, but Edwards' 'IE7' JavaScript routines can remedy that without disrupting other browsers. It's still not as easy to use as border-radius, but it's the next best thing.

[Chris O'Brien]

Originally Posted by Millennium

Gecko (Netscape, Mozilla, Firefox, etc) comes the closest, with its pseudo-proprietary -moz-border-radius extension (which, it is thought, will work much the same way as the final standard), but it's the only browser which supports anything like this.

Well, it's not really 'pseudo-proprietary', they've done what the current working draft says. It's just that since it's not final they put the -moz prefix on. You'll notice they do that with most things (it was -moz-opacity until not too long ago - changed because it became more prevalent due to safari supporting it, probably - and still is -moz-inline-block), in the same way that the KHTML guys use the -khtml prefix. So basically, it will work the same way as the spec once the spec is finished, and they'll drop the prefix.

[Millennium]

Originally Posted by Black Book

Well, it's not really 'pseudo-proprietary', they've done what the current working draft says. It's just that since it's not final they put the -moz prefix on.

That's why I said pseudo-proprietary. It's completely open and very well-documented; it's just that the standard has not been finalized.

You'll notice they do that with most things (it was -moz-opacity until not too long ago - changed because it became more prevalent due to safari supporting it, probably - and still is -moz-inline-block), in the same way that the KHTML guys use the -khtml prefix. So basically, it will work the same way as the spec once the spec is finished, and they'll drop the prefix.

Well, it will probably work the same way as the spec once the spec is finished. There's still a small but nonzero chance that they might go back and change the way that property works for whatever reason. That's why the W3C suggests vendor prefixes in the first place.

[Chris O'Brien]

Originally Posted by Millennium

That's why I said pseudo-proprietary. It's completely open and very well-documented; it's just that the standard has not been finalized.

I'll let you off then

[skalie]

Could just make a flash site, there's this handy "rounded corners" option when drawing a rectangle.

[Phil Sherry]

Originally Posted by skalie

Could just make a flash site, there's this handy "rounded corners" option when drawing a rectangle.

Stop using Flash for everything, young man!

[surferboy]

Phil,
Like your book a lot. Unfortunately, my real job keeps me from actually making much progress on learning web development.....

That's why I appreciate the help gleaned here.

[madmacgames]

Hey the techniques are in-numerous, and it basically comes down to, what works best for you and what method you like working with the best.

I personally prefer an onion skinning technique (which isn't limited to just round corners, but can also be used for shadows, other effects, etc).

[Phil Sherry]

Originally Posted by surferboy

Phil,
Like your book a lot.

Thanks, man.

[Jasoco]

Originally Posted by mdc

look at the base of each of the content blocks on my site and you will see they are rounded.

Your site looks nice, but there are some weird problems. Your top title image has the word "banner" in its file name. So in my browser, it does not appear because it gets blocked by Pithelmet. It's not generally a good idea to put a needed image resource in a URL that may get blocked. I found this out myself.

In FireFox it shows up, but there is a lot of empty space under the last entry at the bottom of the page.

In Safari also, when I first visited, there were red !'s all over. They seemed normal until I got to the bottom of the page and saw a lot of them grouped over top of the last posting.

Also, is the navigation bar supposed to be at the bottom? It would be much more convenient at the top. (The one with Styles, Archives, Search, etc...)

Sorry to bump this thread.