SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 121
-
Feb 6, 2009, 09:16 #1
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
CSS - Test Your CSS Skills Number 13 :
CSS - Test Your CSS Skills Number 13 :Quiz now ended -see solution in post #96
After the tricks of previous quizzes we are now going to concentrate on a real world CSS example and create an organisational chart that follows the usual tree structure. This will be created using semantic html kindly supplied by Tommy (AutisticCuckoo).
Look at the attachment (chart.png), which is an actual screenshot from Firefox. Your task is to replicate this structure using CSS only as the html will be supplied for you.
You cannot alter the html at all apart from the CSS of course. You will not touch the html and cannot add classes or any other code to the html apart from CSS between the style tags.
The resulting design is expected to work in IE7, Opera, Firefox and Safari (modern versions). We are not catering for IE6 in this example as it could easily be catered for with a few hacks and alternative code anyway.
Here is the html that you must use.
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"> /* enter your css under here */ </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>
General Rules:
No javascript or scripting of any kind
No images or background images.
No expression,conditional comments, behaviours etc.
No Hacks
Do not alter the HTML apart from where specified
Modern Browser support – (Not ie6)
As usual there are no prizes other than the self-satisfaction of completing this. If you have a valid layout then post a message here but PM me the solution so that other people can still have a go. I will decide on the best layout this time rather than the first one I receive and the criteria may be based on code and looks.
Unlike the other tests this one does have a valid day-to-day use while still being fun at the same time.
Solutions will be posted later next week (or longer) depending on how it goes
Have fun .
Paul
PS. : In case you missed the other tests you can find them here:
test 1: http://www.sitepoint.com/forums/showthread.php?t=168555
test 2: http://www.sitepoint.com/forums/showthread.php?t=169710
test 3: http://www.sitepoint.com/forums/showthread.php?t=170190
test 4: http://www.sitepoint.com/forums/showthread.php?t=171221
test 5: http://www.sitepoint.com/forums/showthread.php?t=172472
test 6: http://www.sitepoint.com/forums/show...est+css+skills
test 7:http://www.sitepoint.com/forums/show...44#post3216244
test 8:http://www.sitepoint.com/forums/show...64#post3235664
test9:http://www.sitepoint.com/forums/show...45#post4108145
test10:http://www.sitepoint.com/forums/show...63#post4119063
test11:http://www.sitepoint.com/forums/showthread.php?t=595943
Test12: http://www.sitepoint.com/forums/showthread.php?t=597256Last edited by Paul O'B; Feb 13, 2009 at 10:15.
-
Feb 6, 2009, 09:26 #2
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
aaaaaa
i win!
edit:
i will try and do it later.
planning a trip to a mountain right now.
-
Feb 6, 2009, 09:43 #3
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
This one looks interesting
-
Feb 6, 2009, 10:08 #4
- Join Date
- Mar 2005
- Location
- Tenerife, Canary Isles
- Posts
- 175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Still got my head wrapped around no 12. But I'll take a deep breath and .....
-
Feb 6, 2009, 10:23 #5
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
ohhh, this one is proving to be completely new grounds for me.
even the html looks all weird.
edit:
are we allowed to make the html more readable?
by removing spaces?
Unlike the other tests this one does have a valid day-to-day use while still being fun at the same time.
on a website, because its much better than using images, and you can give hover states.
-
Feb 6, 2009, 10:24 #6
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 6, 2009, 10:54 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Feb 6, 2009, 10:59 #8
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
hahahaha, so its a yes.
ill see what i can do...
-
Feb 6, 2009, 12:02 #9
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Hmm...I'm in.
Edit: Doubt I can do it but...Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Feb 6, 2009, 13:20 #10
- Join Date
- Nov 2004
- Location
- Ankh-Morpork
- Posts
- 12,158
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Just as information: this exercise is based on a real-life situation where I needed to do the very same thing for our office intranet. The old version, which I made a few years ago, used a number of empty spans to create the connecting lines between the boxes. I thought it would be an interesting challenge to see if I could make it without any extra markup at all. It turned out to be surprisingly simple, once I figured out the crucial 'trick'.
Birnam wood is come to Dunsinane
-
Feb 6, 2009, 13:23 #11
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
Oh noes, a trick!
If I get time in the weekend, I'll give it a try.
-
Feb 6, 2009, 13:23 #12
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
ohhhhhhh
edit: its always about tricks, now i need to know that trick.
-
Feb 6, 2009, 13:36 #13
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
I hate "tricks" because I always feel dumb when I can't figure out the trick, and when they tell me what it is I feel dumber
haha.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Feb 6, 2009, 13:45 #14
- Join Date
- Nov 2005
- Location
- Leuven, Belgium
- Posts
- 211
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Code:<dt>Employees</dt> <dd>89</dd>
-
Feb 6, 2009, 13:49 #15
- Join Date
- Aug 2007
- Location
- Netherlands
- Posts
- 10,287
- Mentioned
- 51 Post(s)
- Tagged
- 2 Thread(s)
I tend to think so, I use dl's for this sort of thing a lot.
The dl makes us make the assumption that the stuff in the dt has something to do with the stuff in the dd. Unlike any other list, where there's no real relationship between individual list items other than, they all belong to that list.
<dt>Name:</dt>
<dd>Pino</dd>
<dt>Type:</dt>
<dd>Bird</dd>
Pino isn't a random list item, but like in a hash (in programming) it's key is "Name". The key "Type" then has "Bird" as a value.
Name=>Pino
Type=>Bird
This is assuming you don't believe dl's are soley for terms and definitions (like in a dictionary). Most people stretch it to, if there are key-value pairs, and it's not a table, then it's a dl.
-
Feb 6, 2009, 13:56 #16
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
that programming is going up your head.
-
Feb 6, 2009, 15:26 #17
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Wow - I've already got a very good entry from Ro0bear which just needs tidying up a bit for IE7 but otherwise looks very good.
I'm impressed
-
Feb 6, 2009, 16:01 #18
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
:O!!!!
all i can say.
i'm still clueless...
can't find this "trick".
i still cant believe how web based Internet search is a huge mess.
it must be fixed!
edit2:
i just got some idea...Last edited by YuriKolovsky; Feb 6, 2009 at 17:04.
-
Feb 6, 2009, 16:36 #19
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
hmm tricky
Tommy always make me use selectors I don't normally use.
[removed image]
sorry, I didn't think it would give any clues..Last edited by markbrown4; Feb 6, 2009 at 17:08.
-
Feb 6, 2009, 17:00 #20
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
aha!
i know it one trick now!
its really obvious when i think about it.
(yes everyone, i said OBVIOUS)
reorganizing the markup to look better, plus drawing it on a piece of paper, i had ideas, the same ones as now, but the image above, is just too much a clue.
too bad its too late to make it reality.
ill see what can be done tomorrow.
-
Feb 6, 2009, 18:33 #21
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
Got it working in IE7 now
@markbrown4 I missed the picturewas it funny?
-
Feb 6, 2009, 19:20 #22
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
-
Feb 6, 2009, 23:07 #23
- Join Date
- Apr 2006
- Location
- Maryland
- Posts
- 1,838
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
-
Feb 7, 2009, 00:21 #24
- Join Date
- May 2007
- Location
- Newcastle, Australia
- Posts
- 3,718
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Got my entry in. This would be so much easier (and IE6 compatible) if a few extra class names were allowed ..
-
Feb 7, 2009, 00:44 #25
Does this need to be scalable?...
I haven't done it all the way but it seems the 'trick' is a little too easy to figure out
Bookmarks