SitePoint Sponsor

User Tag List

Page 3 of 4 FirstFirst 1234 LastLast
Results 51 to 75 of 89
  1. #51
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    this test seems to be really hard for most people, i hope they get it :P

    can't wait to see the other method used, i bet its ingenious, as mine is not, i have always overcomplicated things, since birth. xD

  2. #52
    perfect = good enough peach's Avatar
    Join Date
    Jun 2004
    Location
    -Netherlands-
    Posts
    1,384
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm clueless about the colored text part thats why Im not even going to try this one lol.
    Maybe I should start a thread about it and wait for Paul to help me out

  3. #53
    ? ro0bear's Avatar
    Join Date
    Oct 2007
    Location
    United Kingdom
    Posts
    624
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by peach View Post
    Maybe I should start a thread about it and wait for Paul to help me out
    All will be explained on friday. If you dont know where to start at all look at Pauls clue carefully.

  4. #54
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Thanks Raffles for your entry which is pretty close and slightly different to the others

  5. #55
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want to learn CSS more but I think it so difficult for me

  6. #56
    SitePoint Member
    Join Date
    Jan 2009
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my solution:
    use 5 boxs to contain text-data box
    the 5 boxs must use hidden overflow and the text-data box must fixed in some position to display like example


    but i don't have time to solve my solution.
    - -"
    Last edited by Paul O'B; Jan 22, 2009 at 03:51. Reason: Don't give the answer away

  7. #57
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hehehe

    @ilumin

    don't post your answer, let others think about it.


    -----------------------
    off topic, do not read
    -----------------------
    but i don't have time to solve my solution.
    - -"
    thats everyones excuse...

    :Personal opinion, do not take personally or anything:
    i consider the phrase "i don't have time" to be very misleading, because you DO have time to watch tv, you DO have time to hang out with friends, you DO have time to look at the ceiling, you DO have time to spin around in the chair, but for some strange reason nobody has the time to do exercise or brain puzzles or anything else that requires some amount of work? they are a waste of time? maybe, maybe not. but to be honest you could say that everything is a waste of time.

    its just for fun, for those who think that puzzles are fun and can be done in time of recreation, i will not do it because i don't have time, sounds more like, i don't want to do it, but i will make everyone know that i have a solution...even if it doesn't work.
    lazy show off?

    oh, ignore everything i just said...
    ;personal opinion, do not take personally or anything;

    @ilumin oh, happy first post!!
    and happy future reading/posting

  8. #58
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi ilumin,

    Welcome to Sitepoint

    If you can solve the puzzle then send me the solution.

    If you haven't got time to solve the puzzle that's fine also but don't spoil it for others.

    The solution you posted is not complete anyway and I think you should (excuse the phrase) "put your money where your mouth is" and send me the solution to prove you can do it (throws down a gauntlet)

    The solutions will be posted on Friday anyway so you have a little time

    Thanks for your interest anyway.

  9. #59
    SitePoint Addict aguroyz's Avatar
    Join Date
    Jan 2009
    Location
    Konoha Fire Country
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when will the answers be posted?? Ohh so its friday..

    I think I'll just pass this one and wait for the next quiz....
    Uniquely FILIPINO... See how talented and creative Filipinos are.
    http://www.smalltym.com
    Custom Web Designs:
    http://proweaver.com

  10. #60
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    I have (I believe) an entirely new method of doing this. I'll work on it today if I don't get a lot of work in my classes.

    Cheers.
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  11. #61
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Well done to Arkh who has just posted me a correct solution

    The solutions will be posted Friday afternoon and we will immediately start a new quiz (courtesy of erik.j) that will run for the week.

  12. #62
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Turned in my answer (unique I believe).
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  13. #63
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Congratulations

    eagerly awaiting to see it.

  14. #64
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Bah he said a few others did it my way that's depressing.

    Edit: Paul you need to say that I posted a solution .
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  15. #65
    SitePoint Wizard bronze trophy Centauri's Avatar
    Join Date
    May 2007
    Location
    Newcastle, Australia
    Posts
    3,718
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    Bah he said a few others did it my way
    Ahh, found the magical css property that allows this to work?

  16. #66
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,564
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    ??? No I didn't. Just regular CSS...
    Twitter-@Ryan_Reese09
    http://www.ryanreese.us -Always looking for web design/development work

  17. #67
    SitePoint Addict aguroyz's Avatar
    Join Date
    Jan 2009
    Location
    Konoha Fire Country
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where are the answers... I'm looking forward to this....
    Uniquely FILIPINO... See how talented and creative Filipinos are.
    http://www.smalltym.com
    Custom Web Designs:
    http://proweaver.com

  18. #68
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Yes Ryan has the correct solution (but didnt have to time to completely tidy it up) but nonetheless well done.

  19. #69
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Answers will be later today (gmt) as a couple of others are still working on it so I'll give them a little more time

  20. #70
    SitePoint Addict aguroyz's Avatar
    Join Date
    Jan 2009
    Location
    Konoha Fire Country
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm too ashamed to send in my answer... So I will not bother since it's not working as you wanted it to be... heheheh
    Uniquely FILIPINO... See how talented and creative Filipinos are.
    http://www.smalltym.com
    Custom Web Designs:
    http://proweaver.com

  21. #71
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    I'm too ashamed to send in my answer... So I will not bother since it's not working as you wanted it to be... heheheh
    Paul O'B did say to post them even if they are not exact, maybe your solution is original in some way?

  22. #72
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,026
    Mentioned
    213 Post(s)
    Tagged
    1 Thread(s)
    I hope to send you a good answer Paul, if I have the time to get home and work on this. If I am lucky, I will make it on time

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

    OK - Time for winners, losers and solutions.

    Tied in first place we have are Centauri for the fastest and Erik.j for the first of both versions entered and clever use of minimal html and css.

    Third is Tommy (Autistic Cuckoo) for his impeccable code.

    Congratulations to the following who were also correct (or very close).

    Roobear
    yuriklovsky
    Loginsan
    Rafffles
    arkh
    RyanReese

    rainmakr
    geargolumn
    Markbrown4


    (a few of the above were not perfect but had the right idea)

    (If I missed anyone then shout and I'll add you to the list.)


    The answers to this problem fall into 2 distinct methods.

    1) Without going into specific code detail (because you will see all the solutions below anyway) the first answer lies in making use of the clip property.

    The clip property allows you to clip an element into a rectangular shape and only show that part defined by the clipping region. The solution therefore is to absolutely place 5 identical paragraphs into the exact same position on the page so that they overlap each other exactly.

    Now using the clip property you clip each element so that only the parts you want to see are shown. This doesn't really change anything on the element but just creates a little window on the element and lets you only see what is inside the window although the element is still in its original position. The slightly tricky part is just making sure the elements are all clipped in the right place and match up with each other.

    The one thing to be aware of is that IE7 and under only understand the non standard clip format which means omitting the comma between the values ( which is why I said ignore IE for now although it will work in IE if you just use the non standard format for IE only).

    Here is my version using clip which I have kept in the simplest form and not tried to be clever so that you can understand what's going on. (If you want to view this in IE the remove the comma between the clip values and just leave a space).

    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=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    .outer {
        position:relative;
        width:60%;
        margin:20px auto;
        font-size:124%;
        min-width:400px;
    }
    p {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        padding:10px;
        background:#fcc;
        color:red;
        border:10px solid;
    }
    p.tl{
        background:red;
        color:green;
        clip:rect(0, 150px, 200px, 0);
    }
    p.tr {
        background:yellow;
        color:#000;
        clip:rect(0, auto, 100px, 150px);
    }
    p.bl {
        background:blue;
        color:yellow;
        clip:rect(200px, 350px, auto, 0);
    }
    p.br {
        background:teal;
        color:orange;
        clip:rect(100px, auto, auto, 350px);
    }
    </style>
    </head>
    <body>
    <div class="outer">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="tr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="bl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="br">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    </body>
    </html>
    As you can see there is very little css needed to do this.

    If you wanted to be clever you can actually lose all the paragraph text and classes and apply the text via the content property instead and reduce the file size (although for semantic use you should at least leave one real paragraph in the html).

    You will see some solutions below that use a variety of these methods so be sure to look at them all.

    2) This problem can also be solved without using the clip property and again in the basic form requires 5 duplicate paragraphs. Each paragraph is enclosed in a div and the div is absolutely placed into the rectangular shapes we need. This is quote easy and just basic positioning.

    The divs are overflow hidden so that the text doesn't spill out. However the text is not continuos of course and doesn't line up with the text above. Therefore the complicated part with this method is to drag the p content in each div outside the div so that all that is left in the div is the part of the text you need. Because overflow:hidden is used then you will ony see the text that is inside the div. With a bit of trial and error all segments can be made to appear as one single paragraph and not 5.

    As with clip property there are many variations with this and you can use the content property along with the :before and :after pseudo classes to drastically minmise the css and html. (Unfortunately clip doesn't work on the "content" property itself in Firefox but does work in opera and Safari)

    These are the correct entries so far (athough I have been pretty lenient in some entries as they were a little bit off but they had the general idea ).

    Winner of the fastest entry was again Centauri who's first entry arrived within an hour of the contest being set.


    Centauri 1:
    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    div{
        width:60%;
        margin:20px auto;
        font-size:124%;
        min-width:400px;
        position: relative;
    }
    p {
        border: 10px solid yellow;
        color: yellow;
        background-color: blue;
        padding: 10px;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .og {
        border-color: orange;
        color: orange;
        background-color: teal;
        clip: rect(0 auto auto 350px);
    }
    .rp {
        border-color: red;
        color: red;
        background-color: pink;
        clip: rect(0 350px 200px 0);
    }
    .by {
        border-color: black;
        color: black;
        background-color: yellow;
        clip:rect(0 auto 100px 0);
    }
    .gr {
        border-color: green;
        color: green;
        background-color: red;
        clip: rect(0 149px 200px 0);
    }
    </style>
    </head>
    <body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="og">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="rp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="by">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="gr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    </body>
    </html>
    Centauri 2:
    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    html {
        width:60%;
        margin:20px auto;
        font-size:124%;
        min-width:400px;
        position: relative;
    }
    html *:before {
        content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.";
        border: 10px solid yellow;
        color: yellow;
        background-color: blue;
        padding: 10px;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    div:before {
        border-color: orange;
        color: orange;
        background-color: teal;
        clip: rect(100px, auto, auto, 350px);
    }
    ul:before {
        border-color: red;
        color: red;
        background-color: pink;
        clip: rect(0, 350px, 200px, 0);
    }
    li:before {
        border-color: black;
        color: black;
        background-color: yellow;
        clip:rect(0, auto, 100px, 0);
    }
    p:before {
        border-color: green;
        color: green;
        background-color: red;
        clip: rect(0, 149px, 200px, 0);
    }
    </style>
    </head>
    <body>
    <ul><li></li></ul>
    <div></div>
    <p></p>
    </body>
    </html>
    Next to arrive correctly was ro0bear:

    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    body {
        width:60%;
        margin:20px auto;
        font-size:124%;
        min-width:400px;
        position: absolute;
        left: 20%;
        
    
    }
    
    body p {position: absolute; background-color: #FFCCCC; border: #FF0000 0.5em solid; color: #FF0000;}
    
    
    .b1 {background-color: #FF0000; border: #008000 0.5em solid; color: #008000; clip: rect(auto, 140px, 200px, auto);}
    .b2 {background-color: #FFFF00; border: #000000 0.5em solid; color: #000000; clip: rect(auto, auto, 90px, 140px);}
    .b3 {background-color: #0000FF; border: #FFFF00 0.5em solid; color: #FFFF00; clip: rect(140px, 340px, auto, auto);}
    .b4 {background-color: #008080; border: #FFA500 0.5em solid; color: #FFA500; clip: rect(90px, auto, auto, 340px);}
    
    </style>
    </head>
    <body>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="b2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="b3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
        <p class="b4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    
    </body>
    </html>
    Ro0bear 2:

    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    body {
        width:60%;
        margin:20px auto;
        font-size:124%;
        min-width:400px;
        position: absolute;
        left: 20%;
        
    
    }
    
    body:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block; background-color: #FFCCCC; border: #FF0000 0.5em solid; color: #FF0000;}
    body p {position: absolute; background-color: #FF0000; border: #008000 0.5em solid; color: #008000; clip: rect(auto, 140px, 200px, auto);}
    
    
    .b1 {background-color: #FFFF00; border: #000000 0.5em solid; color: #000000; clip: rect(auto, auto, 90px, 140px);}
    .b2 {background-color: #0000FF; border: #FFFF00 0.5em solid; color: #FFFF00; clip: rect(140px, 340px, auto, auto);}
    .b3 {background-color: #008080; border: #FFA500 0.5em solid; color: #FFA500; clip: rect(90px, auto, auto, 340px);}
    
    
    </style>
    </head>
    <body>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p class="b1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p class="b2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p class="b3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    
    
    
    </body>
    </html>
    Ro0bear 3:

    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    body {
        width:60%;
        margin:20px auto;
        font-size:124%;
        min-width:400px;
        position: absolute;
        left: 20%;
        
    
    }
    
    
    p {position: absolute;}
    
    .start {background-color: #FFCCCC; border: #FF0000 0.5em solid; color: #FF0000;}
    .start+p {background-color: #FF0000; border: #008000 0.5em solid; color: #008000; clip: rect(auto, 140px, 200px, auto);}
    .start+p+p {background-color: #FFFF00; border: #000000 0.5em solid; color: #000000; clip: rect(auto, auto, 90px, 140px);}
    .start+p+p+p {background-color: #0000FF; border: #FFFF00 0.5em solid; color: #FFFF00; clip: rect(140px, 340px, auto, auto);}
    .start+p+p+p+p {background-color: #008080; border: #FFA500 0.5em solid; color: #FFA500; clip: rect(90px, auto, auto, 340px);}
    
    .start:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    .start+p:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    .start+p+p:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    .start+p+p+p:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    .start+p+p+p+p:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    
    
    </style>
    </head>
    <body>
        <p class="start"></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </body>
    </html>
    Roobear 4:
    (Only works in Firefox - should have used adjacent selector instead)
    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    body {
    width:60%;
    margin:20px auto;
    font-size:124%;
    min-width:400px;
    position: absolute;
    left: 20%;
        
    
    }
    
    
    p {position: absolute;}
    
    p {background-color: #FFCCCC; border: #FF0000 0.5em solid; color: #FF0000;}
    p~p {background-color: #FF0000; border: #008000 0.5em solid; color: #008000; clip: rect(auto, 140px, 200px, auto);}
    p~p~p {background-color: #FFFF00; border: #000000 0.5em solid; color: #000000; clip: rect(auto, auto, 90px, 140px);}
    p~p~p~p {background-color: #0000FF; border: #FFFF00 0.5em solid; color: #FFFF00; clip: rect(140px, 340px, auto, auto);}
    p~p~p~p~p {background-color: #008080; border: #FFA500 0.5em solid; color: #FFA500; clip: rect(90px, auto, auto, 340px);}
    
    p:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    p~p:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    p~p~p:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    p~p~p~p:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    p~p~p~p~p:after {content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. "; position: absolute; display: block;}
    
    
    </style>
    </head>
    <body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    </body>
    </html>
    Continued in Next post >>>>>

  24. #74
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Erik.j 1:

    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>
    <title>Erik - least html CSS Quiz #10 // erik.j</title>
    <style type="text/css">
    html{
        position:relative;
        margin:20px auto;
        border:10px solid;
        width:60&#37;;
        background:#f00;
        color:#090;
        text-align:justify;
        font-size:124%;
    }
    body{
        position:absolute;
        top:-10px;
        right:-10px;
        left:150px;
        margin:0;
        padding:0;
        border:solid;
        border-width:10px 10px 0 0;
        background:#ff0;
        color:#000;
    }
    body:after{
        margin:0 0 0 -150px;
    }
    p{
        position:absolute;
        top:100px;
        right:-10px;
        bottom:-10px;
        left:0;
        margin:0;
        border:solid;
        border-width:0 10px 0 0;
        height:auto;
        overflow:hidden;
        background:#fcc;
        color:#f00;
    }
    p:after{
        margin:-100px 0 0 -150px;
    }
    p+p{
        top:200px;
        right:0;
        bottom:-10px;
        left:-160px;
        border-width:0 0 0 10px;
        background:#00f;
        color:#ff0;
    }
    p+p:after{
        margin:-200px 0 0 0;
        border-bottom:10px solid;
    }
    p+p+p{
        top:100px;
        right:-10px;
        left:200px;
        border-width:0 10px 0 0;
        min-width:0;
        background:#088;
        color:#fa0;
    }
    p+p+p:after{
        margin:-100px 0 0 -350px;
        border-bottom:10px solid;
    }
    html:before,
    body:after,
    p:after{
        display:block;
        padding:10px;
        content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante."
    }
    </style></head><body>
     
    <p></p>
    <p></p>
    <p></p>
     
    </body></html>
    Erik.j 2:
    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><title></title><style type="text/css">
    p{
        position:absolute;
        left:20%;
        width:60%;
        min-width:400px;
        background:#ff0;
        font:124% s
    }
    p+p{
        clip:rect(0,150px,200px,0);
        background:red;
        color:#090
    }
    p+p+p{
        clip:rect(100px,auto,auto,350px);
        background:#088;
        color:#fa0
    }
    p+p+p+p{
        clip:rect(100px,350px,200px,150px);
        background:#fcc;
        color:red
    }
    p+p+p+p+p{
        clip:rect(200px,350px,auto,0);
        background:#00f;
        color:#ff0
    }
    p:after{
        display:block;
        border:10px solid;
        padding:10px;
        content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante."
    }
    </style></head><body>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    </body></html>
    Tommy (Autistic Cuckoo):
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Tommy CSS Quiz #10</title>
        <style type="text/css">
          body {position:relative; font-size:150%}
          div {position:absolute; top:0; left:0; width:90%; border:0.5em solid}
          div:after {content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enum. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis molils imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante."}
          #d1 {clip:rect(4.5em, 18em, 9em, 7em); background-color:#fdd; color:#f00}
          #d2 {clip:rect(9em, 18em, auto, 0); background-color:#00f; color:#ff0}
          #d3 {clip:rect(4.5em, auto, auto, 18em); background-color:#099; color:#fc5}
          #d4 {clip:rect(0, auto, 4.5em, 7em); background-color:#ff0; color:#000}
          #d5 {clip:rect(0, 7em, 9em, 0); background-color:#f00; color:#060}
        </style>
      </head>
      <body>
        <div id="d1"></div>
        <div id="d2"></div>
        <div id="d3"></div>
        <div id="d4"></div>
        <div id="d5"></div>
      </body>
    </html>
    Yuriklovsky:

    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=utf-8" />
    <title>Colored box: YuriKolovsky</title>
    <style type="text/css">
    * {
        margin:0;
        padding:0
    }
    html, body { 
      height: 100%; 
    }
    
    #one {
        width:60%;
        margin:20px auto;
        font-size:124%;
        min-width:400px;
        z-index:2;
    }
    div {
       overflow:hidden;
       width:100%;
    }
    p {
       position:relative;
       width:100%;
       white-space:normal;
       display:block;
    }
    .two, .three, .four, .five, .six {
      position:absolute;
      width:100%;
      height:100%;
      top:0;
      left:0;
    }
    div div {
      width:100%;
      heigth:100%;
    }
    .two {
      z-index:5;
    }
    .two p {
      color:green;
      background-color:red;
      z-index:4;
      border-top:solid green 10px;
      border-left:solid green 10px;
    }
    .three {
      overflow:hidden;
      z-index:5;
      margin-left:140px;
      padding-right:0px;
      margin-right:-10px;
      left:10px;
    }
    .three p {
      margin-left:-140px;
      background-color:yellow;
      border-top:solid black 10px;
      border-right:solid black 10px;
      color:black;
    }
    .four {
      overflow:hidden;
      z-index:5;
      margin-top:90px;
      margin-left:140px;
      left:10px;
      top:10px;
    }
    .four p {
      margin-top:-90px;
      margin-left:-140px;
      color:red;
      background-color:pink;
    }
    
    .five {
      overflow:hidden;
      z-index:5;
      margin-top:190px;
    
    }
    .five p {
      margin-top:-190px;
      color:yellow;
      background-color:blue;
      border-left:solid yellow 10px;
      border-bottom:solid yellow 10px;
      top:10px;
    }
    
    .six {
      overflow:hidden;
      z-index:5;
      margin-left:340px;
      margin-top:100px;
    }
    .six p {
      margin-left:-340px;
      margin-top:-100px;
      background-color:#008080;
      color:orange;
      top:10px;
      left:10px;
      border-right:solid orange 10px;
      border-bottom:solid orange 10px;
    }
    #one {
      position:relative;
      height:60%;
      width:60%;
      z-index:10;
      overflow:visible;
    }
    
    
    
    
    </style>
    </head>
    <body>
    
    <div id="one">
        
        <div class="two"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p></div>
        <div class="three"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p></div>
            <div class="four"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p></div>
        <div class="five"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p></div>
        <div class="six"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p></div>
        
    </div>
    
    </body>
    </html>
    Loginsan 1:

    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0
    }
    div{
    width:60%;
    margin:20px auto;
    font-size:124%;
    min-width:400px;
    position:relative;
    }
    p {position:absolute; border:10px solid #717171; padding:10px}
    #p5 {z-index:6; border-color:green; background:red; color:green; clip:rect(0,150px,200px,0)}
    #p4 {z-index:2; background:pink; color:red; clip:rect(90px,auto,200px,auto)}
    #p3 {z-index:3; border-color:black; background:yellow; color:black; clip:rect(auto,auto,90px,auto)}
    #p2 {z-index:1; border-color:yellow; background:blue; color:yellow;}
    #p1 {z-index:5; border-color:orange; background:teal; color:orange; clip:rect(90px,auto,auto,370px)}
    
    </style>
    </head>
    <body>
    <div>
    <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p id="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p id="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p id="p4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    <p id="p5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    </body>
    </html>
    Loginsan 2: (only works in Opera)
    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=utf-8" />
    <title>Loginsan Colored box</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0
    }
    div{
    width:60%;
    margin:20px auto;
    font-size:124%;
    min-width:400px;
    position:relative;
    }
    p {position:absolute; border:10px solid #717171; padding:10px; content:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante."}
    #p5 {z-index:6; border-color:green; background:red; color:green; clip:rect(0,150px,200px,0)}
    #p4 {z-index:2; background:pink; color:red; clip:rect(90px,auto,200px,auto)}
    #p3 {z-index:3; border-color:black; background:yellow; color:black; clip:rect(auto,auto,90px,auto)}
    #p2 {z-index:1; border-color:yellow; background:blue; color:yellow;}
    #p1 {z-index:5; border-color:orange; background:teal; color:orange; clip:rect(90px, auto, auto, 370px)}
    
    </style>
    </head>
    <body>
    <div>
    <p id="p1"></p><p id="p2"></p><p id="p3"></p><p id="p4"></p><p id="p5"></p>
    </div>
    </body>
    </html>
    Raffles:

    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    html {
      margin:0;
      padding:0;
      height:100%;
    }
    body {
      height:70%;
      width:60%;
      border:1px solid black;
      margin: 20px auto;
      position:relative;
      font-size:150%;
    }
    div {
      color: green;
      background:red;
      width:32%;
      height:60%;
      border:4px solid green;
      overflow:hidden;
      border-width:4px 0 0 4px;
      whitespace:no-wrap;
      position:absolute;
      margin-left:-3px;
    }
    p {
      position:relative;
      width:313%;
    }
    div + div {
      color:black;
      background:yellow;
      width:68%;
      right:0;
      left:auto;
      border:4px solid black;
      border-width:4px 4px 0 0;
      height:25%;
      margin-right:-3px;
    }
    div + div p {
      right:0;
      width:148%;
      height:30%;
      margin-left:-47%;
    }
    div + div + div {
      background:pink;
      color:red;
      width:28%;
      height:35%;
      left:32%;
      top:25%;
      border:0;
      margin:4px 4px 0 0;
    }
    div + div + div p {
      left:-67.5%;
      top:-71.5%;
      width:358%;
      }
    div + div + div + div {
      left:60%;
      bottom:0;
      height:75%;
      width:40%;
      background:teal;
      color:orange;
      border:4px solid orange;
      border-width:0 4px 4px 0;
    }
    div + div + div + div p {
      left:-102.5%;
      right:0;
      width:250%;
      top:-33%;
    }
    div + div + div + div + div {
      left:-3px;
      background:blue;
      color:yellow;
      bottom:-7px;
      height:40%;
      width:60%;
      top:auto;
      border:4px solid yellow;
      border-width:0 0 4px 4px;
    }
    div + div + div + div + div p {
      left:47%;
      width:170%;
      right:auto;
      top:-146.5%;
    }
    </style>
    </head>
    <body>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper 
    
    accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper 
    
    sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, 
    
    nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. 
    
    Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus 
    
    mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros 
    
    scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus 
    
    et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum 
    
    pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper 
    
    accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper 
    
    sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, 
    
    nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. 
    
    Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus 
    
    mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros 
    
    scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus 
    
    et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum 
    
    pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper 
    
    accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper 
    
    sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, 
    
    nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. 
    
    Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus 
    
    mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros 
    
    scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus 
    
    et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum 
    
    pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper 
    
    accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper 
    
    sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, 
    
    nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. 
    
    Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus 
    
    mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros 
    
    scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus 
    
    et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum 
    
    pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper 
    
    accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper 
    
    sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, 
    
    nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. 
    
    Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus 
    
    mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros 
    
    scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus 
    
    et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum 
    
    pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    </body>
    </html>
    RyanReese:
    (Needs tidying up and borders need adding but essentially correct)

    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=utf-8" /> <title>Colored box</title> <style type="text/css"> * { margin:0; padding:0; color:green; } html, body { height:100%; } div#wrapper { position:absolute; font-size:124%; width:87%; margin:1%; height:100%; overflow:hidden; } p { position:absolute; font-size:120%; width:100%; } #red { position:absolute; width:100%; height:105%; overflow:hidden; z-index:0; margin-left:0; } #yellow { position:absolute; width:100%; height:100%; overflow:hidden; left:25%; } #pink { position:absolute; width:100%; height:100%; left:25%; overflow:hidden; z-index:0; top:24%; } #pink p { background:pink; left:-25%; z-index:10; top:-24%; color:red; } #yellow p { background:yellow; left:-25%; color:#000; } #red p { background:red; z-index:10; } #teal { position:absolute; width:100%; height:155%; left:45%; overflow:hidden; z-index:1; top:24.0%; } #teal p { background:teal; left:-45%; color:gold; overflow:hidden; top:-15.5%; padding-bottom:0.5%; } #blue { position:absolute; width:100%; height:30%; left:-10%; z-index:-1; top:101%; } #blue p { background:blue; left:10%; color:yellow; overflow:hidden; top:-335%; } </style> </head> <body> <div id="wrapper"> <div id="red"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p> </div> <div id="yellow"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p> </div> <div id="pink"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p> </div> <div id="teal"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p> </div> <div id="blue"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p> </div> </div> </body> </html>
    arkh:
    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    *{margin:0;padding:0}
    div{width:60%;margin:20px auto;font-size:124%;min-width:400px;position:relative;}
    p{border:solid 10px;position:absolute;top:0;left:0;padding:12px 10px;}
    #tl{color:#008000;border-color:#008000;background:#f00;}
    #tr{clip:rect(auto,auto,90px,140px);color:#000;border-color:#000;background:#ff0;}
    #c{clip:rect(90px,auto,190px,140px);color:#f00;background:#fcc;}
    #bl{clip:rect(190px,auto,auto,auto);color:#ff0;border-color:#ff0;background:#00f;}
    #br{clip:rect(90px,auto,auto,340px);color:#ffa500;border-color:#ffa500;background:#008080;}
    </style>
    </head>
    <body>
    <div>
      <p id="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
      <p id="tr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
      <p id="c">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
      <p id="bl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
      <p id="br">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p>
    </div>
    </body>
    </html>
    rainmakr:
    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=utf-8" />
    <title>Colored box</title>
    <style type="text/css">
    body {
      background-color:#fff; 
      position:relative;
    }
    * {
      margin:0;
      padding:0;
    }
    
    div#wrapper, p {
      position:relative;
    }
    
    div {  
      overflow:hidden;
    }
    
    div#wrapper {
      width:60%;
      margin:20px auto;
      font-size:124%;
      min-width:400px;
      background-color:f00;
      z-index:500;
      overflow:visible;
    }
    div#wrapper1 {
      height:90px;
      left:150px;
      position:relative;
      z-index:1500;
      border-right:5px solid #000;
      margin-right:150px;
      border-top:5px solid #000;
    }
    div#wrapper1 p {
      background-color:#ff0; 
      margin-left:-145px;
      margin-right:-305px;
      padding-right:300px;
    }
    div#wrapper2 {
      height:185px;
      color:#fff;
      position:absolute;
      left:0;
      top:0;
      z-index:1000;
      background-color:#f00;
      border-left:5px solid #0f0;
      border-top:5px solid #0f0;
    }
    div#wrapper2 p {
      height:190px;
      color:#0f0;
    }
    div#wrapper3 {
      position:absolute;
      left:0px;
      top:90px;
      left:150px;
      height:100px;
      z-index:2000;
      width:100%;
    }
    div#wrapper3 p {
      margin-top:-85px;
      overflow:hidden;
      left:-145px;
      background-color:#fcf;
      margin-right:5px;  
      color:#f00;
    }
    div#wrapper4 {
      color:#fff;
      position:absolute;
      left:0;
      top:190px;
      z-index:1000;
      background-color:#00f;
      border-left:5px solid #ff0;
      border-bottom:5px solid #ff0;
    }
    div#wrapper4 p {
      margin-top:-185px;
      color:#ff0;
    }
    div#wrapper5 {
      color:#fff;
      position:absolute;
      left:350px;
      right:0px;
      top:90px;
      z-index:2000;
      background-color:#699;
      border-right:5px solid #f90;
      border-bottom:5px solid #f90;
    }
    div#wrapper5 p {
      margin-top:-85px;
      margin-left:-345px;
      margin-right:-5px;
      color:#f90;
    }
    
    </style>
    </head>
    <body>
    
      <div id="wrapper">
        <div id="wrapper1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante. </p></div>
        <div id="wrapper2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.</p></div>
        <div id="wrapper3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.</p></div>
        <div id="wrapper4"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.</p></div>
        <div id="wrapper5"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.</p></div>
      </div>
    
    </body>
    </html>
    geargolum: (nearly right)
    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=utf-8" /> <title>Colored box</title> <style type="text/css"> * { margin:0; padding:0 } div{ width:60%; margin:20px auto; font-size:124%; min-width:400px; position:relative; } p.tl{ background:red; color:green; clip:rect(0, 150px, 200px, 0); position:absolute; border-left: #99CC00 solid 2px; border-top: #99CC00 solid 2px; z-index: 1; } p.tr{ background:blue; color:#000; clip:rect(0, 450px, 200px, 100px); position:absolute; border-right: #996666 solid 2px; border-top: #996666 solid 2px; z-index: 2; } p.bl{ background: #0066CC; color: #00CC66; clip:rect(150px, 200px, 350px, 0px); position:absolute; border-left: #CCFF33 solid 2px; border-bottom: #CCFF33 solid 2px; z-index: 3; } p.middle{ background: #00FF00; color: #000; clip:rect(100px, 350px, 150px, 100px); position:absolute; z-index: 4; } p.br{ background: #CC33CC; color: #CCFF99; clip:rect(150px, 450px, 350px, 150px); position:absolute; border-right: #000 solid 2px; border-bottom: #000 solid 2px; z-index: 5; } </style> </head> <body> <div> <p class="tl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.</p> <p class="tr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.</p> <p class="bl">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.</p> <p class="br">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.</p> <p class="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque, ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis, rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis, massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque. Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis accumsan sem. Aenean vel ante.</p> </div> </body> </html>
    markbrown4: (This should jhave been fluid not fixed )


    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=utf-8"  />
    <title>Colored box</title>
    <style  type="text/css">
    * {
        margin:0;
        padding:0
    }
    div.outer  {
        margin:20px auto;
        font-size:124%;
        width:400px;
         background: red;
        position: relative;
        height: 400px;
    }
    .box1,  .box2, .box3, .box4, .box5 {
        overflow: hidden;
        position:  absolute;
    }
    .box1 .inner, .box2 .inner, .box3 .inner, .box4 .inner, .box5  .inner {
        position: absolute;
         background: FFCCCC;
        color:  #FF0000;
        border: 5px solid #FF0000;
        left: 0;
        right:  0;
        top: 0;
        bottom: 0;
    }
    .inner { width: 370px; height:  370px; padding: 10px }
    .box1 {
        z-index:9;
        width: 50%;
         height: 320px;
        position: absolute;
        bottom: 0;
        right:  0;
        
    }
    .box1 .inner {
        background-color: green;
         border-color: orange;
        color: orange;
        margin-left:-100%;
         margin-top: -80px;
    }
    .box2 .inner {
        background-color: blue;
         border-color: yellow;
        color: yellow;
    }
    .box2 {
        width:  400px;
        height: 400px;
    }
    
    .box3 .inner {
        background-color:  #FFCCCC;
        border-color: red;        
        color: red;
    }
    .box3  {
        width: 300px;
        height: 150px;
    }
    .box4 .inner {
         background-color: yellow;
        border-color: #000;
        color:  #000;
    }
    .box4 {
        width: 400px;
        height: 80px;
    }
    .box5  .inner {
        background-color: red;
        border-color: green;
        color:  green;
    }
    .box5 {
        width: 150px;
        height:  150px;
    }
    </style>
    </head>
    <body>
    <div  class="outer">
      <div class="box1">
        <div  class="inner">
          <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque,  ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit  vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes,  nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis,  rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis,  massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi  eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque.  Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus  augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis  accumsan sem. Aenean vel ante. </p>
        </div>
       </div>
      <div class="box2">
        <div  class="inner">
          <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque,  ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit  vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes,  nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis,  rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis,  massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi  eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque.  Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus  augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis  accumsan sem. Aenean vel ante. </p>
        </div>
       </div>
      <div class="box3">
        <div  class="inner">
          <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque,  ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit  vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes,  nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis,  rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis,  massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi  eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque.  Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus  augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis  accumsan sem. Aenean vel ante. </p>
        </div>
       </div>
      <div class="box4">
        <div  class="inner">
          <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque,  ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit  vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes,  nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis,  rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis,  massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi  eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque.  Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus  augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis  accumsan sem. Aenean vel ante. </p>
        </div>
       </div>
      <div class="box5">
        <div  class="inner">
          <p>Lorem ipsum dolor sit amet, consectetur  adipiscing elit. Morbi mi. Nullam ullamcorper accumsan nisi. Nulla scelerisque,  ipsum id ultricies tempor, lorem ipsum dignissim nibh, semper sagittis nisi elit  vel nulla. Cum sociis natoque penatibus et magnis dis parturient montes,  nascetur ridiculus mus. Mauris quam tellus, imperdiet id, fringilla quis,  rhoncus quis, enim. Cras ornare. Etiam congue. Nulla facilisi. In sagittis,  massa quis mollis imperdiet, tellus mauris vulputate nisi, eu auctor orci mi  eget nisl. Donec nec nibh. Nulla sit amet nulla in eros scelerisque scelerisque.  Vivamus id risus. Vestibulum ante ipsum primis in faucibus orci luctus et  ultrices posuere cubilia Curae; Duis varius, tellus eget bibendum porta, lacus  augue bibendum pede, vel aliquet purus massa nec libero. Mauris sagittis  accumsan sem. Aenean vel ante. </p>
        </div>
       </div>
    </div>
    </body>
    </html>
    That's about it but some of you sent me multiple solutions so if I've missed your best entry then feel free to post it below or if I have missed anyone out the just shout.

    Congratulations to those that took part and those that tried but failed.

    Stand by for the next quiz which will follow shortly. I will announce when the new quiz is posted at the end of this thread so stay subscribed.
    Last edited by Paul O'B; Jan 23, 2009 at 12:53. Reason: inserted correct code

  25. #75
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    omg, that clip element is amazing!!! ive needed something like that for some time now, i will now test it in ie.

    Winner of the fastest entry was again Centauri who's first entry arrived within an hour of the contest being set.
    it took me about an hour to make it >_> (he lies, don't listen), if i would have been with the pc at the time, maybe i would have got 2nd place
    if i just knew about clip:rect! well, now i know


    Good Job Centauri, excellent CSS knowledge.
    i like your solution #2 the most.

    i applaud Erik.j, Tommy (Autistic Cuckoo), everyone else and Paul O'B for actually posting the quiz, many thanks, this is an amazing idea that i have never seen before... anywhere else.

    now lets see who won the largest in size solution? xD



    edit:
    clip:rect(50px 250px 100px 50px); seems to work in all browsers the same, am i missing something?
    why use
    Code:
    clip:rect(50px, 250px, 100px, 50px);
    if
    Code:
    clip:rect(50px 250px 100px 50px);
    works?
    use clip:rect(50px 250px 100px 50px); and forget about clip:rect(50px, 250px, 100px, 50px); immediately comes to mind.

    edit:
    i noticed that, none of the solutions have non repeating text within html (or they dont have it at all).
    but i would have liked to see a solution that has the text used once, but still inside html and not css.
    i don't like the idea of mixing content with css.
    Last edited by YuriKolovsky; Jan 23, 2009 at 12:57.


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
  •