SitePoint Sponsor |
|
User Tag List
Results 1 to 25 of 80
-
Nov 22, 2009, 04:39 #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 30 - Multi columns
CSS - Test Your CSS Skills Number 30 : Quiz now ended solutions in post #61
To mark the anniversary of our 30th quiz I have not one but 2 little quizzes to keep you occupied over the following week.
The first quiz was from an idea By Erik J and the second quiz is from an idea by Paul Sweatte. So thanks to both for suggestions and support.
Remember these quizzes are mainly for fun but you will also learn a lot about CSS by trying them even if they don't always prove useful in the real world.
Quiz A - Multi Columns
CSS3 has a nice Multi column layout module but it will be a long time before we can actually use it in all browsers so this quiz is quite simple in concept in that you should turn one unordered list into three columns without using CSS3.
Take a look at the attachment called list-colums.gif to see exactly what is required.
Looks simple doesn't it?
Rules:
There are always rules aren't there?
1) The first rule is that you must use the html I provide and cannot change the html at all although you can change the css in the head of course.
2) Just using valid CSS (not css3) you must replicate the 3 columns as shown in the screenshot and it must work in all modern browsers from IE6 upwards. So make sure you test in IE6 - 8, Firefox3, Safari3 and Opera 10.
You can use conditional comments for IE or the usual valid IE hacks but the code should still be valid.
3)The html is basically one long unordered list (although we have provided a class in each list item to help you) and you need to divide the list into three columns breaking at the relevant points.
The important thing to note is that you must allow for the number of items in each section to change and there could be more or less items in each column. For example I could give you another list with different numbers of items listed and your existing css would need to cater for this.
Effectively this means you can't simply measure each list and then absolutely place it into position - so absolute positioning isn't a solution. The flow of the document should be preserved and the columns should cater for any number of items.
4) The text in each line should wrap to the next line if it is too long which again effectively rules out absolute positioning because the height of the columns would depend on if text has wrapped or not.
Here is the html 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>List Items Divided in Ordered Columns</title> <style type="text/css"> #columnlist { margin:auto; width:80%; font:75%/1.5 arial; } #columnlist h1 { font-size:167%; } #columnlist ul { margin:0; padding:0; } #columnlist li { list-style:none; width:33%; } </style> </head> <body> <div id="columnlist"> <h1>CSS2 - List Items Divided in Ordered Columns</h1> <ul> <li class="col1">Column One, Item 1</li> <li class="col1">Column One, Item 2</li> <li class="col1">Column One, Item 3</li> <li class="col1">Column One, Item 4</li> <li class="col1">Column One, Item 5</li> <li class="col1">Column One, Item 6</li> <li class="col1">Column One, Item 7</li> <li class="col1">Column One, Item 8</li> <li class="col1">Column One, Item 9</li> <li class="col1">Column One, Item 10</li> <li class="col1">Column One, Item 11</li> <li class="col1">Column One, Item 12</li> <li class="col1">Column One, Item 13</li> <li class="col1">Column One, Item 14</li> <li class="col1">Column One, Item 15</li> <li class="col1">Column One, Item 16</li> <li class="col1">Column One, Item 17</li> <li class="col1">Column One, Item 18</li> <li class="col2">Column Two, Item 19</li> <li class="col2">Column Two, Item 20</li> <li class="col2">Column Two, Item 21</li> <li class="col2">Column Two, Item 22</li> <li class="col2">Column Two, Item 23</li> <li class="col2">Column Two, Item 24</li> <li class="col2">Column Two, Item 25</li> <li class="col2">Column Two, Item 26</li> <li class="col2">Column Two, Item 27</li> <li class="col2">Column Two, Item 28</li> <li class="col2">Column Two, Item 29</li> <li class="col2">Column Two, Item 30</li> <li class="col3">Column Three, Item 31</li> <li class="col3">Column Three, Item 32</li> <li class="col3">Column Three, Item 33</li> <li class="col3">Column Three, Item 34</li> <li class="col3">Column Three, Item 35</li> <li class="col3">Column Three, Item 36</li> <li class="col3">Column Three, Item 37</li> <li class="col3">Column Three, Item 38</li> <li class="col3">Column Three, Item 39</li> <li class="col3">Column Three, Item 40</li> <li class="col3">Column Three, Item 41</li> <li class="col3">Column Three, Item 42</li> <li class="col3">Column Three, Item 43</li> <li class="col3">Column Three, Item 44</li> <li class="col3">Column Three, Item 45</li> <!-- number of items can change <li class="col3">Column Three, Item 46</li> <li class="col3">Column Three, Item 47</li> <li class="col3">Column Three, Item 48</li> --> </ul> </div> </body> </html>
This is quite a tough challenge and it too me a good few hours to come up with the solution.
Remember once you have solved this change the number of items in the list and make sure it still works.
Have Fun
Quiz B - Vertical-align multiple images
This second quiz is from an idea by Paul Sweatte and your task is to vertical-align multiple images within the viewport.
Look at the attachment called vert-align.gif and you will see a screenshot of a wide screen and a narrow screen showing the images centred in both cases.
Although I have used same sized images the answer should cater for images of any size.
Rules
There is only one main rule and that is that you can't use the display:table (or table-cell etc..) properties and the result should work in IE6 - 8, Firefox 3, Safari3 and Opera10.
The code should be valid of course and you can use whatever css and html you like.
As usual with both quizzes don't give the answer away in this thread but PM the answer once you have thoroughly checked your code.
If you think you know the answer then PM it to me as I don't believe anyone who says they can do it but doesn't provide proof
However don't give anything away in this thread although you can ask questions if you are not sure of the rules or what is required.
Remember this is just for fun and there are no prizes other than smug self satisfaction of achievement.
Have fun and I guarantee that quiz A will have you perplexed for a while. Quiz B is more straight forward if you understand the concept but will still prove tricky for some.
Enjoy.
PS. : In case you missed the other tests you can find them all listed here:Last edited by Paul O'B; Nov 29, 2009 at 11:19.
-
Nov 22, 2009, 04:57 #2
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
exciting quiz's once again
now i wonder where i could squeeze out some free time.
-
Nov 22, 2009, 05:13 #3
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Nov 22, 2009, 11:17 #4
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Hmm nice quizzes, I'll tackle these after the Ravens kick the Colts' butts
Edit:
Paul can you post the image URL here? Or upload it?Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Nov 22, 2009, 11:35 #5
Hey Paul,
Why are the last three items in column one (ColumnTwo,16-18) there?
Should they be in column two, or are you just showing them wrapping at will when a certain height is reached. It is kinda confusing seeing ColumnTwo items in ColumnOne.
Maybe they should have just been called "Item 1-45"Ray H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
Nov 22, 2009, 11:35 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Nov 22, 2009, 11:40 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Nov 22, 2009, 11:44 #8
I see it now, the naming error is in the html.
Can we correct that or maybe you can correct the sample code for us?
Edit:
Just read your last postRay H.- css-lab.com
W3C Specs - CSS 2.1 | CSS current work | Properties Index
-
Nov 22, 2009, 11:47 #9
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
All images,attachments and html changed now
-
Nov 22, 2009, 16:48 #10
- Join Date
- Oct 2006
- Location
- New Zealand
- Posts
- 2,323
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Lol. I'm stumped. Every solution I try to come up with for the first quiz is a dead-end
-
Nov 22, 2009, 17:14 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Nov 22, 2009, 17:17 #12
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have a correct entry for Quiz B from Gary Turner - Many thanks Gary for your speedy and correct entry
I've also had an entry from somebody else for Quiz A but it's not quite good enough.
-
Nov 22, 2009, 21:58 #13
- Join Date
- Oct 2008
- Posts
- 175
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This test is very good, but it seems no time to do it
So there is time to test what I have
-
Nov 22, 2009, 22:03 #14
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Quiz 1 I got almost everything done aka column 1 and 3 were in respective places with correct numbesr in place, however column 2 was dropping and I don't have a clue how to get it back into place working everywhere.
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Nov 23, 2009, 03:38 #15
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Nov 23, 2009, 04:15 #16
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
i so fail at vertical centering...
-
Nov 23, 2009, 06:10 #17
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
There is only one main rule and that is that you can't use the display:table (or table-cell etc..) propertiesI'm stumped on both quizes - I thought I knew the trick for the second one but it doesn't seem to work as I expected.
-
Nov 23, 2009, 06:25 #18
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
-
Nov 23, 2009, 07:46 #19
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
is the fist quiz a pure elegant solution or a mess of css rules?
as you can guess, im also stumped.
-
Nov 23, 2009, 08:32 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
The first solution is quite elegant and doesn't need too many rules. In fact the method only requires two basic rules to achieve the effect although there are more rules needed to make it look right. (The only extra rules were that Ie6 and 7 needed something different and opera needed an extra fix also.)
-
Nov 23, 2009, 09:05 #21
- Join Date
- Oct 2008
- Location
- Whiteford, Maryland, United States
- Posts
- 13,782
- Mentioned
- 16 Post(s)
- Tagged
- 0 Thread(s)
Always looking for web design/development work.
http://www.CodeFundamentals.com
-
Nov 23, 2009, 09:09 #22
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have a feeling you went this route in the beginning too. There is a certain technique that we all know that makes this work but it's too early to give any more clues than that
-
Nov 23, 2009, 14:44 #23
- Join Date
- Aug 2006
- Posts
- 3
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
sorry folks; it's a colossal waste of time. The average 10 year old can do this in 15 minutes, after having been shown HTML Tables just once. It's child's play. Saying Tables can only be used for tabular date is like saying you can't use a bulldozer to level a derelict building and clear the lot because bulldozers can only be used to doze bulls. And you're supposed to use a bamboo lawn rake - used for creating patterns in sand - instead. And Tables work in every browser ever made; you don't even have to check.
-
Nov 23, 2009, 14:53 #24
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Welcome to Sitepoint!
There's always one who misses the point of these quizes. They are for people who enjoy working with css and problem solving. They don't necessarily represent real world examples but you'll definitely learn a few tips and tricks if you persist. Have a look through the older quizes and you'll realise the purpose of them.
-
Nov 23, 2009, 15:48 #25
- Join Date
- Nov 2007
- Location
- Malaga, Spain
- Posts
- 1,072
- Mentioned
- 4 Post(s)
- Tagged
- 0 Thread(s)
as markbrown4 already mentioned, these quizzes are here for our expansion of CSS related knowledge and fun.
Bookmarks