SitePoint Sponsor

User Tag List

Page 4 of 4 FirstFirst 1234
Results 76 to 89 of 89
  1. #76
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Solutions

    In case you haven't yet worked out the main method of doing the quiz I'll quickly run through the techniques required.

    As most of you guessed the secret to constructing the logo was to use the border property to create the rectangular shapes needed for the logo. As borders are mitred towards the corners it means that by declaring different widths for various sides of the border we can achieve different angles.

    If you have never heard of this technique then it was used many many years ago in this wonderful demo.

    To get the transparent effect on one edge all that was needed was to use transparent as the border-color and that allowed the background of the page to be seen underneath.

    IE6 doesn't understand transparent borders so another trick was needed. The trick was to use dashed (or dotted) borders because the first part of the border is always transparent in IE6 and therefore gives us the same effect as other browsers.

    The only other problems to overcome would be positioning the borders in the right place which could be achieved with floats and margins.

    Using ems for all measurements means that everything can scale together and look good at all sizes.

    There were also some unorthodox solutions which I will show later.

    Here is the Basic version that Erik and I came up with.
    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>Simon/Paul Quiz#12 - Level 2-5</title>
    <style type="text/css">
    h1 {
        background:#eef;
        font-size:300&#37;;
        float:left;
            padding:0 0 0 3px;
            margin:0 0 10px 0;
    clear:both;
    }
    h1.alt1{background:#fff}
    h1.alt2{background:#ffcccc}
    
    .a1 span.a {
        border:solid #f60;
        border-left-color:transparent;
        border-width:0 0 .55em .27em;
        border-style: solid dashed;
        float:left;
        width:.28em;
        height:0;
        overflow:hidden;
    }
    .a1 span.b {
        border: #f60;
        border-width:.55em .27em 0 0;
        border-right-color:transparent;
        border-style:solid dashed;
        float:left;
        height:0;
        overflow:hidden;
    }
    .a2 span.a {
        border:solid #036;
        border-left-color:transparent;
        border-width:.55em 0 0 .27em;
        border-style: solid dashed;
        float:left;
        width:.28em;
        height:0;
        overflow:hidden;
    }
    .a2 span.b {
        border:solid transparent;
        border-width:.55em 0 0 .27em;
        border-left-color:#036;
        border-style:dashed solid;
        float:left;
        height:0;
        overflow:hidden;
    }
    .a1 {
        display:inline;
        float:left;
    }
    .a2 {
        display:inline;
        float:left;
        margin:.61em 0 0 -.82em;
    }
    .a3 {
        margin:.61em 0 0 .05em;
    }
    .a4 {
        margin:1.21em 0 0 -.82em;
    }
    strong {
        display:inline;
        float:left;
        clear:left;
        margin:-1.555em 0 0 1.85em;
        color:#036;
    }
    </style></head><body>
     
    <h1>
        <span class="a1">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <span class="a2">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <span class="a2 a3">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <span class="a1 a4">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <strong>sitepoint</strong>
    </h1>
    
    <h1 class="alt1">
        <span class="a1">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <span class="a2">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <span class="a2 a3">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <span class="a1 a4">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <strong>sitepoint</strong>
    </h1>
    
    <h1 class="alt2">
        <span class="a1">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <span class="a2">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <span class="a2 a3">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <span class="a1 a4">
            <span class="a"></span>
            <span class="b"></span>
        </span>
        <strong>sitepoint</strong>
    </h1>
    
    </body></html>
    The first correct solution to work in all browsers using the above method was Centauri so well done Graeme

    The first correct solution using a method other than borders was from RoObear - so well done also.

    They are therefore the joint winners of this competetion although there are in fact others who came up with the winning solution so i will just mention all below.

    Vim.F, funktifiknow, YuriKolovsky, 2009site2009 and not forgetting Eric Watson - level 5

    Special mention to all the following who were nearly there and some had multiple entries.

    markBrown4, Stormrider, Eric Watson, Coothead, SecretAgent Regge, Ornette.

    I also had some othe interesting entries from:

    zcorpan, SecretAgentRegge, stomme Poes all using different methods.

    Here are the entries from Centauri and RoObear first and then I will just post some of the other interesting entries.

    Centauri:
    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>Untitled Document</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-size: 150%;
        padding: 20px;
    }
    h1 {
        font-size: 1.8em;
        float: left;
        color: #003366;
        margin: -0.4em 0 -1em 0.2em;
    }
    b, i {
        float: left;
        height: 0;
        width: 0;
        overflow: hidden;
    }
    b {
        width: 0.5em;
    }
    .orange {
        height: 1em;
        margin-bottom: 0.1em;
        clear: both;
    }
    .blue {
        float: left;
        margin: 0 0.1em 0.1em 0;
    }
    .lower {
        margin-left: 1.6em;
    }
    .orange b {
        border-bottom: 1em solid #FF6600;
        border-left: 0.5em dashed transparent;
    }
    .orange i {
        border-top: 1em solid #FF6600;
        border-right: 0.5em dashed transparent;
    }
    .blue b {
        border-top: 1em solid #003366;
        border-left: 0.5em dashed transparent;
    }
    .blue i {
        border-bottom: 1em solid #003366;
        border-right: 0.5em dashed transparent;
    }
    </style>
    </head>
    
    <body>
    <div class="orange"><b></b><i></i></div>
    <div class="blue"><b></b><i></i></div>
    <div class="blue"><b></b><i></i></div>
    <h1>sitepoint</h1>
    <div class="orange lower"><b></b><i></i></div>
    </body>
    </html>
    RoObear: (uses an "x" not the border property)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>ro0bear</title>
    <style type="text/css">
    #container {
        margin: 10%;
        background-color: #EEEEFF;
        height: 14.2em;
        position: relative;
        padding: 0;
        width: 40em;
    }
    #b1 {
        position: absolute;
        font-family: arial;
        font-size: 20em;
        height: 0.225em;
        width: 0.319em;
        font-weight: bold;
        overflow: hidden;
        color: #FF6600;
        padding: 0;
    }
    #b1 p {
        width: 1em;
        height: 1em;
        overflow: hidden;
        padding: 0;
        margin: 0;
        position: absolute;
        left: -5%;
        bottom: -0.17em;
        line-height: 100%;
    }
    #b2 {
        position: absolute;
        top: 0.24em;
        font-family: arial;
        font-size: 20em;
        height: 0.225em;
        width: 0.325em;
        font-weight: bold;
        overflow: hidden;
        color: #003366;
        padding: 0;
    }
    #b2 p {
        width: 1em;
        height: 1em;
        overflow: hidden;
        padding: 0;
        margin: 0;
        position: absolute;
        left: -0.335em;
        bottom: -0.17em;
        line-height: 100%;
    }
    #b3 {
        position: absolute;
        top: 0.480em;
        left: 0.3em;
        font-family: arial;
        font-size: 20em;
        height: 0.225em;
        width: 0.319em;
        font-weight: bold;
        overflow: hidden;
        color: #FF6600;
        padding: 0;
    }
    #b3 p {
        width: 1em;
        height: 1em;
        overflow: hidden;
        padding: 0;
        margin: 0;
        position: absolute;
        left: -5%;
        bottom: -0.17em;
        line-height: 100%;
    }
    #b4 {
        position: absolute;
        top: 0.24em;
        left: 0.292em;
        font-family: arial;
        font-size: 20em;
        height: 0.225em;
        width: 0.325em;
        font-weight: bold;
        overflow: hidden;
        color: #003366;
        padding: 0;
    }
    #b4 p {
        width: 1em;
        height: 1em;
        overflow: hidden;
        padding: 0;
        margin: 0;
        position: absolute;
        left: -0.335em;
        bottom: -0.17em;
        line-height: 100%;
    }
    h1 {
        font-size: 6em;
        padding-top: 0.5em;
        padding-bottom: 0.24em;
        padding-left: 2.5em;
        font-family: serif;
        color: #003366;
    }
    </style>
    </head>
    <body>
    <div id="container">
        <div id="b1">
            <p>X</p>
        </div>
        <div id="b2">
            <p>X</p>
        </div>
        <div id="b3">
            <p>X</p>
        </div>
        <div id="b4">
            <p>X</p>
        </div>
        <h1>sitepoint</h1>
    </div>
    </body>
    </html>
    Continued in next post:

  2. #77
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Solutions Continued:

    Vim.F
    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" xml:lang="en" lang="en">
    <head>
    <title>Sitepoint Logo - update 01</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
        /* Preparation */
        * {
            margin:0;
            padding:0;
        }
        body {
            padding:1em;
            background:#fcc;
            font-size:100&#37;;
        }
        /* The Logo */
        #ico {
            float:left;
            width:4.8em;
            margin:0 .5em 0 0;
        }
        body h1 {
            float:left;
            color:#036;
            font:3em/1.74 arial,helvetica,sans-serif;
        }
        body i {
            float:left;
            height:0;
            width:0;
            line-height:0;
            position:relative;
            border-right:.06em solid #f60;
            border-bottom:1.75em solid #f60;
            border-left:.75em dotted transparent;
        }
        body i i {
            float:right;
            padding:0 .75em 0 0;
            margin:0 -1.5em -1.75em 0;
            border:none;
            border-top:1.75em solid #f60;
            border-right:.75em dotted transparent;
        }
        body .a {
            margin:0 3.75em .25em 0;
        }
        body .b-1,
        body .b-2 {
            border-top:1.75em solid #036;
            border-right:.06em solid #036;
            border-bottom:none;
            margin:0 0 .25em;
        }
        body .b-1 i,
        body .b-2 i {
            border-top:none;
            border-right:.75em dotted transparent;
            border-bottom:1.75em solid #036;
            margin:-1.75em -1.5em 0 0;
        }
        body .b-2 {
            float:right;
            margin-right:1.5em;
        }
        body .c {
            margin:0 1.5em .25em 0;
            float:right;
        }
    </style>
    </head>
    <body>
        <div id="ico">
            <i class="a"><i></i></i>
            <i class="b-1"><i></i></i>
            <i class="b-2"><i></i></i>
            <i class="c"><i></i></i>
        </div>
        <h1>sitepoint</h1>
    </body>
    </html>
    There were other entries on a similar vein so I won't post them all but instead focus on some other different methods.

    Zcorpan: (uses generated content works in Opera )
    Code:
    <!DOCTYPE html>
    <title>CSS quiz 12A (zcorpan)</title>
    <style>
    .logo {
        display:inline-block;
        font:bold 7em Times New Roman, Times, serif;
        height:0;
        width:.2em;
        overflow:hidden;
        padding-top:.1em;
        padding-bottom:.1em;
        vertical-align:middle
    }
    .logo:before {
        content:'/\a/';
        display:block;
        white-space:pre;
        line-height:.78em;
        margin-top:-.79em;
        text-indent:.1em;
        margin-left:-.1em;
        color:orangered
    }
    .logo:after {
        content:'\\\\';
        display:block;
        white-space:nowrap;
        height:.3em;
        overflow:hidden;
        margin-top:-1.03em;
        letter-spacing:-.18em;
        color:navy
    }
    h3 {
        background:pink
    }
    </style>
    <h1><span class=logo></span> sitepoint</h1>
    <h2><span class=logo></span> sitepoint</h2>
    <h3><span class=logo></span> sitepoint</h3>
    zcorpan (uses CSS transformations - this only works in firefox 3.1 (nightly)

    Code:
    <!DOCTYPE html>
    <style>
    .logo {
        display:inline-block;
        vertical-align:middle
    }
    .logo:before {
        content:'\2580\a\2580';
        white-space:pre;
        color:orangered;
        -webkit-transform:skew(-15deg);
        -moz-transform:skew(-15deg);
        display:block;
        text-indent:-1.35em;
        padding-left:1.35em;
        line-height:1.3
    }
    .logo:after {
        content:'\2580  \2580';
        color:navy;
        display:block;
        -webkit-transform:skew(15deg);
        -moz-transform:skew(15deg);
        margin-top:-2em;
        padding-left:.3em
    }
    h3 {
        background:pink
    }
    </style>
    <h1><span class=logo></span> sitepoint</h1>
    <h2><span class=logo></span> sitepoint</h2>
    <h3><span class=logo></span> sitepoint</h3>
    secretAgentRegge (Css transformations - works in Safari)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
        <title>CSS - Test Your CSS Skills Number 12 A</title>
        <style type="text/css">
            body {padding:0.5em; font-size:1.5em; font-family:"Times New Roman", sans-serif;}
            b,i {display:block; height:3em; width:3em; margin-right:1em; margin-bottom:0.3em; overflow:hidden;}
            b {background:#f60; -webkit-transform:skew(-20deg, 0deg);}
            i {float:left; background:#036; -webkit-transform:skew(20deg, 0deg);}
            p + b {clear:both; margin-left:4em;}
            p {float:left; padding-left:0.18em; color:#036; font-size:6em; font-weight:bold; height:0em; overflow:visible; margin-top:-0.45em;}
        </style>
    </head>
    <body>
    <b></b><i></i><i></i><p>sitepoint</p><b></b>
    </body>
    </html>
    Stomme Poes:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="nl">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="content-language" content="nl">
    <title>Teh Log0z</title>
    <meta name="description" content="logoz zonder tekens behalve voor IE6">
    <style type="text/css">
    
    * {
        margin: 0;
        padding: 0;
    }
    #logo {
        margin: 10px;
        padding-bottom: 1em;
        font-family: georgia, "times new roman", serif;
        width: 40em; /*IE6*/
        overflow: hidden;
        background-color: #eef; /*testz*/
    }
    b, i {
        height: 0;
        width: 0;
        float: left;
        font: bold 1.5em/1.2em impact, "arial black", sans-serif;/*IE6*/
        letter-spacing: -.4em; /*IE6*/
    }
    div[id] b, div[id] i {
        border-top: 1.8em solid transparent;
        border-right: 1.3em solid #f60;
        text-indent: -9999em;
        font-size: 1em;
        line-height: 1.1em;
    }
    i {
        font-style: italic; /*IE6*/
        color: #f60; /*IE6*/
    }
    div[id] i+i {
        border: 1em solid #f60;
        border-bottom-color: transparent;
        border-width: 0 0 1.8em 1.3em;
    }
    div p+i {
        margin-left: 2.8em;
    }
    div[id] b {
        font-size: .7em;
        border-top: 0;
        border-bottom: 1.8em solid transparent;
        border-right: 1.3em solid #036;
    }
    div b[class] {
        border-top: 1.8em solid transparent;
        border-left: 1.3em solid #036;
        border-bottom: 0;
        border-right: 0;
    }
    p {
        clear: left;
        color: #036;
        width: 100%; /*IE6*/
        margin: -.5em 0;/*IE6*/
        line-height: 1.5em;
    }
    div[id] p {
        padding: .14em 0;
        margin: 0;
        font-size: 1.5em;
        line-height: 1em;
        overflow: hidden;
    }
    </style>
    </head>
    <body>
    <div id="logo"> <i>//////</i><i></i>
        <p><b>\\\\\\</b><b class="placeyoursecretmessagehere"></b><b>\\\\\\</b><b class="lawlz"></b> sitepoint.nl</p>
        <i> </i><i>//////</i> </div>
    </body>
    </html>
    Yurikolovsky: (generateed content modern browers only)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html lang="en">
      <head>
      <meta http-equiv="logo-Type" logo="text/html; charset=utf-8">
      <title>YuriKolovsky: Solution to CSS Quiz #12A modern browsers</title>
      <style type="text/css">
      * {
            margin:0;
            padding:0;
            position:relative;
      }
      body {
            font-size:100%;  
      }
      #container {
            height:7.125em;
            border:solid #000 1px;
            background-color:#eeeeff;
            display:block;
            width:18.7em;
            margin:50px auto;
            padding:0.1em 2.625em 0.1em 0.1em;
      }
      span {
            font-size:4em;  
            font-family:"Times New Roman", Times, serif;
            color:#003366;
            float:left;
            line-height:160%;
            left:0.156em;
            height:100%;
      }
      #logo {
            width:7.375em;/*6.875em*/
            height:7.125em;
            float:left;
      }
      #logo b {
            float:left;
            margin:0 0.25em 0.25em 0;
      }
      #logo b:first-child {
            clear:right;
            margin-right:3.248em;
      }
      #logo b:last-child {
            clear:left;
            margin-left:3.248em;
      }
      #logo b:before, #logo b:after {
            content:"";
            display:block; 
            overflow:hidden;    
            border:0;
            height:0;
            width:0;
      }
      #logo b:before {
            border-right:1.063em dashed transparent;
            border-left:1.125em solid #003366;
            border-bottom:2.188em solid #003366;
            margin-left:1.063em;
      }
      #logo b:after {
            border-left: 1.063em dashed transparent;
            border-right: 1.063em dashed transparent;
            border-top:2.188em solid #003366;
            margin-top:-2.188em;
      }
      #logo b:first-child:before {
            border-left:1.063em dashed transparent;
            border-right:1.063em solid #ff6600;
            border-bottom:2.188em solid #ff6600;
            margin-left:0;
      }
      #logo b:first-child:after {
            border-left:1.063em solid #ff6600;
            border-right:1.125em dashed transparent;
            border-top:2.188em solid #ff6600;
            margin-left:1.063em;
            margin-top:-2.188em;
      }
      #logo b:last-child:before {
            border-left:1.063em dashed transparent;
            border-right:1.063em solid #ff6600;
            border-bottom:2.188em solid #ff6600;
            margin-left:0.25em;
      }
      #logo b:last-child:after {
            border-left:1.063em solid #ff6600;
            border-right:1.125em dashed transparent;
            border-top:2.188em solid #ff6600;
            margin-left:1.313em;
            margin-top:-2.188em;
      }
      </style>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
      <div id="container">
      <div id="logo"> <b></b><b></b><b></b><b></b> </div> 
      <span>sitepoint</span>
      </div>
      </body>
      </html>
    Ornettes answer to quiz B with the square boxes:
    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;
    }
    
    div.box_1 {
        width: 40px;
        height: 40px;
        border-top: solid 2px #ccc;
        border-left: solid 2px #ccc;
        border-right: solid 2px #000;
        border-bottom: solid 2px #000;
        position:relative;
        top: 0px;
        left: 0px;
    }
    
    div.box_2 {
        width: 30px;
        height: 30px;
        border-top: solid 2px #ccc;
        border-left: solid 2px #ccc;
        border-right: solid 2px #000;
        border-bottom: solid 2px #000;
        position:relative;
        top: -39px;
        left: 5px;
    }
    
    div.box_3 {
        width: 20px;
        height: 20px;
        border-top: solid 2px #ccc;
        border-left: solid 2px #ccc;
        border-right: solid 2px #000;
        border-bottom: solid 2px #000;
        position:relative;
        top: -68px;
        left: 10px;
    }
    
    div.box_4 {
        width: 10px;
        height: 10px;
        border-top: solid 2px #ccc;
        border-left: solid 2px #ccc;
        border-right: solid 2px #000;
        border-bottom: solid 2px #000;
        position:relative;
        top: -87px;
        left: 15px;
    }
    
    div.box_5 {
        width: 2px;
        height: 2px;
        border-top: solid 2px #ccc;
        border-left: solid 2px #ccc;
        border-right: solid 2px #000;
        border-bottom: solid 2px #000;
        position:relative;
        top: -97px;
        left: 19px;
    }
    
    div.container_1 {
        width: 45px;
        height: 45px;
        position: relative;
        top: 0;
        left: 0;
        overflow: hidden;
        font-size: 0;
    }
    
    div.container_2 {
        width: 45px;
        height: 45px;
        position: relative;
        top: -38px;
        left: 600px;
        overflow: hidden;
        font-size: 0;
    }
    
    div.container_3 {
        width: 45px;
        height: 45px;
        position: relative;
        top: 110px;
        left: 300px;
        overflow: hidden;
        font-size: 0;
    }
    
    div.container_4 {
        width: 45px;
        height: 45px;
        position: relative;
        top: 240px;
        left: 0;
        overflow: hidden;
        font-size: 0;
    }
    
    div.container_5 {
        width: 45px;
        height: 45px;
        position: relative;
        top: 200px;
        left: 600px;
        overflow: hidden;
        font-size: 0;
    }
    </style>
    </head>
    <body>
    <div class ="container_1">
      <div class="box_1"></div>
      <div class="box_2"></div>
      <div class="box_3"></div>
      <div class="box_4"></div>
      <div class="box_5"></div>
    </div>
    <div class="container_2">
      <div class="box_1"></div>
      <div class="box_2"></div>
      <div class="box_3"></div>
      <div class="box_4"></div>
      <div class="box_5"></div>
    </div>
    <div class="container_3">
      <div class="box_1"></div>
      <div class="box_2"></div>
      <div class="box_3"></div>
      <div class="box_4"></div>
      <div class="box_5"></div>
    </div>
    <div class="container_4">
      <div class="box_1"></div>
      <div class="box_2"></div>
      <div class="box_3"></div>
      <div class="box_4"></div>
      <div class="box_5"></div>
    </div>
    <div class="container_5">
      <div class="box_1"></div>
      <div class="box_2"></div>
      <div class="box_3"></div>
      <div class="box_4"></div>
      <div class="box_5"></div>
    </div>
    </body>
    </html>
    YuriKolovsky solution to quiz 12 B:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
      <html lang="en">
      <head>
      <meta http-equiv="logo-Type" logo="text/html; charset=utf-8">
      <title>YuriKolovsky: Solution to CSS Quiz #12B</title>
      <style type="text/css">
      * {
        margin:0;
        padding:0;
        position:relative;
      }
      html, body {
        height:80%;
      }
      body {
        font-size:100%;  
      }
      #container {                       /*I made the thing resizable for the fun of it*/
        height:200px;                    /*make this 50%*/
        width:220px;                     /*make this 23%*/
        margin:100px auto;
        border:solid #d8d9db 1px;
        border-bottom:solid #46494c 1px;
        border-right:solid #46494c 1px;
        padding:15px 5px 15px 5px;       
      }
      #a, #b, #c, #d, #e {
        width:50%;
        height:33%;
        float:left;
      }
      #b, #e {
        float:right;
      }
      #c {
        width:100%;
      }
      #b div {
        right:0;
      }
      #c div {
        position:absolute;
        text-align: center;
        top:50%;
        left:50%;
        margin-left:-11px;
        margin-top:-11px;
      }
      #c div div {
        position:relative;
        top:0;
        left:0;
        margin-left:0;
        margin-top:0;
      }
      #d div {
        bottom:0;
      }
      #e div {
        right:0;
        bottom:0;
      }
      div div div {
        border:solid #d8d9db 1px;
        border-bottom:solid #46494c 1px;
        border-right:solid #46494c 1px;
      }
      #container div div div div div div {
        width:1px;
        height:1px;
      }
      #container div div div {
        position:relative;
        display:block;
        padding:1px;
      }
      #container div div {
        position:absolute;
        display:block;
        overflow:hidden;
        padding:1px;
      }
      #container div div div div div div {
        padding:0px;
      }
      </style>
      </head>
      <body>
      <div id="container">
          <div id="a"><div><div><div><div><div></div></div></div></div></div></div>
          <div id="b"><div><div><div><div><div></div></div></div></div></div></div>
          <div id="c"><div><div><div><div><div></div></div></div></div></div></div>
          <div id="d"><div><div><div><div><div></div></div></div></div></div></div>
          <div id="e"><div><div><div><div><div></div></div></div></div></div></div>
      </div>
      </body>
      </html>
    I think that covers most of the methods used so congratulations to all. If I missed anyone or I didn't post your entry then feel free to post your entries in a post of your own.

    Thanks for taking part and keep an eye out for the next quiz which I will post tonight or tomorrow.
    Last edited by Paul O'B; Feb 6, 2009 at 14:09. Reason: Changed second of zcorpans enties to correct one

  3. #78
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,782
    Mentioned
    16 Post(s)
    Tagged
    0 Thread(s)
    Whens next one.

    Edit: Nvm, Tonight=a few hours from now?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  4. #79
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    lol RoObear and Stomme Poes, i would have never thought of that!
    using a text shape to create the sitepoint logo, lol!

    haha stomme poes i see yours says sitepoint.nl
    mine said sitetest the whole time i was making it, then i changed it to sitepoint, i don't know why i did that, i should have kept it.

    i have no idea how zcorpan's version works, some help zcorpan?

  5. #80
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    NEW Quiz Posted

    I posted the new quiz already as I may not have time later. You can find it here:

  6. #81
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Paul, the second of Simon's entries is the same as the first. I'd be interested to see the use of the transforms!

  7. #82
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,287
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Man, I thought everyone else had used way less HTML and CSS than I. Now I feel better. I thought mine was very very bloated. : )

  8. #83
    SitePoint Member Vim.F's Avatar
    Join Date
    Aug 2007
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I thought of using the X too but scraped it since it needed more html...
    Quite proud of myself that my 2nd version uses even less code than the original

    I'll come back and give no. 13 a try after today's work.

  9. #84
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Raffles View Post
    Paul, the second of Simon's entries is the same as the first. I'd be interested to see the use of the transforms!
    oops - I've entered the correct one now - thanks

  10. #85
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here's my code...

    The pixel perfect version - pretty clean!
    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>SitePoint Test #12</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    body {
    width:350px;
    margin:50px auto;
    position:relative;
    }
    .a {
    width:20px;
    border-top:35px solid #f60;
    border-right:15px dashed transparent;
    position:relative;
    }
    .b {
    line-height:0;
    width:20px;
    border-bottom:35px solid #f60;
    border-left:15px dashed transparent;
    position:absolute;
    top:-35px;
    left:-15px;
    }
    .c { 
    width:20px;
    border-top:35px solid #036;
    border-left:15px dashed transparent;
    position:relative;
    margin:4px 35px 4px -15px;
    float:left;
    }
    .d {
    line-height:0;
    width:20px;
    border-bottom:35px solid #036;
    border-right:15px dashed transparent;
    position:absolute;
    top:-35px;
    right:-15px;
    }
    .clear {
    clear:left;
    margin:0 0 0 55px;
    }
    p {
    position:absolute;
    top:-24px;left:100px;
    line-height:1.2;
    color:#036;
    font-size:4em;
    font-weight:bold;
    }
    </style> 
    </head>
    
    <body>
    <div class="a"><div class="b"></div><p>sitepoint</p></div>
    <div class="c"><div class="d"></div></div>
    <div class="c"><div class="d"></div></div>
    <div class="a clear"><div class="b"></div></div>
    </body>
    </html>
    The scaling/ems version. A little polluted for my taste, but it works!
    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>SitePoint Test #12</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    body {
    width:350px;
    margin:50px auto;
    position:relative;
    line-height:0;
    font-size:100%;
    }
    .a {
    width:20px;
    border-top:2.2em solid #f60;
    border-right:.95em dashed transparent;
    position:relative;
    }
    .b {
    width:20px;
    border-bottom:2.2em solid #f60;
    border-left:.95em dashed transparent;
    position:absolute;
    top:-2.2em;
    left:-.95em;
    }
    .c { 
    width:20px;
    border-top:2.2em solid #036;
    border-left:.95em dashed transparent;
    position:relative;
    margin:0px 35px 4px -15px;
    float:left;
    display:inline;
    }
    .d {
    width:20px;
    border-bottom:2.2em solid #036;
    border-right:.95em dashed transparent;
    position:absolute;
    top:-2.2em;
    right:-.95em;
    }
    p {
    position:absolute;
    top:.18em;left:1.6em;
    line-height:1.2;
    color:#036;
    font-size:4em;
    font-weight:bold;
    z-index:1;
    }
    .hide {
    overflow:hidden;
    padding:0 0 0 20px;
    height:2.1em;
    margin:0 0 .4em -20px;
    }
    .clear {
    clear:left;
    margin-left:2.15em;
    }
    .extra {
    padding:0 0 0 1.21em;
    }
    .flaot {
    float:left;
    }
    </style> 
    </head>
    
    <body>
    <div class="hide extra"><div class="a"><div class="b"></div></div><p>sitepoint</p></div>
    <div class="hide flaot"><div class="c"><div class="d"></div></div></div>
    <div class="hide flaot"><div class="c"><div class="d"></div></div></div>
    <div class="hide clear"><div class="a"><div class="b"></div></div></div>
    </body>
    </html>

  11. #86
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    hahaha, pretty good entry EricWatson.

  12. #87
    bronze trophy
    Join Date
    Dec 2004
    Location
    Sweden
    Posts
    2,670
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    i have no idea how zcorpan's version works, some help zcorpan?
    The one with the slashes? Well, there's the text "/" followed by a linebreak followed by another "/", which, after being cropped and aligned carefully, become the orange parts of the logo. Then there's the text "\\" which are also cropped and carefully aligned which are the blue parts of the logo. And that's all there's to it really.
    Simon Pieters

  13. #88
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    now when i think of it, it does sound obvious.
    that is what i wanted to achieve <div class="logo"></div>

    genius!

  14. #89
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    A very late entry from iggyflo which uses another slightly different method.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Sitepoint 12A</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <style type="text/css">
    *{
    padding: 0;
    margin: 0;
    }
    div{
    margin-left:150px;
    width: 6em;
    padding:0.2em;
    background-color: #FFC;
    color:#036;
    font-size: 3em;
    font-weight:bold;
    line-height: 0.8em;
    }
    .a,.b,.d,.e{
    position: absolute;
    font-family: Arial;
    letter-spacing: -0.2em;
    }
    .b,.d{
    color:#f60;
    }
    .c{
    padding-bottom: 0.2em;
    position: absolute;
    margin-left:1.5em;
    }
    .d,.e{
    margin-left:0.7em;
    }
    </style>
    
    </head>
    <body>
    <div>
    <span class="b">/////////</span><br>
    <span class="a">\\\\\\\\\</span>&nbsp;<span class="e">\\\\\\\\\</span>&nbsp;<span class="c">sitepoint</span><br>
    &nbsp;<span class="d">/////////</span>
    </div>
    </body>
    </html>


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
  •