SitePoint Sponsor

User Tag List

Page 4 of 5 FirstFirst 12345 LastLast
Results 76 to 100 of 121
  1. #76
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by YuriKolovsky View Post
    this is why not as many people apply to this quiz.


    it's a real world example.


    [yuri looks at ryan, looks at tommy, runs far away]
    Yea it's a real world example...just wait until a browser has support for what I have in store for you guys ..
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  2. #77
    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
    I don't have the brain power (ADHD) to keep doing the adjacent sibling selector for 3/4ths of my selectors.
    I only used that selector for 8 rules - there are others that can be used.

  3. #78
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    True there are others but in my mindset I needed to use it a lot. That's how I figured I'd do the quiz. Heck I could do an entire layout just using the + though it would fail epically in IE6..
    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)
    let it fail.

  5. #80
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    the only thing that gets me is the selectors support in ie6, sadly a still existing browser...
    id love to use them tho, and if i get the chance i will.
    Yeah but without IE7 you could do nth-child etc...

    I use a more object-oriented approach. I start with the unstyled semantic markup and look at how it's rendered. Then I compare that visual image with the target image of what I would like to achieve, and wonder, 'how can I make this element appear in that location?'
    I started with the page and the HTML and looked at it. I did my reset, removed the bullets, gave everyone ugly (or the required) backgrounds colours so I could see everyone, and then went pretty much top-down. Styled the elements pretty much in order that I met them. So, on Saturday before my internets went out I had it down the the second H2. Then when I got a free lunch hour I finished the rest, then tweaked randomly all over the place and tidied up.
    The visualising sounds like what I do, though.

    Though I did it all in FF to the end which is normally not the way to do it.

  6. #81
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Stomme poes
    I started with the page and the HTML and looked at it. I did my reset, removed the bullets, gave everyone ugly (or the required) backgrounds colours so I could see everyone, and then went pretty much top-down. Styled the elements pretty much in order that I met them. So, on Saturday before my internets went out I had it down the the second H2. Then when I got a free lunch hour I finished the rest, then tweaked randomly all over the place and tidied up.
    The visualising sounds like what I do, though.

    Though I did it all in FF to the end which is normally not the way to do it.
    pretty much the same for me.
    first look at it, then drew on paper (i do everything on paper ), then add colorful borders, then reach the 3rd row, then away from house for a day, then finished the 4th row, then discovered a horizontal scrollbar, and stayed up until very late to 'inverse' my thing to remove the scrollbar.

    and so you know i did it all in FF to the end (with occasional browser tests), and it worked fine everywhere from my first try, which was very weird for me (usually stuff breaks and requires fixing in other browsers).

  7. #82
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Huh, I started out withOUT a scrollbar and I later put one IN. Mostly just to stop the eventual destruction of the layout if you went smaller than like 600px wide... so I set the body min-width to whatever kept everyone in line nicely without anyone going off the left (!) side of the page.

  8. #83
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i hav a container with a min-width
    survives to a width of 800px on most browsers (didn't test),
    but before i had a permanent horizontal scrollbar xD

  9. #84
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by AutisticCuckoo View Post
    Let me remind you that this quiz is based on a real-world example.

    By using the power of CSS selectors you can make a significant reduction in the code bloat caused by excessive classes and IDs. You'll have to be careful, though, since it may create a strong dependency on the document structure.
    I don't have any doubt you created this for a real world example.

    A class or two in this html would make a significant reduction in the css code bloat caused by excessive selectors. But then it is a quiz and it's the perfect place for using them.
    A good designer/developer must know when to add a class or ID and when to use contextual selectors.
    Everything should be as simple as possible but not one bit simpler.

  10. #85
    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)
    One of the most unfortunate things for me is the lack of support for :last-child -that would have alleviated the CSS bloat a bit (although nth-child would be great too of course). I'm starting to think it's even more useful than :first-child.

  11. #86
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    why have first-child and last-child if you can have nth-child
    well, i see your point, last child would be useful if you have a unknown amount of children, while first-child becomes obsolete with nth-child around.

    yet browsers only support first-child...
    as usual...

  12. #87
    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)
    Well, FF and Opera support last-child, and Opera supports nth-child, as well as other things like nth-last-child.

  13. #88
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by markbrown4 View Post
    A class or two in this html would make a significant reduction in the css code bloat caused by excessive selectors.
    Probably the most 'excessive' selector I used was ul+h2+ul>li+li. That's not more bloated than li.main-division-but-not-the-first-one which would be a descriptive class name. And that would add bloat to the markup as well, from having to add class="main-division-but-not-the-first-one" to two <li> tags.

    You may have noticed that I did add a class to one of the <dt> elements. It would have been possible to do without it, but then the selectors would have been unnecessarily complicated and the CSS would have become quite fragile.

    I've seen the submitted entries now, and some of them uses really excessive selectors. But it's not necessary for this design.
    Birnam wood is come to Dunsinane

  14. #89
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    ^ avoiding ridiculously long class names is why, when it suits, I use ridiculously short ones : )

    On my definition-list-hover-click-maps, the top-level domain name is the id for each country... inside them, for provinces and stuff, I make them up if there isn't something out there. So while I could have gone around with

    <dd id="utrecht"> other stuff blah blah </dt>
    I did it the lazy way with
    <dd id="u"> blah blah </dt>

    Sometimes a class or an id is for CSS purposes only, esp catering to IE6, and it's really nothing to do with whatever the content IS, in which case, use comments if necessary in the CSS to describe what's going on, but use a simple class name for including/excliding siblings.
    class="main-division-but-not-the-first-one
    li.main

    then I wouldn't put that class of .main on the first one. I'd die if I had to use class names like that. Likely another reason I hate templates, they seem to come up with names like that.
    #toplevelNav_leftcol_2

    bleh.

  15. #90
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shorter names are easier to write, but in my experience they cause escalating maintenance problems. That may not be a problem (for you) if you create-deliver-forget for clients, but when you have to maintain your site for several years it becomes an issue.
    Birnam wood is come to Dunsinane

  16. #91
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    ^yeah I know what you mean, if they're too short they get cryptic, fast.

    Depends on where they are, how many there are, and what they're used for.

    I thought of another place I use ridiculously short id's/classes-- image-replaced menu items. Because my laziness doesn't want to do
    <li class="home"><a href="#">Home</a></li>
    <li class="about"><a href="#">About</a></li>
    etc
    when I can get away with
    li class="h"
    li class="a"

    since they are restricted to the menu and even in the CSS, a knowledgable professional (not some client tweaking a template, I'd prolly not do this for such a client) would also see
    #menu .h {
    blah
    }
    or at least all grouped together in the same area of the document...

  17. #92
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In that instance it looks more appropriate to use IDs, rather than classes though. Unless you have multiple home pages and about pages...

    Of course I wouldn't seriously consider to use a class name like 'main-division-but-not-the-first-one'. I was just being facetious to point out that the bloat from using contextual selectors was quite negligible (in this particular case).
    Birnam wood is come to Dunsinane

  18. #93
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    AutisticCuckoo
    Probably the most 'excessive' selector I used was ul+h2+ul>li+li
    ohh, you better not look at mine one then...

    AutisticCuckoo
    I've seen the submitted entries now
    &#161;ay caramba!

  19. #94
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Lol
    Birnam wood is come to Dunsinane

  20. #95
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,283
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    In that instance it looks more appropriate to use IDs, rather than classes though. Unless you have multiple home pages and about pages...
    Agreed with the sentiment, but again it's laziness... my keyboard here likes to miss 3 and # and it's a little harder to type than . so with the menus I've been
    .h
    instead of
    #h

    but if that weren't a factor, yeah I use IDs for the One Thing with the name (so I don't have div class="header" but id="header" as there's only one).

    Lawlz Larry Wall said "Be lazy" tho I'm pretty sure this wasn't what he meant. : )

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

    It's that time again (already) to show the solution and nominate a winner.

    Thanks to Tommy for allowing me to use his work for this quiz (and thanks to Erik for suggesting it would make a good quiz). It was quite a difficult quiz and needed a good sense of logic and planning to accomplish.

    However, we still had a number of entries from the following people who should all be congratulated:

    Ro0bear, Centauri, Vim.f, Rafles, Yurikolovsky, coothead, k3liutzu, Stomme Poes, Tyssen. (If I've missed anyone just shout and I'll add you).

    After some consideration the first place decided on a number of crirteria is a tie between Tyssen and Centauri so they are the joint winners.

    Well done to both

    Third place could also be shared between Stomme Poes and Vim.F.

    RoObear had the quickest entry although there were a few little problems with it but still well done on the quickest (if not perfect) solution.

    I won't post all the solutions but just the winning ones this time.

    We'll start with Tommy's original.

    Tommy:
    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>Organisation Chart</title>
    <style>
    * {margin:0; padding:0}
    html {font:81.25%/1.5 Verdana,sans-serif}
    body {padding:1em; overflow:hidden}
    dl, dt.sub+dd ul li {border:1px solid #009; padding:0 0.5em; background-color:#def}
      dl dl {border:none; background-color:transparent}
      dt {color:#006; font-weight:bold}
    h1 {margin-bottom:1em; text-align:center; font-size:150%}
    h2 {position:absolute; left:1em; font-size:x-small; font-weight:normal}
      dl+h2 {padding-top:1.5em}
    li {list-style-type:none}
    h1+dl {width:10em; margin:0 auto; text-align:center}
    dl+h2+ul {position:relative; width:50%; margin-left:50%; border-left:1px solid #000; padding:2em 0 3em}
      dl+h2+ul li {width:10em; border-top:1px solid #000}
      dl+h2+ul li+li {position:absolute; top:2em; right:100%}
        dl+h2+ul li dl {position:relative; bottom:1em; left:2em}
        dl+h2+ul li+li dl {right:2em; left:auto}
    ul+h2+ul {width:62em; margin:0 auto}
      ul+h2+ul>li {float:left; position:relative; right:9em; width:20em; margin-right:-1px; border:solid #000; border-width:0 1px 0 0}
      ul+h2+ul>li+li {border-top-width:1px}
        ul+h2+ul li>dl {position:relative; top:1em; left:50%; margin:0 0.5em; padding:0}
          ul+h2+ul li>dl>dt {background-color:#789; color:#fff; text-align:center}
          ul+h2+ul li dl dl {padding:0 0.5em}
          ul+h2+ul li dl dl dt {float:left; clear:left; width:8em}
          dt.sub {position:absolute; left:-999em}
          dt.sub+dd {position:absolute; top:100%; left:50%; height:1em; margin-top:1px; border-left:1px solid #000}
            dt.sub+dd ul {position:relative; top:1em; right:4.5em; width:9em; height:1em; margin-left:-1px; border:solid #000; border-width:1px 1px 0}
              dt.sub+dd ul li {float:left; position:relative; top:1em; right:4em; width:7em; line-height:3.0; text-align:center}
              dt.sub+dd ul li+li {top:-2em; right:-5em; margin-top:-2px; line-height:1.5}
    </style>
    </head>
    <body>
    <h1>Organisation</h1>
    <dl>
        <dt>President</dt>
        <dd>A. Andrews</dd>
    </dl>
    <h2>Support Staff</h2>
    <ul>
        <li>
            <dl>
                <dt>Vice President</dt>
                <dd>B. Burns</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Secretaries</dt>
                <dd>C. Colins</dd>
                <dd>D. Dylan</dd>
            </dl>
        </li>
    </ul>
    <h2>Divisions</h2>
    <ul>
        <li>
            <dl>
                <dt>Economy</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>E. Ericson</dd>
                        <dt>Secretary</dt>
                        <dd>F. Fitzgerald</dd>
                        <dt>Employees</dt>
                        <dd>25</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Marketing</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>G. Glockstettner</dd>
                        <dt>Secretary</dt>
                        <dd>H. Holmes</dd>
                        <dt>Employees</dt>
                        <dd>14</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Products</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>I. Irkwell</dd>
                        <dt>Secretary</dt>
                        <dd>J. Jones</dd>
                        <dt>Employees</dt>
                        <dd>89</dd>
                        <dt class="sub">Subdivisions</dt>
                        <dd>
                            <ul>
                                <li>Manufacturing</li>
                                <li>Quality Assurance</li>
                            </ul>
                        </dd>
                    </dl>
                </dd>
            </dl>
        </li>
    </ul>
    </body>
    </html>
    Tyssen:

    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>Organisation Chart</title>
    <style type="text/css">
    body {
        background: #FFF;
        font: 80%/1.5 Verdana, Arial, Helvetica, sans-serif;
        text-align: center
    }
    h1 {
        font-size: 150%
    }
    ul, li, dl, dt, dd {
        margin: 0;
        padding: 0;
        position: relative
    }
    ul {
        list-style: none
    }
    h2 {
        font-size: 82.5%;
        font-weight: normal;
        margin-bottom: -.5em;
        position: relative;
        text-align: left
    }
    dt {
        font-weight: bold
    }
    h1 + dl {
        border-left: 1px solid #000;
        height: 14em;
        left: 5em;
        margin: 0 auto;
        margin-bottom: -11.5em;
        width: 10em;
        z-index: 1
    }
    h1 + dl dt, h1 + dl dd {
        background: #DDEEFF;
        border: 1px solid #009;
        left: -5em;
        position: absolute;
        top: 0;
        width: 10em;
    }
    h1 + dl dt {
        border-bottom: 0
    }
    h1 + dl dd {
        border-top: 0;
        top: 1.5em
    }
    dl + h2 {
        top: 1em
    }
    dl + h2 + ul {
        border-top: 1px solid #000;
        margin: 0 auto;
        top: 1em;
        width: 20em
    }
    dl + h2 + ul li {
        background: #DDEEFF;
        border: 1px solid #009;
        left: 12em;
        padding: 0 .5em;
        position: absolute;
        text-align: left;
        top: -1em;
        width: 10em;
    }
    dl + h2 + ul li + li {
        left: -3em
    }
    ul + h2 {
        margin-top: 7em
    }
    ul + h2 + ul {
        border-top: 1px solid #000;
        margin: 0 auto;
        width: 40em;
        z-index: 10;
    }
    ul + h2 + ul > li {
        border: 1px solid #000;
        border-width: 0 0 0 1px;
        height: 2em;
        left: 0;
        position: absolute;
        width: 0;
    }
    ul + h2 + ul li + li {
        border-width: 0;
        left: 5em
    }
    ul + h2 + ul li + li + li {
        border-width: 0 1px 0 0;
        left: 40em;
        margin-left: -1px
    }
    ul + h2 + ul dt {
        background: #789;
        color: #FFF;
        min-height: 0
    }
    ul + h2 + ul dl {
        background: #DDEEFF;
        border: 1px solid #009;
        position: absolute;
        top: 1em;
        width: 19em;
    }
    ul + h2 + ul li dl, ul + h2 + ul li + li + li dl {
        left: -10em
    }
    ul + h2 + ul li + li dl {
        left: 5em
    }
    ul + h2 + ul dl dl {
        border: 0;
        position: static
    }
    ul + h2 + ul dl dl dt, ul + h2 + ul dl dl dd {
        background: #DDEEFF;
        color: #000;
        padding: 0 .5em;
        text-align: left;
    }
    ul + h2 + ul dl dl dt {
        float: left;
        width: 8em;
    }
    ul + h2 + ul dl dl dd {
        margin-left: 8em;
    }
    .sub, .sub + dd {
        background: none;
        position: absolute;
        text-indent: -999em;
    }
    .sub {
        border-left: 1px solid #000;
        height: 1em;
        left: 10em;
        width: 1px
    }
    .sub + dd {
        border-top: 1px solid #000;
        left: -2.5em;
        top: 5.4em;
        width: 8em
    }
    .sub + dd ul {
        border: 1px solid #000;
        border-width: 0 1px;
        height: 1.5em;
        left: -.5em;
        width: 8.85em
    }
    .sub + dd li {
        background: #DDEEFF;
        border: 1px solid #009;
        color: #000;
        height: 3.2em;
        left: -4em;
        line-height: 3.2em;
        position: absolute;
        text-align: center;
        text-indent: 0;
        top: 1em;
        vertical-align: middle;
        width: 8em
    }
    .sub + dd li + li {
        left: 5em;
        line-height: 1.5
    }
    </style>
    </head>
    <body>
    <h1>Organisation</h1>
    <dl>
        <dt>President</dt>
        <dd>A. Andrews</dd>
    </dl>
    <h2>Support Staff</h2>
    <ul>
        <li>
            <dl>
                <dt>Vice President</dt>
                <dd>B. Burns</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Secretaries</dt>
                <dd>C. Colins</dd>
                <dd>D. Dylan</dd>
            </dl>
        </li>
    </ul>
    <h2>Divisions</h2>
    <ul>
        <li>
            <dl>
                <dt>Economy</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>E. Ericson</dd>
                        <dt>Secretary</dt>
                        <dd>F. Fitzgerald</dd>
                        <dt>Employees</dt>
                        <dd>25</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Marketing</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>G. Glockstettner</dd>
                        <dt>Secretary</dt>
                        <dd>H. Holmes</dd>
                        <dt>Employees</dt>
                        <dd>14</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Products</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>I. Irkwell</dd>
                        <dt>Secretary</dt>
                        <dd>J. Jones</dd>
                        <dt>Employees</dt>
                        <dd>89</dd>
                        <dt class="sub">Subdivisions</dt>
                        <dd>
                            <ul>
                                <li>Manufacturing</li>
                                <li>Quality Assurance</li>
                            </ul>
                        </dd>
                    </dl>
                </dd>
            </dl>
        </li>
    </ul>
    </body>
    </html>
    Centauri:
    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>Organisation Chart</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 80%;
        line-height: 1.5em;
    }
    h1 {
        text-align: center;
        font-size: 150%;
        line-height: 3em;
    }
    h2 {
        font-weight: normal;
        font-size: 80%;
        clear: both;
        padding-top: 1em;
    }
    dl+h2 {
        width: 50%;
        border-right: 1px solid black;
        padding-bottom: 10em;
        margin-bottom: -10em;
    }
    dl {
        background-color: #DDEEFF;
        border: 1px solid #000099;
        width: 10em;
        margin: 0 auto;
        text-align: center;
        padding: 0 0.4em;
    }
    dt, dl+h2+ul dt, dl dl dt {
        font-weight: bold;
        color: #000099;
        background-color: #DDEEFF;
    }
    ul {
        border: 1px solid black;
        border-bottom: 0;
        width: 40em;
        margin: -1em auto 0;
        padding-top: 1em;
    }
    li {
        list-style: none;
        float: left;
        width: 20em;
        position: relative;
    }
    li:first-child {
        margin-left: -10em;
    }
    li+li+li {
        margin-right: -10em;
    }
    ul dl {
        text-align: left;
        width: 18em;
    }
    ul dt {
        background-color: #778899;
        color: #FFFFFF;
        text-align: center;
        margin: 0 -0.4em;
    }
    dl+h2+ul dt {
        text-align: left;
        margin: 0;
    }
    dl dl dt {
        float: left;
        width: 8em;
        text-align: left;
        margin: 0;
    }
    dl dl {
        border: 0;
        width: auto;
        padding: 0;
        background: none;
    }
    dl+h2+ul {
        width: 25em;
        border-width: 1px 0 0;
        text-align: left;
        margin-top: 0px;
        padding: 0;
    }
    dl+h2+ul dl {
        width: 9em;
        margin: 0;
    }
    dl+h2+ul li {
        width: auto;
        margin: -10px 0 0;
    }
    dl+h2+ul li:first-child {
        float: right;
    }
    dt.sub {
        float: none;
        width: 1px;
        overflow: hidden;
        background-color: #000000;
        height: 1em;
        margin: 0 auto -1em;
    }
    dt.sub+dd {
        position: absolute;
        top: 8em;
        width: 18em;
        left: 1.2em;
    }
    ul ul {
        width: 8.5em;
        background-color: #FFFFFF;
    }
    ul ul li {
        width: 8em;
        background-color: #DDEEFF;
        border: 1px solid #000099;
        height: 3.1em;
        margin-right: -4.5em;
        text-align: center;
    }
    ul ul li:first-child {
        margin-left: -4.5em;
        margin-right: 1em;
        line-height: 3em;
    }
    </style>
    </head>
    <body>
    <h1>Organisation</h1>
    <dl>
        <dt>President</dt>
        <dd>A. Andrews</dd>
    </dl>
    <h2>Support Staff</h2>
    <ul>
        <li>
            <dl>
                <dt>Vice President</dt>
                <dd>B. Burns</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Secretaries</dt>
                <dd>C. Colins</dd>
                <dd>D. Dylan</dd>
            </dl>
        </li>
    </ul>
    <h2>Divisions</h2>
    <ul>
        <li>
            <dl>
                <dt>Economy</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>E. Ericson</dd>
                        <dt>Secretary</dt>
                        <dd>F. Fitzgerald</dd>
                        <dt>Employees</dt>
                        <dd>25</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Marketing</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>G. Glockstettner</dd>
                        <dt>Secretary</dt>
                        <dd>H. Holmes</dd>
                        <dt>Employees</dt>
                        <dd>14</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Products</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>I. Irkwell</dd>
                        <dt>Secretary</dt>
                        <dd>J. Jones</dd>
                        <dt>Employees</dt>
                        <dd>89</dd>
                        <dt class="sub">Subdivisions</dt>
                        <dd>
                            <ul>
                                <li>Manufacturing</li>
                                <li>Quality Assurance</li>
                            </ul>
                        </dd>
                    </dl>
                </dd>
            </dl>
        </li>
    </ul>
    </body>
    </html>

    Stomme Poes:

    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>Organisation Chart</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    body {
        min-width: 1000px; /*be safe*/
        padding: 0 10px;
        font: 100% sans-serif;
        color: #000;
        background-color: #fff;
    }
    h1 {
        margin: 1em 0;
        text-align: center;
        font-size: 1.6em;
    }
    h2 {
        font-size: .7em;
        font-weight: normal;
    }
    dl, .sub+dd ul li {
        border: 1px solid #009;
        background-color: #def;
    }
    h1+dl {
        position: relative; /*for z-index*/
        z-index: 5; /*only needed for extreme text-decreasing*/
        width: 6em;
        margin: 0 auto 2em;
        padding: 0 2em;
    }
    dt {
        font-weight: bold;
        color: #006;
    }
    dd {
        font-size: 1em;
    }
    ul {
        list-style: none;
    }
    h1+dl+h2 {
        width: 50%;
        margin: -3em 0 0 0;
        padding: 2em 0 16em;
        border-right: 1px solid #000;
    }
    h1+dl+h2+ul {
        width: 24em;
        margin: -11em auto 10em;
        padding: 0;
        border-top: 1px solid #000;
    }
    h1+dl+h2+ul li {
        float: left;
        width: 10em;
        margin-top: -1em;
    }
    h1+dl+h2+ul li:first-child {
        float: right;
        width: 9em;
    }
    h1+dl+h2+ul li dl {
        padding-left: .5em;
    }
    h2+ul+h2 {
        margin-top: -5em;
        padding-bottom: 8em;
    }
    h2+ul+h2+ul {
        width: 40em;
        padding: 1em 0 0 0;
        margin: -6.5em auto 0;
        border: 1px solid #000;
        border-bottom: 0;
    }
    h2+ul+h2+ul li {
        float: left;
        width: 20em;
        margin-right: 1em;
    }
    h2+ul+h2+ul li:first-child {
        margin-left: -11em;
        margin-right: 1em;
    }
    h2+ul+h2+ul>li+li+li {
        margin-right: -20em;
        padding-bottom: 0;
    }
    h2+ul+h2+ul li>dl {
        width: 20em;
        text-align: center;
        position: relative;
        z-index: 5;
        background-color: #789;
    }
    h2+ul+h2+ul li>dl dt {
        color: #fff;
    }
    h2+ul+h2+ul li>dl>dt:hover {
        text-indent: -9999em;
        background:url(http://stommepoes.nl/Tests/lawlz.gif) 50% 50% no-repeat;
    min-height:0
    }
    h2+ul+h2+ul li>dl dt+dd dl {
        padding-left: 5px;
        text-align: left;
        border: 0;
    }
    h2+ul+h2+ul li>dl dt+dd dt {
        float: left;
        clear: left; /*IE7*/
        width: 40%;
        color: #006;
    }
    dt.sub {
        float: none;
        position: absolute;
        width: 8.8em;
        height: 1.2em;
        margin-top: 0;
        text-indent: -9999em;
        border-right: 1px solid #000;
    }
    dt.sub+dd ul {
        position: absolute;
        right: 5.5em;
        width: 10em;
        margin-top: 1.2em;
        border: 1px solid #000;
        border-bottom: 0;
    }
    dt.sub+dd ul li {
        position: relative;
        left: 6.5em;
        width: 7.5em;
        min-height: 2.5em;
        margin-top: 1em;
        text-align: center;
    }
    dt.sub+dd ul li:first-child {
        line-height: 2.5em;
    }
    </style>
    </head>
    <body>
    <h1>Organisation</h1>
    <dl>
        <dt>President</dt>
        <dd>A. Andrews</dd>
    </dl>
    <h2>Support Staff</h2>
    <ul>
        <li>
            <dl>
                <dt>Vice President</dt>
                <dd>B. Burns</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Secretaries</dt>
                <dd>C. Colins</dd>
                <dd>D. Dylan</dd>
            </dl>
        </li>
    </ul>
    <h2>Divisions</h2>
    <ul>
        <li>
            <dl>
                <dt>Economy</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>E. Ericson</dd>
                        <dt>Secretary</dt>
                        <dd>F. Fitzgerald</dd>
                        <dt>Employees</dt>
                        <dd>25</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Marketing</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>G. Glockstettner</dd>
                        <dt>Secretary</dt>
                        <dd>H. Holmes</dd>
                        <dt>Employees</dt>
                        <dd>14</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Products</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>I. Irkwell</dd>
                        <dt>Secretary</dt>
                        <dd>J. Jones</dd>
                        <dt>Employees</dt>
                        <dd>89</dd>
                        <dt class="sub">Subdivisions</dt>
                        <dd>
                            <ul>
                                <li>Manufacturing</li>
                                <li>Quality Assurance</li>
                            </ul>
                        </dd>
                    </dl>
                </dd>
            </dl>
        </li>
    </ul>
    </body>
    </html>

    Vim.F:

    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>Organisation Chart</title>
    <style type="text/css">
    /* preparation */
    * {
        margin:0;
        padding:0;
    }
    body {
        text-align:center;
        font-size:100%;
    }
    h1 {
        text-align:center;
        margin:1em 0;
    }
    h2 {
        font-size:.69em;
        font-weight:400;
        line-height:3;
        text-align:left;
        clear:both;
    }
    ul {
        margin:0 auto;
        list-style:none outside;
    }
    ul li {
        float:left;
    }
    dl {
        border:1px solid #000;
        background:#ddeeff;
    }
    dt {
        font-weight:700;
    }
    dd dt {
        float:left;
        clear:left;
    }
    dd dd {
        float:right;
        clear:right;
    }
    /* 1st row */
    h1+dl {
        width:9.38em;
        margin:0 auto;
    }
    h1+dl dd {
        border-bottom:1px solid #000;
        padding:0 0 3em;
        margin:0 0 -3em;
        position:relative;
    }
    /* 2nd row */
    dl+h2+ul {
        width:19.69em;
    }
    dl+h2+ul li {
        position:relative;
        z-index:1;
        float:right;
    }
    dl+h2+ul li dl {
        width:8.13em;
        text-align:left;
    }
    dl+h2+ul li+li {
        float:left;
        border-right:1px solid #000;
        position:relative;
        margin:-2.1em -1.56em -2.1em 0;
        padding:2.1em 1.56em 2.1em 0;
    }
    /* 3rd row */
    ul+h2+ul {
        width:46.88em;
    }
    ul+h2+ul li {
        margin:0 25px 0 0;
        position:relative;
        z-index:3;
        border-bottom:2em solid #fff;
    }
    ul+h2+ul li+li {
        border:solid #000;
        border-width:1px 1px 0;
        z-index:1;
        margin:-1.06em -8.75em 0;
        padding:1em 8.75em 0;
    }
    ul+h2+ul li+li+li {
        float:right;
        border:none;
        z-index:3;
        margin:0;
        padding:0;
    }
    ul+h2+ul dl {
        width:14.38em;
        float:left;
        color:#fff;
        background:#778899;
    }
    ul+h2+ul dd dl {
        color:#000;
        background:#ddeeff;
        border:none;
    }
    ul+h2+ul dd dl dd {
        width:8.13em;
        text-align:left;
    }
    ul+h2+ul li+li dd dl dd+dt+dd+dt+dd {
        border-right:1px solid #000;
        padding:0 8.89em 1.06em 0;
        margin:0 -8.89em -1.06em 0;
        position:relative;
    }
    ul+h2+ul li+li+li dd dl dd+dt+dd+dt+dd {
        border-right:none;
        margin:0;
        padding:0;
    }
    /* 4th row */
    .sub {
        top:1em;
        position:relative;
        float:none;
        margin:0 auto -2.06em;
        width:8em;
        height:2em;
        overflow:hidden;
        text-indent:-999em;
    border:;
        clear:both;
        border:solid #000;
        border-width:1px 1px 0;
        background:#fff;
    }
    .sub+dd {
        height:0;
        width:14.38em;
        margin:0 auto;
    }
    body ul ul {
        width:14.38em;
        clear:both;
    }
    body ul ul li {
        top:2em;
        border:1px solid #000;
        background:#ddeeff;
        margin:0 0 -2.06em 0;
        padding:.5em 5px;
        float:left;
        display:inline;
    }
    body ul ul li+li {
        top:2em;
        border:1px solid #000;
        background:#ddeeff;
        margin:0 0 -2.06em 0;
        padding:.5em 5px;
        float:right;
    }
    </style>
    </head>
    <body>
    <h1>Organisation</h1>
    <dl>
        <dt>President</dt>
        <dd>A. Andrews</dd>
    </dl>
    <h2>Support Staff</h2>
    <ul>
        <li>
            <dl>
                <dt>Vice President</dt>
                <dd>B. Burns</dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Secretaries</dt>
                <dd>C. Colins</dd>
                <dd>D. Dylan</dd>
            </dl>
        </li>
    </ul>
    <h2>Divisions</h2>
    <ul>
        <li>
            <dl>
                <dt>Economy</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>E. Ericson</dd>
                        <dt>Secretary</dt>
                        <dd>F. Fitzgerald</dd>
                        <dt>Employees</dt>
                        <dd>25</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Marketing</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>G. Glockstettner</dd>
                        <dt>Secretary</dt>
                        <dd>H. Holmes</dd>
                        <dt>Employees</dt>
                        <dd>14</dd>
                    </dl>
                </dd>
            </dl>
        </li>
        <li>
            <dl>
                <dt>Products</dt>
                <dd>
                    <dl>
                        <dt>Manager</dt>
                        <dd>I. Irkwell</dd>
                        <dt>Secretary</dt>
                        <dd>J. Jones</dd>
                        <dt>Employees</dt>
                        <dd>89</dd>
                        <dt class="sub">Subdivisions</dt>
                        <dd>
                            <ul>
                                <li>Manufacturing</li>
                                <li>Quality Assurance</li>
                            </ul>
                        </dd>
                    </dl>
                </dd>
            </dl>
        </li>
    </ul>
    </body>
    </html>
    Well done to all the entries and feel free to post your entry below if you want others to see it.

    You can all have a few days rest now before the next quiz

  22. #97
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    WOOOWWWW I feel so dumb...so what exactly was the trick? A few days rest=Monday? Sunday?
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  23. #98
    Hibernator YuriKolovsky's Avatar
    Join Date
    Nov 2007
    Location
    Malaga, Spain
    Posts
    1,072
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    i guess first to post something on this thread does not equal instant victory,
    lol, just lol.

    who got the 2nd place by the way?

    oh by the way, heres mine, beware your eyes to the messiness..
    warning may cause seizures, watch at you own risk.
    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>YuriKolovsky - CSS Quiz #13: Organisation Chart</title>
    <style type="text/css">
    /* enter your CSS here only */
     * {
    	margin:0;
    	padding:0;
    }
    body{
    	min-width:800px;
    	font-size:16px;
    }
    h2~h2 {
    	margin-top:2em;
    	margin-bottom:0.938em;
    }
    body h1 {
    	text-align:center;
    	margin-bottom:1.563em;
    }
    body h2 {
    	text-align:left;
    }
    dl {
    	 width:9.063em;
    	 height:1.875em;
    	 border-bottom:solid #000 1px;/*middle horizontal line*/
    	 text-align:center;
    	 margin:4.25em auto -1.75em auto;
    }
    dt {
    	 font-weight:bold;
    	 color:#000066;
    }
    dl dt, dl dd {
    	 position:relative;
    	 border:solid #000099 1px;
    	 border-bottom:0;
    	 top:-2.5em;
    	 background-color:#ddeeff;
    	 z-index:1;
    }
    dl dd {
    	 position:relative;
    	 border:solid #000099 1px;
    	 border-top:0;
    	 top:-2.5em;
    }
    ul dl {
    	 position:absolute;
    	 width:auto;
    	 height:auto;
    	 border:0;
    	 text-align:left;
    	 margin:0;
    	 background-color:#ddeeff;
    	 z-index:2;
    }
    ul dl dt {
    	 position:relative;
    	 border:0;
    	 margin:0;
    	 top:auto;
    }
    ul dl dd {
    	 position:relative;
    	 border:0;
    	 margin:0;
    	 top:auto;
    }
    ul {
    	list-style-type:none;
    }
    h2+ul {
    	float:right;
    }
    h2~ul li {
        left:auto;
    	right:0;
    }
    h2~ul li:first-child {
        left:0;
    	right:auto;
    	border-left:0;
    }
    h2~h2~ul li {
        left:50&#37;;	
    }
    ul {
    	position:relative;
    	right:50%;
    	width:0;
    	height:5em;
    	clear:both;
    }
    li {
    	position:absolute;/*lower horizontal line*/
    	height:auto;
    	border:solid #000 1px;
    	border-bottom:0;
    	right:0; 
    	height:2.5em;
    	border-bottom:0;
    	margin-top:5em;/*3 boxes + 3 ul's height regulator*/
    }
    h2+ul li {
    	width:16.063em;
    }
    h2~ul li {
    	border-right:0;
    }
    h2~ul li:first-child {
    	border-right:solid #000 1px;
    }
    h2~h2~ul li:first-child {
    	border:0;
    	left:auto;
    	right:-50%;
    }
    h2~h2~ul li {
        margin-top:-1.25em;/*3 boxes height regulator*/
    }
    li dl {
    	margin-top:-5.938em;/*2 boxes height regulator*/
    }
    h2~h2~ul li {
    	height:auto;
    	border:0;
    }
    li dl {
    	position:absolute;
    border:solid #000099 1px;
    	width:7.375em;
    	right:1.563em;
    	padding:0.063em 0.313em 0.063em 0.313em;
    }
    li:first-child {
    	right:-50%;
    }
    li:first-child dl {
    	right:auto;
    	left:1.563em;
    }
    h2~h2~ul li dl {
    	position:relative;
    	right:auto;
    	padding:0;
    }
    h2~h2~ul li:first-child dl {
        left:auto;
    }
    h2~h2~ul {
    	width:auto;
    	border-right:#000 1px solid;
    	float:right;
    	height:1.15em;/*middle vertical line height*/
    	top:-9.925em;
    	padding-top:10.725em;
    	/*the "middle line" height manipulation*/
    }
    h2~h2~ul li {
    	position:relative;
    	display:block;/*3 li's*/
    	border:0;
        right:-50%;
    	float:left;
    }
    h2~h2~ul li dl {
    	border:solid #000099 1px;
    	margin:0.375em;
    	width:15.313em;
    	min-width:15.313em;
    	
    	height:5.313em;
    	max-height:5.313em;
    }
    h2~h2~ul li dl dl {
    	border:0;
    	margin:0;
    	height:auto;
    }
    h2~h2~ul li dl dt {
    	text-align:center;
    	color:#fff;
    	background-color:#778899;
    }
    h2~h2~ul li dl dl dt {
    	border:0;
    	color:#000066;
    	text-align:left;
    	background-color:#ddeeff;
    	float:left;
    	width:6.25em;
    	padding:0 0 0 0.375em;
    	height:1.25em;
    }
    h2~h2~ul li dl dl dd {
    width:7.6em;
    	float:left;
    	height:1.25em;
    }
    .sub {
    	height:0;
    	z-index:2;
    	overflow:hidden;
    }
    .sub+dd {
    	 border:solid #000 1px;
    	 position:absolute;
    	 top:4.125em;
    	 left:50%;
    	 width:100%;
    	 height:0.938em;
    	 border-right:0;
    	 border-top:0;
    	 border-bottom:0;
    	 background-color:transparent;
    }
    .sub+dd ul {
    	 position:relative;
    	 top:0.875em; 
    	 left:-25%;
    	 border:solid #000 1px;
    	 border-bottom:0;
    	 width:7.375em;
    	 height:2.188em;
    	 background-color:#fff;
    }
    .sub+dd ul li {
    	 position:relative;
    	 padding:0;
    	 margin:0;
    	 top:auto;
    	 left:auto;
    	 margin:0.938em 0.313em;
    }
    
    h2+ul li li, h2+ul li li:first-child {
    	 position:absolute;
    	 top:0;
    	 width:6.563em;
    	 height:2.5em;
    	 border:solid #000099 1px; 
    
    	 background-color:#ddeeff;
    	 text-align:center;
    	 right:50%;
    }
    h2+ul li li:first-child {
    	 line-height:2.375em;
    	 left:50%;
    }
    </style>
    </head>
    <body>
    <h1>Organisation</h1>
    
    <dl>
    <dt>President</dt>
    <dd>A. Andrews</dd>
    </dl>
    <h2>Support Staff</h2>
    <ul>
    <li>
    <dl>
    <dt>Vice President</dt>
    <dd>B. Burns</dd>
    </dl>
    </li>
    <li>
    <dl>
    <dt>Secretaries</dt>
    <dd>C. Colins</dd>
    <dd>D. Dylan</dd>
    </dl>
    </li>
    </ul>
    <h2>Divisions</h2>
    <ul>
    <li>
    <dl>
    <dt>Economy</dt>
    <dd>
    <dl>
    <dt>Manager</dt>
    <dd>E. Ericson</dd>
    <dt>Secretary</dt>
    <dd>F. Fitzgerald</dd>
    <dt>Employees</dt>
    <dd>25</dd>
    </dl>
    </dd>
    </dl>
    </li>
    <li>
    <dl>
    <dt>Marketing</dt>
    <dd>
    <dl>
    <dt>Manager</dt>
    <dd>G. Glockstettner</dd>
    <dt>Secretary</dt>
    <dd>H. Holmes</dd>
    <dt>Employees</dt>
    <dd>14</dd>
    </dl>
    </dd>
    </dl>
    </li>
    <li>
    <dl>
    <dt>Products</dt>
    <dd>
    <dl>
    <dt>Manager</dt>
    <dd>I. Irkwell</dd>
    <dt>Secretary</dt>
    <dd>J. Jones</dd>
    <dt>Employees</dt>
    <dd>89</dd>
    <dt class="sub">Subdivisions</dt>
    <dd>
    <ul>
    <li>Manufacturing</li>
    <li>Quality Assurance</li>
    </ul>
    </dd>
    </dl>
    </dd>
    </dl>
    </li>
    </ul>
    </body>
    </html>
    done using sibling selectors, because i can. xD

    one interesting note to those who do not know...
    this:
    h2+ul li
    although in this case affects the same thing as:
    h2~ul li
    and which is not the same as
    ul li, which is not the same as li.

    each of the above select a different li
    which happens to be in the exact same place in the html,
    so most of the time, this effect is transparent.

    so everything is not the same as anything in css
    for example div#thing
    is different from #thing.
    and if you use both, they will do some strange stuff.

    i think im not explaining this clear enough...

    i had a bug, where a width of a ul was not changing, so i resorted to try and do ul { width:10px; } at the end of the css but the width of the ul did not change in any browsers, only after trial and fail i found out that only by doing h2~h2~ul { width:10px; } could i change it.

    so if you do use selectors in large amounts, use the same ones.
    ...unless you want to.

  24. #99
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,724
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Whats h2~h2~ul do?? Never even seen ~ in action before..
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  25. #100
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RyanReese View Post
    WOOOWWWW I feel so dumb...so what exactly was the trick?
    Not much of a trick, really. I was referring to how you can set borders on some LI elements to create the connecting lines, and then use relative positioning on the child DL elements to move the generated boxes.

    Quote Originally Posted by YuriKolovsky View Post
    who got the 2nd place by the way?
    Since 1st place was shared by Tyssen and Centauri, there is no 2nd place.

    A big hand of applause to all of you who submitted an entry! You all did very well, in my opinion. It was interesting, too, to see that there were a few different ways to achieve the same result.

    I must admit that I'm a little bit disappointed that there weren't more entries, since this quiz actually highlights a number of useful techniques that are applicable in the real world. But I suppose the large amount of markup might have been daunting.
    Birnam wood is come to Dunsinane


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
  •