SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 47
  1. #1
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 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

  2. #2
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Oh yay, let's see how to do this one.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Timo - Thanks for dropping by so soon

    If anything is unclear in the above then just shout.

  4. #4
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,265
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Evil, Paul - just what I need. A distraction....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  5. #5
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    The starting code does not seem to work in my IE-tester ie6.
    edit:
    hmm, now it works, must be buggy IE-Tester...

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    The starting code does not seem to work in my IE-tester ie6.
    edit:
    hmm, now it works, must be buggy IE-Tester...
    Works fine for me in IE6 here.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Just in case you thought it was too hard Timo (yurikolovsky) has already solved this. Well done Timo.

    It's amazing how things that have been unsolved for years because someone originally said it couldn't be done can be solved quite easily once someone say's it's possible.

    Anyone else close to an answer?

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PM'ed some kind of a solution. Not good for IE6-7

    But definitely will be thinking further, since there are a couple of ways to tackle it But after sleeping 'cos it's midnight here

  9. #9
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PM'ed another This one should be a classic!

    Not pretty (at all!), not valid (just a tiny bit)... but it works in all UAs!

    And I still have a few more (unexpected) angles on this

  10. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks for both solutions noonope and they work exactly as you said they would and made me laugh at the same time

    Keep searching for that definitive solution and I look forward to more entries.

  11. #11
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just pm'd you a simple one.

    Assuming it works cross-browser, I can only use FF3.6 on my present system.
    Happy ADD/ADHD with Asperger's

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks Erik - yes that works fine and is the solution I intended

    Many thanks for taking part.

    I'll be interested to see if anyone can come up with a different way of doing this (that is valid and works cross browser).

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    I think I should have posted this quiz a few days earlier as things are a bit quiet around here now.

    I'll leave it running over the next week anyway and give others a chance to have a go.

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I'll be interested to see if anyone can come up with a different way of doing this (that is valid and works cross browser).
    I have PM'd you with a unique method that I have working in all but IE6 at the moment.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks Ray, that was a different and interesting approach that seems to work well (and one I hadn't thought of). Well done

  16. #16
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, thanks for this, I love a good challenge! I've PMed you a minimal solution. Obviously I wouldn't recommend anyone actually do this

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Thanks godfidget that seems to be working also so well done

    I'll be posting all the solutions on Sunday so if anyone still wants to try then get a move on

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Solution Time.

    Well another year over and another quiz done and dusted

    Thanks to all that took part and thanks to all those that watched with interest.

    I had entries from the following:

    Yurikolovsky, noonnope, ErikJ, Rayzur, Goldfidget and 72dpi.

    Yurikolovsky, Erik J, Rayzurand and Goldfidget had the solution I was looking for and filled the criteria successfully.

    noonnope had an interesting approach which I will also post but didn't quite fulfil all the criteria. Ray also had an alternative approach although not working in IE6 but an interesting technique all the same.

    It would be hard to pick a winner as entries are similar but as Yurikolovsky was first off the bat with the correct answer I will award first place to him .

    Well done Timo (yurikolovsky).

    As there are never any losers in my competitions every one else can have joint second and third place

    The solution:

    I've put up my live example here but the code follows below in case the link goes missing later.

    The secret to this quiz was a bit of lateral thinking and it should have become obvious quite soon in that you cannot absolutely position the banner into place because you cannot create the space for the fluid height element to live in without overlapping.

    Therefore instead of positioning the banner into position we absolutely position everything else instead!

    What!! You can't do that!

    We only need one extra div to surround the existing content apart from the banner (#main in my example) and we set that to be absolutely positioned.

    This has the effect that the banner html now sits at the top of the document where we want it but is of course overlapped by the absolute element.

    The next step is apply position relative to #outer and create a stacking context for #main. We then simply place #main at top:100% because an absolute element always knows where the bottom of a relative parent is and will always stay at the bottom even where fluid height content is concerned (unfortunately vice versa isn't true and a relative element never knows where the bottom of a positioned parent is).

    The rest is just tidying up and matching borders.

    What are the issues of absolutely placing the whole layout?

    There are actually very few issues as long as all the remaining content can be kept inside #main. The fact that #main is absolutely positioned has no relevance to the content inside and it will behave as normal.

    (There may be an issue in older browsers such as IE6 where you show and hide the content with dynamic elements and IE forgets where the absolute element's position is but that issue would be present in normal layouts and there are known fixes for this anyway.)

    I'll post the entries below but you might look to through noonnope's and Ray's entries for a different take on the issue

    Here is my original code:

    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}
    body{padding:10px 0 0;}
    #outer {
        position:relative;
        width:70%;
        margin:auto;
        border:1px solid #000;
        border-bottom:none;
        padding:10px 0 0;
    }
    #main {
        position:absolute;
        top:100%;
        width:100%;
        border:1px solid #000;
        border-top:none;
        left:-1px;
    }
    .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;
        overflow:hidden;
    }
    .block2 {
        background:red;
    }
    .block p,.content p,.sidebar li {
        padding:0 10px;
    }
    .content {
        overflow:hidden;
        zoom:1.0;
        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 id="main">
            <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>
        <div 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>
    Yurikolovsky:

    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;
    }
    
    
    
    
    #outer {
        position:relative;
        border-bottom:0;
    }
    #content {
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        border:solid #000 1px;
        margin:-1px;
        border-top:0;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="content">
        <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>
        <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>
    Erik J :

    Code:
    <!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>Quiz #36 //Erik J</title>
    <style type="text/css">
    html,
    body {
        margin:0;
        padding:0;
    }
    #outer {
        position:relative;
        width: 70%;
        margin: auto;
        border: 1px solid #000;
        padding: 10px 0 0;
    }
    #inner {
        position:absolute;
        top:100%;
        left:-1px;
        width: 100%;
        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 id="inner">
            <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>
        <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>
    noonnope (NOT IE6-7):

    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;
        overflow:auto;
    }
    .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;
    }
    #first {
        display:table-header-group;
    }
    #second {
        display:table-row;
    }
    </style>
    </head>
    <body>
    <div id="outer">
        <div id="second">
            <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>
        <div id="first">
            <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>
    </div>
    </body>
    </html>
    noonnope2 (not valid):

    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;
        overflow:auto;
    }
    .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">
        <table>
            <tbody>
                <tr>
                    <td><div id="second">
                            <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></td>
                </tr>
            </tbody>
            <thead>
                <tr>
                    <td><div id="first">
                            <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></td>
                </tr>
            </thead>
        </table>
    </div>
    </body>
    </html>
    Rayzur (Not IE6): (uses inline-block)
    Code:
    <!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">
    <meta name="robots" content="noindex,nofollow">
    <title>CSS Quiz #36 - Rayzur</title>
    
    <style type="text/css">
    html,body {
        margin:0;
        padding:0;
    }
    h1 {
        margin:8px 10px 10px;
        padding:5px 0;
        font-size:1.5em;
        text-align:center;
        border:1px solid #000;
        background:linen;
    }
    h1 span {
        display:block;
        color:red;
        font-size:80%;
    }
    p {margin: 10px;}
    
    /*=== Begin Layout ===*/
    #wrap {
        width:80%;
        margin:10px auto 0;
        border:1px solid #000;
        border-width:1px 1px 0;
        background:#CCC;
        word-spacing:-1em;/* html comment to remove node for webkit*/
        /*white-space:nowrap;/* The -100% lt/rt margin on #last will work by itself */
        /*display:table; /* Webkit chokes on white-space:nowrap; with this added (Makes Opera 1px off on #last block)*/
    }
    #main, #last { 
        width:100%;
        display:inline-block;
        word-spacing:normal;
    }
    #main {
        height:1px;/* THE TRICK -(to keep main content below the #last block. Would use zero, 1px is just for testing)*/
        vertical-align:bottom; /* THE TRICK - (to keep main content below the #last block)*/
        overflow:visible;/* This is the default anyways, it's just to confirm that visible overflow is needed*/
        background:blue;
    }
        #content { /* fake the #wrap's bg color*/
            overflow:hidden;/* IE7 haslayout and uncollapse h1 margins*/
            margin:1px -1px 10px;/*-1px to drag borders out lt. and rt. (1px top margin to show #main BG color)*/
            border:1px solid #000;
            border-top:none; /* fake the extension of #wrap's background*/
            background:#CCC; /* fake the extension of #wrap's background*/
        }
        .block {
            margin:10px;
            background:#EEF;
            border:1px solid #000;
            font:1em/1.5 arial;
        }
        span {font:bold .9em arial; color:red}
        code {color:#333; font-family:"courier new";}
    
    #last { 
        vertical-align:text-bottom;/*<- OPERA FIX!(:top or :bottom works for all but opera, :middle helped opera some)*/
        margin:0 -100%; /* THE TRICK -(the -100% lt/rt margins allows #main to drop below the #last block)*/
                        /*(1px bottom margin to show #main BG color) Opera needs a negative right margin of some sort*/
    }
        #last .block {
            /*min-height:600px; /* Testing opera with greater content in last block*/
            margin:10px 10px 2px; /*(2px bottom margin to show #main BG color)*/
            background:palegreen;
            /*line-height:5.5; /* Testing opera with greater content in last block*/
        }
    
    /*IE7 inline-block*/
    *+html #main, *+html #last {display:inline;}
    
    /* No DIV SWAP FOR IE6 since "expanding box bug" will not allow for height:0 on #main*/
    * html #last {
        display:block;
        margin:10px 0 0;
        padding-bottom:10px;
        border-bottom:1px solid #000;
    }
    </style>
    
    </head>
    <body>
    
    <div id="wrap">
        <div id="main">
    
            <div id="content"><!--fake the wrap's bg color-->
                <h1>Fluid Vertical Div Swapping<span>CSS Quiz #36 - Rayzur</span></h1>
                <div class="block">
                  <p>
                    <b>START <code>#main .content</code></b><br>
                    <a href="http://www.css-lab.com/demos/inline-block/quiz-36-final.html">Live demo</a> - This is the main content that comes first in the source order: 
                    This is the main content that comes first in the source order: 
                    This is the main content that comes first in the source order: 
                    This is the main content that comes first in the source order: 
                    This is the main content that comes first in the source order:                </p>
    
                    <p>
                    This is the main content that comes first in the source order: 
                    This is the main content that comes first in the source order: 
                    This is the main content that comes first in the source order: 
                    This is the main content that comes first in the source order: 
                    This is the main content that comes first in the source order:
                    </p>
                    <p>
                    <span>Opera problem fixed with <code>vertical-align:text-bottom;</code> on #last div.</span>
                    <br>Opera is still a little buggy if the last block has more content than the rest of the 
                    page as it adds the extra height to the scrolling distance. At least Opera is cooperating 
                    now without it's fix breaking other browsers.<br><b>END <code>#main .content</code></b>
    
                    </p>
                </div>
            </div>
        </div><!--webkit node fix
     --><div id="last">
            <div class="block">
                <p>
                <b>Start <code>#last</code> fluid  block of the page source</b><br> 
                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 : 
                <br><b>End <code>#last</code> fluid  block</b> 
                </p>
    
            </div>
        </div>
    </div>
    
    </body>
    </html>

    72dpi: (not accepted lol )

    Code:
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" language="JavaScript">
    $(document).ready(function(){
    $('.block').prepend($('.block2 p'));
    });
    </script>
    Goldfidget:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>HTML Challenge</title>
    <style>
    .wrapper {position:relative; width:800px;}
    .top_content {border:1px solid green;}
    .bottom_content_wrapper {position:absolute; bottom:0; height:1px;}
    .bottom_content {position:absolute; border:1px solid red;width:800px;}
    </style>
    </head>
    <body>
    <div class="wrapper">
    <div class="bottom_content_wrapper">
    <div class="bottom_content">
    <p>Bottom Content</p>
    <p>Bottom Content</p>
    <p>Bottom Content</p>
    <p>Bottom Content</p>
    <p>Bottom Content</p>
    </div>
    </div>
    
    <div class="top_content">
    <p>Top Content</p>
    <p>Top Content</p>
    <p>Top Content</p>
    <p>Top Content</p>
    <p>Top Content</p>
    </div>
    </div>
    </body>
    </html>
    Thaks to all that took part and thanks to those that tried different solution as well.

    Look out for the next CSS quiz in a week or so (I already have one organised courtesy of Erik J).

  19. #19
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well that certainly was fun and thanks ever so much to Paul for arranging it!

  20. #20
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul.

    First, it's noonnope ! Mitică, if you want to use caps, 'cos noonnope is always w/o caps

    Second, thanks for a good challenge. Looking at the quiz and the solutions provided, it's a good qed for showing everyone has its own style

    Nice "official" solution and a nice thing to learn from for me. Thaks again. My sincere congratulations to those smart enough to find it: Yurikolovsky, Erik J, Rayzur and Goldfidget, and to Yurikolovsky for being the fastest.



    As for me, after relating to tables (CSS and ... HTML markup ), I got stuck trying to absolute position everything, trying to use inline, and trying the inline-block Rayzur did.

    Even if not for SEO, I'm sure a few additional uses will emerge out of this as a surprising solution for other yet unsolved web dev exercises.

    Looking forward to your future quizes, and thanks again for keeping us on the edge and providing us with in-depth CSS insight!

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi Mitică,

    Quote Originally Posted by noonnope View Post

    First, it's noonnope ! Mitică, if you want to use caps, 'cos noonnope is always w/o caps
    Sorry about that, I've edited my last post and I'll try and remember next time. (I typed in all the usernames from memory so I've probably spelled others wrong also so apologies in advance).

    Glad you enjoyed the quiz anyway and thanks for your unique entry.

    Thanks to goldfidget also.

  22. #22
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,199
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Super quiz, Paul! The solutions are fascinating. Each of these quizzes reminds me that I should actually read the specs, so that I know what CSS can really do. Without knowing the tool properly, it's hard to know where to start with these challenges. Ah, had we but world enough and time...

  23. #23
    SitePoint Zealot
    Join Date
    Sep 2010
    Location
    Brighton, UK
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    72dpi

  24. #24
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ohhh! I woke up in the middle of the night the other day and that occured to me as a possible solution. But then I went back to sleep and forgot about it until now. Good job guys!

  25. #25
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul,

    One more thing. My CSS solution works for IE8, so it's not
    noonnope (NOT IE)
    it's
    noonnope (NOT IE6-7)


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
  •