SitePoint Sponsor

User Tag List

Results 1 to 25 of 47

Threaded View

  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)

    CSS - Test Your CSS Skills Number 36 - Content First

    Quiz now ended. Solution in post #18 below.

    As some of you may find yourself with a little spare time over the holiday break I thought you might like to have a go at a little CSS quiz that I have prepared.

    This quiz is based on a question we see often in the forum and the answer has always been "No, You can't do that as it's not possible with CSS". As soon as I see a reply like that its like a red rag to a bull for me and I start thinking how the effect could be accomplished (irrespective of whether it's good idea or not).

    The task this week is to take a fluid height element (such as a banner and various ads) that sits near the end of the html and make it show first when the page is displayed. This is easy to accomplish if the element is a fixed height but generally thought to be impossible if the element is a fluid or dynamic height.

    Disclaimer:I've always told people that moving content around just for SEO purposes is never usually a good idea but tests have shown that having good content higher in the page does have a small beneficial effect for SEO and Matt Cutts of Google does allude to this as mentioned in this article.

    However, for the purpose of the quiz ignore the right and wrongs of the technique but just try to work out how this can be accomplished.

    To recap all you have to do is make content that is at the end of the html show at the top of the page when displayed. The routine must allow automatically for a change in height of any of the elements on the page.

    Rules:

    Use the html and css provided (or use your own) and you can change it around as much as you like (e.g. add extra elements or wrappers as needed) but the main point being that the last real block of content at the bottom of the html should stay where it is in the html but appear at the top of the page when displayed.

    No hacks, or scripting allowed (apart from using zoom:1.0 for IE6 if needed).
    No generated content (e.g. using before or after pseudo classes).
    No duplicated content (e.g. copying all the content from the banner container and trying to use it to hold open the space).

    Must work in all browsers from Ie6 upwards using the same standard code (no hacks or alternative rules - except for zoom).

    No finding loopholes because I will just fill them later.

    No CSS3 (i.e. you can't use the flexible box model layout module)

    Valid html and css
    (apart from using zoom:1.0 for IE6 if needed)

    Here is the html that you can use if you want but you can change the css and html as mentioned above. The content to be moved visually is contained within #bannerwrap.

    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=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    html, body {
        margin:0;
        padding:0;
    }
    #outer {
        width:70%;
        margin:auto;
        border:1px solid #000;
        padding:10px 0 0;
    }
    .block, .block2 {
        background:yellow;
        border:1px solid #000;
        margin:10px;
    }
    .banner {
        height:100px;/* this height may change so layout must account for any height*/
        line-height:100px;
        border:10px solid #000;
        font-size:36px;
        background:#FF6633;
        color:#fff;
        text-align:center;
    }
    .block2 {
        background:red;
    }
    .block p, .content p, .sidebar li {
        padding:0 10px;
    }
    .content {
        overflow:hidden;
        zoom:1.0;/* could have used the height:1% hack in a separate rule if css needs to validate*/
        border:1px solid #000;
        margin:10px;
        background:green;
        color:#fff;
    }
    .sidebar {
        float:left;
        width:200px;
        background:teal;
        color:#fff;
        margin:0 10px 10px;
        display:inline;
        border:1px solid #000;
    }
    .sidebar ul {
        margin:0;
        padding:0;
        list-style:none
    }
    .sidebar a {
        color:#fff;
        text-decoration:none
    }
    #footer {
        clear:both;
        background:black;
        color:#fff;
        padding:10px;
        text-align:center;
    }
    h1 {
        margin:10px;
        font-size:160%;
        text-align:center;
    }
    h1 span {
        display:block;
        font-size:60%;
        color:red;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div class="block">
            <h1>Welcome to xyz.com <span>(The best place to be)</span></h1>
            <p>Start This is block 1 which comes first in the html : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 : This is block 1 :</p>
        </div>
        <div class="sidebar">
            <ul>
                <li><a href="#">Side links</a></li>
                <li><a href="#">Side links</a></li>
                <li><a href="#">Side links</a></li>
                <li><a href="#">Side links</a></li>
                <li><a href="#">Side links</a></li>
                <li><a href="#">Side links</a></li>
                <li><a href="#">Side links</a></li>
                <li><a href="#">Side links</a></li>
            </ul>
        </div>
        <div class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque mauris pellentesque justo congue in faucibus justo faucibus. Nunc odio sapien, vehicula eget interdum quis, euismod dignissim magna. Morbi condimentum massa sit amet nisl fringilla quis laoreet sapien porttitor. Aenean adipiscing rutrum accumsan. Cras ipsum ligula, pretium sit amet fermentum et, viverra quis quam. Suspendisse sed lacus augue, a sagittis metus. Nunc pulvinar, purus a semper consequat, enim orci viverra dui, </p>
        </div>
        <div id="footer">
            <p>&copy; copyright (2011) me</p>
        </div>
        <div id="bannerwrap" class="block block2">
            <div class="banner">Ad Banner Goes here</div>
            <p>Start This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html : This is the last fluid  block at the bottom of the html :  end </p>
        </div>
    </div>
    </body>
    </html>
    Just to be clear you can change anything you like and add extra wrappers if needed but the html at the end of the page shouldn't really change.

    e.g.#bannerwrap remains at this position in the html but will appear first when displayed as shown in the attachments.
    Code:
       ... 
    
       <div id="bannerwrap" class="block block2">
            <div class="banner">Ad Banner Goes here</div>
            <p>Start This is the last fluid  block at the bottom of  the html : This is the last fluid  block at the bottom of the html :  This is the last fluid  block at the bottom of the html : This is the  last fluid  block at the bottom of the html : This is the last fluid   block at the bottom of the html : This is the last fluid  block at the  bottom of the html : This is the last fluid  block at the bottom of the  html : This is the last fluid  block at the bottom of the html : This is  the last fluid  block at the bottom of the html : This is the last  fluid  block at the bottom of the html : This is the last fluid  block  at the bottom of the html : This is the last fluid  block at the bottom  of the html : This is the last fluid  block at the bottom of the html :  This is the last fluid  block at the bottom of the html : This is the  last fluid  block at the bottom of the html : This is the last fluid   block at the bottom of the html :  end </p>
        </div>
    </div>
    </body>
    </html>
    I have attached a picture showing how the page looks before and after just in case it is still unclear.

    If anything is still unclear or I have made an error in my logic then just shout. The winner won't necessarily be the first correct one I receive (but the first entry always gets a big mention and may indeed be the preferred solution).

    Remember this is just for fun and there are no prizes.

    Don't post your answers in this thread but PM with the details instead so that all can have a go.


    Have fun.


    PS. : In case you missed the other tests you can find them all listed here:

    PPS: A couple of you have sent me in some ideas for quizzes a while ago and I still haven't forgotten them and I will get around to posting them so thanks for the support.
    Attached Images Attached Images
    Last edited by Paul O'B; Jan 2, 2011 at 10:43.


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
  •