Jump to content

Background images in liquid layout - necessary?


Pikachu2000

Recommended Posts

I've been going through Sam's Teach Yourself CSS in 10 Minutes (I'm not impressed with it, BTW) and in this layout they use 2 images to create the 3 background colors. I'm just wondering if this is the proper way to do it, or if it would be better to use 3 divs, each with it's own background color value in the CSS. It just seems like unnecessary overhead to load the two 50x2000 pixel images simply to provide solid colors. The two images are attached below also. Any thoughts?

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Listing 21.1</title>

<style type="text/css" media="screen">
body {
    margin: 0;
    padding: 0;
    font: 90% helvetica, arial, sans-serif;
    background: #387A9B;
    color: #333333;
}
h1 {
    margin: 0;
    padding: 0.5em 3%;
    background: #D36832;
    border-bottom: 5px solid #387A9B;
}
h2, h3 {
    margin-top: 0;
}
#container {
    background: url(back01.gif) repeat-y 50% 0;
}
#container2 {
    background: url(back02.gif) repeat-y 80% 0;
}
#content {
    width: 44%;
    margin: 1em 3%;
    display: inline;
    float: left;
    /*background: #336699;*/
}
#news {
    width: 24%;
    float: left;
    margin: 1em 3%;
}
#nav {
    width: 14%;
    float: left;
    margin: 1em 0 1em 3%;
}
#nav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    line-height: 150%;
}
#nav ul li a {
    color: #387A9B;
    text-decoration: none;
    border-bottom: 1px solid #387A9B;
}
#footer {
    clear: both;
    background: #387A9B;
    color: #FFFFFF;
    padding: 5px 3%;
    text-align: right;
}
</style>

</head>
<body>
<h1>
    Sitename
</h1>
<div id="container">
    <div id="container2">
        <div id="content">
            <h2>
                Page heading
            </h2>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
            </p>
        </div>
        <div id="news">
            <h3>
                News
            </h3>
            <p>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
            </p>
        </div>
        <div id="nav">
            <h3>
                Sections
            </h3>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Staff</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </div>
        <div id="footer">
            Copyright © Sitename <?php echo date('Y'); ?>
        </div>
    </div>
</div>
</body>
</html>

 

[attachment deleted by admin]

Link to comment
Share on other sites

Remember, one of the most important aspects of CSS based layout is to reduce markup clutter and eliminate unnecessary tagging.

 

Once you start to understand the concept of "separating content from style", you learn to consolidate your styling elements by using minimal or existing tags.  Avoiding "DIVITUS" is a constant vigilance.

 

Divs are html placeholders and NOT to be used willy nilly for styling. In your example above, the use of the two existing container ids along with the content id is much cleaner within the markup because they encompass the content elegantly while providing a convenient unobtrusive vehicle for background styling.

 

It is the same with slapping text directly into divs without using proper text content tags (h1 - h6, p, ul-ol-dl li).  A web page is mostly about the content ... so content should be first consideration and first to get any html tagging.

 

CSS relies upon content. And LIQUID layouts even more so. You need to carefully consider how the text "breathes" within the containers as they shrink or expand. Adding containers that are created for styling along will become ungainly once the content and page design progresses.

 

The more containers you add, the deeper your content descends and the more unwieldy the text sizing specificity becomes.

 

What takes people longest to learn about CSS is its simplicity. It took me a year to realize the awesome power of simple text content tags.

 

I recommend every beginner start where many of us finally had our "eureka" moment after trial and error - max design selectutorial. Learn this and you will avoid weeks of frustration and be able to concentrate on the more advanced and tricky aspects of CSS.

 

It uses an easy to follow format and the concepts are well explained - here is the entire tutorial (1 page for each concept):

 

Selectutorial - CSS selectors

 

Selectors are one of the most important aspects of CSS as they are used to "select" elements on an HTML page so that they can be styled.

 

Find out more about selectors including the structure of rules, the document tree, types of selectors and their uses. There is also a step-by-step tutorial showing how selectors are used in the process of building a 3-column layout.

 

Rules

 

    * What is a rule or "rule set"?

    * Grouping declarations

    * Grouping selectors

    * Shorthand properties

    * CSS Comments

 

The document tree - it's a family thing

 

    * Introduction

    * Ancestor

    * Descendant

    * Parent

    * Child

    * Sibling

    * Multiple descriptions

 

Selectors

 

    * Type selectors

    * Class selectors

    * ID selectors

    * Descendant selectors

    * Child selectors

    * Universal selectors

    * Adjacent sibling selectors

    * Attribute selectors

    * Pseudo-classes

    * Pseudo-elements

 

