SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Layout - getting excited now :)

    Here's a site demonstrating my first attempts at CSS layout:

    http://www.bath.ac.uk/~cs1spw/nemesis/

    It's for my University's alternative music society - there's no real content on there yet so the site is basically my CSS playground for the moment. I've already got a style switcher in there so you can switch between two layouts (both using the same XHTML with only the CSS differing).

    The thing that has pleased me most about using CSS for the layout is the dramatic reductin in size of the HTML file. The XHTML for the "join" page is so small I can see it all on screen at once in my text editor, something that would never (or very rarely) happen if I was using tables for the layout. In fact, here it is (just to demonstrate how little HTML is needed):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Join Nemesis</title>
    <link rel="stylesheet" title="default"  href="css.css" type="text/css" media="screen" />
    <link rel="alternate stylesheet" href="css2.css" title="alternative" type="text/css" media="screen" />
    <script type="text/javascript" src="styleswitcher.js"></script> </head>
    <body>
    <div id="header">
    <h1>NEMESIS</h1>
    <h4>We own your soul...</h4>
    
    </div>
    <div id="navbar">
    <a href="index.php" title="Society News">News</a>
    <a href="events.php" title="All the events you can shake a stick at">Events</a>
    <a href="join.php" title="Join our marvelous society">Join!</a>
    <a href="about.php" title="About Nemesis and this Site">About</a>
    <a href="links.php" title="Other sites we like">Links</a>
    <a href="photos.php" title="Be afraid..." class="last">Photos</a>
    <div>&nbsp;</div>
    </div>
    
    <div id="content">
    <h2>So you want to join Nemesis?</h2>
    
    <p>Email nemesis@bath.ac.uk for more information.</p>
    
    </div>
    
    <div id="footer">
    <a href="#" onclick="setActiveStyleSheet('default'); return false;">change style to default</a> | 
    <a href="#" onclick="setActiveStyleSheet('alternative'); return false;">change style to alternative</a> | Site Design + Coding by <a href="mailto:cs1spw@bath.ac.uk">Simon Willison</a>
    
    </div>
    
    </body>
    </html>
    The site loads fast, looks good in Mozilla and IE (and pretty good in Opera) and is the first site I've ever done that passes the w3 validator (for XHTML Strict no less). CSS layout has me hooked

  2. #2
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    welcome to the world of CSS, THE web designers utopia (ok maybe i'm exagerating (sp?)...

    i dunno about the rose though heh

  3. #3
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That rose is probably the best quality graphic I've ever produced (says something about my graphic skills :P) - it was going to be black because a black rose seemed like a nice Gothic stereotype but I ended up makig it red for the moment. Like I said though the site is essentially a prototype for playing with CSS and none of the design elements are finalised - I've just been chucking stuff on there to see how well I can position things.

  4. #4
    SitePoint Wizard silver trophy redemption's Avatar
    Join Date
    Sep 2001
    Location
    Singapore
    Posts
    5,269
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yeah i understand... i was kidding

    and if you drew that rose yourself -- wow!... i can barely draw a stick figure that looks nice...

  5. #5
    Grumpy Mole Man Skunk's Avatar
    Join Date
    Jan 2001
    Location
    Lawrence, Kansas
    Posts
    2,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Bah I wish I had. I've discovered a highly effective but ethically questionable technique for generating graphics involving flash. Basically you find a graphic in bitmap format that you like and import it into flash, then hit the "Trace Bitmap" option and watch Flash vectorise it. Once it's a vector it's fantasitcally easy to modify it, resize it, tweak it and generally improve it.

    The problem is that you almost certainly end up on morally (if not legally) shaky grounds with regaurds to image copyright - something I intend to investigate before using any graphic I have created with that technique on a live site. That rose is a great example - believe it or not but it was derived from this image (found on google image search):

    http://images.google.com/imgres?imgu...3Doff%26sa%3DN

    Looking at my vector rose (which I simplified, scaled down, rotated and added a stem to) you could never tell that it originated from that image - but even so, is this legally or ethically "OK"?

  6. #6
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm looking at the Nemesis site, but can't see/find any rose pic.

    I'm curious to take a look at your handywork
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  7. #7
    SitePoint Zealot easyrew's Avatar
    Join Date
    Nov 2001
    Location
    Milton Keynes, UK
    Posts
    186
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Skunk: nice work - welcome to the CSS party!

    Bill Posters: click on the alternative style link (bottom of the page) and the rose will magically appear.

    Rich
    If a man stands alone in the forest
    and there's no woman around to hear him,
    is he still wrong?
    w: www.EasyRew.com

  8. #8
    SitePoint Zealot t0m|ta's Avatar
    Join Date
    Mar 2002
    Location
    Madrid - Spain
    Posts
    118
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://forum.deviantart.com/278678

    That's a good "everyday english" article on copyright and derivative works, if you are interested :-)


Bookmarks

Posting Permissions

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