Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS - How did they do this?

    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?

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    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.)

  • #3
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    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:

    Code:
    .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/them...lt/default.css
    http://images.mmorpg.com/images/them...e/radiance.css

    As far as the web application used to generate the content, I'm not sure. It's not creating particularly valid code, that's for sure.
    matt | design | blog


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •