Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 4 1 2 3 ... LastLast
Results 1 to 10 of 35
Like Tree5Likes

Thread: Resources for learning how to use CSS for layout

  1. #1
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    As the title says, here are a few links I've gathered over the years on "How to use CSS for layouts". This list has links to information on "why" you should use DIV/CSS for layouts and "how" to use them with tutorials and code.

    Why
    A better way to build your website
    Why tables for layout is stupid: problems defined, solutions offered
    Ten ways to speed up the download time of your web pages
    Nested Tables: About the (ab)use of tables as layout tools in webpages.
    Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS
    Why go table free?
    Why avoiding tables (for layout) is important
    Throwing Tables Out the Window
    Integrated Web Design: The Meaning of Semantics (Take I)

    How
    BonRouge's layouts
    pmob.co.uk layouts
    newguyinennis layouts
    The Noodle Incident: CSS Boxes
    glish.com - CSS Layout technique
    bluerobot.com - Layout Reservoir
    Alistapart - In Search of the Holy Grail
    Alistapart - Creating Liquid Layouts with Negative Margins
    Alistapart - Faux Columns

    Books
    Designingwith Web Standards (2nd Edition) by Jeffrey Zeldman
    Web Standards Solutions: The Markup and Style Handbook by Dan Cederholm
    Bulletproof Web Design: Improving flexibility and protecting against worst-case scenarios with XHTML and CSS by Dan Cederholm
    CSS Mastery: Advanced Web Standards Solutions by Andy Budd, Simon Collison, Cameron Moll

    There's a good start. Feel free to add some more. And let's try to keep this thread with resourceful links. If you have a question, create a thread.

    edit
    • 2007-02-21: Added some "why" links
    • 2007-06-06: Added a "how" link
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  2.  

  3. #2
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    Great resources there, I'll add to them when I get a chance. It looks like you're going on a crusade against tables, heh.

    I don't know if drop-down menus are parts of layouts, but I consider them to be, as they are alternatives to common, collumn menu.http://www.htmldog.com/articles/ has plenty of articles, also regarding layouting forms with CSS, and also it shows the Suckerfish script which enables the :hover pseudo for IE.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  4. #3
    Senior Member karinne's Avatar
    Join Date
    Dec 2003
    Location
    Aylmer QC Canada
    Posts
    1,607
    Member #
    4335
    Liked
    8 times
    I was more looking at the layout in terms of understanding the position and float properties of CSS and how to use them properly. How to create certain layouts like 2 columns fluid or 3, etc...

    To me, drop-down menus are just style I guess within the layout.

    Did that make sense?
    [a web design portfolio - Currently NOT AVAILABLE for work | web design | Re-coding | PSD-to-HTML]
    I'm also on: virb - facebook - twitter - flickr - del.icio.us

  5. #4
    Junior Member
    Join Date
    Mar 2007
    Posts
    7
    Member #
    15038
    http://cssplay.co.uk has some good script too!

    I also found some videos about CSS on YouTube might look for that too.

  6. #5
    Junior Member Chronocalamity's Avatar
    Join Date
    Dec 2006
    Location
    Ky/Usa
    Posts
    15
    Member #
    14516
    also if your a beginner you can go to
    http://www.w3schools.com/css/

    i personaly learned alot there
    Webmaster Of Romgamers.com(WITCH IS DEAD
    THX NINTENDO)
    Feeding The Classic Gamers Fix Since 2004-2008

  7. #6
    Junior Member
    Join Date
    Sep 2007
    Location
    silicon valley, ca
    Posts
    2
    Member #
    15791
    this is good stuff! many thank youz! - ed havel

  8. #7
    Senior Member seanmiller's Avatar
    Join Date
    Sep 2003
    Location
    Glastonbury, UK
    Posts
    868
    Member #
    3263
    Liked
    1 times
    Just remember that tables are still fine if people want to use them... many very high-traffic sites use them, I feel that sometimes the forum can seem to alienate people who want to work that way but it's unfair as the important thing is to ensure the sites work, whatever way it's done.

    Tables for layout might not fit in with the whole XHMTL/CSS ideal but sometimes people feel that it is easier to do it that way, and I don't think it really matters in the bigger scheme of things... somebody who codes with tables and CSS is doing a fine job... let's just get rid of those horrible font tags, eh, and worry about "purity" when it comes to less important factors later... usability is the main factor, and whilst tables don't degrade as well in many instances as divs they certainly aren't "evil"...

    Sean (knowing he's going to stir up a hornet's nest... yikes!)

  9. #8
    Senior Member Steax's Avatar
    Join Date
    Dec 2006
    Location
    Bandung, Indonesia
    Posts
    1,207
    Member #
    14572
    As this is a resource thread, it might not be appropriate to discuss here, Sean. The main problem is, for a quick reply, tables are often used in very evil manners. We probably won't hate them so much if people made one big table for their layout, but no, they often have dozens of tables on one page. At that point code bloat is really high. And tables aren't exactly easy to HTML-code... They're associated with WYSIWYG editors more.
    Note on code: If I give code, please note that it is simply sample code to demonstrate an effect. It is not meant to be used as-is; that is the programmer's job. I am not responsible to give you support or be held liable for anything that happens when using my code.

  10. #9
    Junior Member
    Join Date
    Aug 2008
    Posts
    1
    Member #
    17236
    www.friendsofed.com/ i have learnt a lot by this. here you can get lots of information about CSS and HTML and all. If you want to get more information you can take help from any professional company bcoz i have taken help from http://www.infysolutions.com. I believe it is extremely helpful to everyone .

  11. #10
    Senior Member
    Join Date
    Dec 2008
    Posts
    483
    Member #
    17875
    Liked
    1 times
    Two suggestions when coding with css, and Ive learned this the hard way and through trial and error.

    #1
    The first line in your css should be
    *{margin: 0; padding: 0;}

    This resets the margin and padding for all elements and normalizes the padding/margins across different browsers.

    #2
    Encase your page in a wrapper/container div
    <div id="wrapper">
    <!--all code goes here-->
    </div>

    Make this wrapper div a fixed width (usually <1024 for 1024x768 resolution).

    These two tips will solve a lot of cross browser and cross resolution issues.

    Hope this helps


Page 1 of 4 1 2 3 ... LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 08:22 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com