1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Anyone know of a good CSS layout tutorial?

Discussion in 'CSS' started by powwka, Dec 23, 2006.

0
  1. #1
    I googled some different stuff, but I didn't find anything very good. Any suggestions?
     
    powwka, Dec 23, 2006 IP
  2. Austars

    Austars Active Member

    Messages:
    1,437
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    95
    #2
    A while ago I learned the basics with www.html.net 's CSS tutorial.
     
    Austars, Dec 23, 2006 IP
  3. Colbyt

    Colbyt Notable Member

    Messages:
    3,224
    Likes Received:
    185
    Best Answers:
    0
    Trophy Points:
    210
    #3
    I am going to give you two links.

    The first tizag.com If you take the time to go through the tutorial from start to finish, trying the examples to see what happens, will give you a very basic understanding. You still won't be able to pull it together. At least I could not. :)

    The second glish.com/css/ will help you apply what you learned at the first.

    I am sure there are many more more out there. I even visited some of them. These two sites seemed to help me more than the others. Then again maybe I just learned a little each place I went and a small % of it stuck.
     
    Colbyt, Dec 23, 2006 IP
  4. Austars

    Austars Active Member

    Messages:
    1,437
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    95
    #4
    Whoa, didn't tizag used to be a myspace resource site?
     
    Austars, Dec 23, 2006 IP
  5. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #5
    The first thing you need to do is to organize your site's structure in a semantic manner. This means using the accepted conventions of Web site design. MOST sites will have a header (sometimes called a "mast"), menu (either directly below the header or below it, but to the left of the content area), main content area, possibly a right sidebar, and a footer.

    The HTML for this tends to be rather simple (the code below is what goes inside the <body> and </body> tags):
    
<h1><span></span>Site Title</h1>
<div class="skipLink">
    <strong>Main Menu <a href="#content">Skip to Content</a></strong>
</div>
<ul id="menu">
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
    <li><a href="#">Menu Item</a></li>
</ul>
<h2>Page Title</h2>
<div id="content">
    <div class="section">
        <h3>Section Title</h3>
        <p>Just some stupid paragraph filler text, nothing to read here.</p>
        <p>Just some stupid paragraph filler text, nothing to read here.</p>
        <p>Just some stupid paragraph filler text, nothing to read here.</p>
    </div>
    <div class="section">
        <h3>Section Title</h3>
        <p>Just some stupid paragraph filler text, nothing to read here.</p>
        <p>Just some stupid paragraph filler text, nothing to read here.</p>
        <p>Just some stupid paragraph filler text, nothing to read here.</p>
    </div>
</div>
<div id="footer">
    <ul>
        <li><a href="#">Footer Link</a></li>
        <li><a href="#">Footer Link</a></li>
        <li><a href="#">Footer Link</a></li>
        <li><a href="#">Footer Link</a></li>
    </ul>
    <p>Copyright &copy; 2006 The Monster Under the Bed.  All Rights to Scare Unsuspecting Children Reserved.</p>
</div>
    HTML:
    You're probably wondering why I have an empty <span></span> tag pair in the H1 element (which is a level 1 heading, not header). That's for a CSS trick I use that allows you to literally hide the text with an image (yet if the image doesn't get loaded into the browser, still allows the text to be seen). You can learn how to do it by reading this SitePoint article:
    http://www.sitepoint.com/article/header-images-css-xhtml

    Now that a proper document structure is in place, you can get started on the stylesheet. The first thing I do is to strip the margins and padding from (virtually) every element in the page.
    
* {
    margin: 0;
    padding: 0;
}
    Code (markup):
    Then I style the body.
    
body {
    background: #FFF;
    color: #000;
    font: 1em/1.5 "Lucida Console", Tahoma, "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
}
    Code (markup):
    I used Lucida Console for the font style because I use EM for my base measurements throughout the entire layout. Lucida Console is large enough that I can literally lay out my entire site's presentation knowing that if one of my regular fonts (like Tahoma for instance) is not available, that the next font down the line (or if necessary a system default) won't literally break the layout. I use this font only for development and testing purposes though; once the design is finished, I remove it from the stylesheet.

    The next thing I do is style the headings (again, using Lucida Console for testing purposes):
    
h1, h2, h3, h4, h5, h6 {
    font-family: "Lucida Console", Georgia, Garamond, "Times New Roman", Times, serif;
}

h1 {
   font-size: 1.75em;
}

h2 {
   font-size: 1.5em;
}

h3 {
   font-size: 1.25em;
}

h4 {
   font-size: 1.1em;
}

h5 {
   font-size: 0.85em;
}

h6 {
   font-size: 0.75em;
}
    Code (markup):
    Now, since I'm sure you have a pretty good idea of what type of layout you want, I'll go ahead and let you tell me what it is (three column layout with the menu directly below the header, but above the three columns; two column layout with the menu to the left of the content; or something else entirely), and then I'll write a custom tutorial using the HTML code I've provided so far (I'll note any changes to the HTML I may have to make to accomodate the code for the wireframe, as necessary) for you. How's that sound?
     
    Dan Schulz, Dec 24, 2006 IP
    powwka likes this.
  6. powwka

    powwka Peon

    Messages:
    583
    Likes Received:
    10
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Nice guide, thanks :)
    Last night I just looked at a simple pre-made CSS template and I just recoded it in a new file, so I could see what each div looked like. So I think I've got the hang of it, but if I get stuck I'll ask you.
     
    powwka, Dec 24, 2006 IP
  7. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #7
    No problem.
     
    Dan Schulz, Dec 24, 2006 IP
  8. datropics

    datropics Peon

    Messages:
    309
    Likes Received:
    3
    Best Answers:
    1
    Trophy Points:
    0
    #8
    If you're serious about CSS - I recommend www.sitepoint.com - they offer great tips.

    A book I bought CSS: Designing without tables, helped me a great deal - check 'em out
     
    datropics, Dec 28, 2006 IP
  9. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I'm one of the regulars on SitePoint. :)
     
    Dan Schulz, Dec 28, 2006 IP