View Full Version : CSS - How did they do this?

02-19-2009, 03:51 PM
I've been banging away at my "news" section forever now and cannot come up with anything that's even remotely aesthetic. However, I've been browsing fellow news sections and found one that would absolutely go perfect with my fan site.

Please look at this news section: http://www.mmorpg.com/newsroom.cfm

Does anyone here know how to do this with the cool div layout and rounded corners?

02-19-2009, 04:00 PM
It's easy to check it out yourself (:

If you're a Firefox person, go to Tools > Addons and download Firebug. This will tell you the markup and styling of a certain element. There are in-built tools like this in Safari and IE too.

As for rounded corners...well, Google simply is your friends, because there are a lot of methods (and also tools for generating the corners for you.)

02-19-2009, 04:03 PM
There's nothing particularly exotic about the CSS from what I can tell. They use a succession of nested divs to create the containers and background images on additional divs to make the rounded corners:

.newsroom .nrin { background-image:url(frame_bodyBottomRight.gif); background-position:bottom right; }
.newsroom .nrou { background-image:url(frame_bodyBottomLeft.gif); background-position:bottom left; }
.newsroom .nrup { background-image:url(frame_bodyTopRight_second.gif); background-position:top right; }


Looks like they use two stylesheets for screen output:


As far as the web application used to generate the content, I'm not sure. It's not creating particularly valid code (http://validator.w3.org/check?uri=http%3A%2F%2Fwww.mmorpg.com%2Fnewsroom.cfm&charset=%28detect+automatically%29&doctype=Inline&group=0), that's for sure.