Advanced stuff

 

    * Should you use ID or class?

    * Inheritance

    * Cascade

    * What happens when conflicts occur?

 

Selectors in action - a step by step tutorial

 

    * Introduction

    * Step 1 - the html code

    * Step 2 - drop in content

    * Step 3 - styling the <body> element

    * Step 4 - styling the <a> element

    * Step 5 - styling the banner <div>

    * Step 6 - styling the heading

    * Step 7 - styling the first container

    * Step 8 - styling the second container

    * Step 9 - styling the navigation <div>

    * Step 10 - styling the <ul> element

    * Step 11 - styling the <li> element

    * Step 12 - styling the <a> element

    * Step 13 - styling the hover state

    * Step 14 - styling the “more” <div>

    * Step 15 - styling the <h3> element

    * Step 16 - styling the content <div>

    * Step 17 - styling the <h2> element

    * Step 18 - setting the line height

    * Step 19 - clearing the contents

    * Step 20 - styling the footer <div>

    * Step 21 - styling the <ul> element

    * Step 22 - styling the <li> element

 

Link to comment
Share on other sites

I like to see some mark up to really, I must admit i here and than use an extra div to give a certain part a special color, instead of an extra header request. IF you use it scarcely i don't see any problem in that

Link to comment
Share on other sites

I've put a copy online HERE for anyone who'd rather see it online. I've also commented out a background value above that shouldn't have made it into the post . . .

 

@KP - I'm not really trying to accomplish anything specific with it, my question is just that since one of the purposes of CSS is to reduce the overhead involved with html layout, I'm not sure why the book would add two images to provide background colors when it seems that using a background-color would be less data to transfer. I'm really just starting to learn CSS past the point of just modifying an already made template, etc, and I don't want to learn bad habits that I'll have to unlearn later.

Link to comment
Share on other sites

hmm i think the author could have done the same by assigning a background  color to div's #content #news and #nav

in combination with the use of padding, instead of using margin and setting a background image to #container and container2.

 

so instead of this on #content #nav #news:

  
#nav, #content, #news{
margin: 1em 3%;
min-height: 400px;
}

i am pretty sure this could have been done without extra header requests or divs:

  
#nav, #content, #news{
padding: 1em 3%;
min-height: 400px;
}

+ assignment of background color

Link to comment
Share on other sites

See that's what I was kind of thinking could be done. It just didn't make sense to me to use bandwidth to transfer background images to give each section a solid color BG. If the images were a pattern, or a logo, etc. it would have made perfect sense because then it clearly would have been necessary.

Link to comment
Share on other sites

See that's what I was kind of thinking could be done. It just didn't make sense to me to use bandwidth to transfer background images to give each section a solid color BG. If the images were a pattern, or a logo, etc. it would have made perfect sense because then it clearly would have been necessary.

Yep that's what i thought, when i read you first post ::)

Link to comment
Share on other sites

The reason why the author added two images is because the height issue with fluid layout. If you assign a background color to the news and side divs, and the content was too long. The news and side background won't extend down with the content. You can try to remove the background images and assign background colors to the news and side divs, add extra content and resize the window to see the effect.

 

If you want the same style layout (three color background to extend all the way for the three divs regardless of content and size of window) you would need to use the same images width. You can resize the height to 1px if that will save some kb.

 

P.S. I never read the book, but got the author intentions from your post and the sample you posted

Link to comment
Share on other sites

OK, that makes more sense now. If they had only added that paragraph to the book . . .

 

I am pretty sure you can do the same with min-height. And maybe even a position relative of 100% to the parent element. But I havent tried it yet, but i pretty sure it's possible. But maybe a little more tricky.

Link to comment
Share on other sites

OK, that makes more sense now. If they had only added that paragraph to the book . . .

 

I am pretty sure you can do the same with min-height. And maybe even a position relative of 100% to the parent element. But I havent tried it yet, but i pretty sure it's possible. But maybe a little more tricky.

I stand corrected, the height is indeed the issue here.

Link to comment
Share on other sites

Clean, simple markup reduces overhead considerably ... load once 75k background images are not a heavy burden on bandwidth.

 

You example is based on Dan Cederholm's brilliant  "faux columns"  technique. It is the most elegant way to get the elusive "equal height containers" - regardless of content - without slapping unnecessary divs or spans within the content markup.

 

There are a few other clever techniques, like Stu Nichols's CSSplay Layouts, but Stu's markup is semantically incorrect and there are too many unnecessary divs used for styling alone, which defeats the point of separation of content from presentation. 

 

The key to efficient CSS is clean simple HTML markup. The font and style tag soup horror of the past needs to be eliminated forever, not replaced by inline styling, span-oramas and div-itus.

 

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.