Yea it's a real world example...just wait until a browser has support for what I have in store for you guysOriginally Posted by YuriKolovsky
..
| SitePoint Sponsor |
Yea it's a real world example...just wait until a browser has support for what I have in store for you guys
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
I only used that selector for 8 rules - there are others that can be used.
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..
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
let it fail.
Yeah but without IE7 you could do nth-child etc...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.
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.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?'
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.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.
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).
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.
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
I don't have any doubt you created this for a real world example.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.
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.
Everything should be as simple as possible but not one bit simpler.A good designer/developer must know when to add a class or ID and when to use contextual selectors.
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.
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...
Well, FF and Opera support last-child, and Opera supports nth-child, as well as other things like nth-last-child.
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
^ 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.
li.mainclass="main-division-but-not-the-first-one
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.
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
^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...
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
ohh, you better not look at mine one then...AutisticCuckoo
Probably the most 'excessive' selector I used was ul+h2+ul>li+li
¡ay caramba!AutisticCuckoo
I've seen the submitted entries now
Lol
Birnam wood is come to Dunsinane
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 beenIn that instance it looks more appropriate to use IDs, rather than classes though. Unless you have multiple home pages and about pages...
.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. : )
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:
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> * {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>
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"> 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>
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:
Well done to all the entries and feel free to post your entry below if you want others to see it.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>
You can all have a few days rest now before the next quiz
www.pmob.co.uk CSS FAQ 3 col demo Read My CSS Articles
Ultimate CSS Reference
Check out SitePoint's latest JavaScript challenge
WOOOWWWW I feel so dumb...so what exactly was the trick? A few days rest=Monday? Sunday?
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
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.
done using sibling selectors, because i can. xDCode:<!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%; } 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>
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.
Whats h2~h2~ul do?? Never even seen ~ in action before..
Twitter-@Ryan_Reese09
http://www.ryanreese.us -Always looking for web design/development work
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.
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
Posting Permissions
Bookmarks