...

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



fcwedd
02-19-2009, 04: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?

Apostropartheid
02-19-2009, 05: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.)

BoldUlysses
02-19-2009, 05: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:

http://images.mmorpg.com/images/themes/radiance/default/default.css
http://images.mmorpg.com/images/themes/radiance/radiance.css

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum