SitePoint Sponsor |
|
User Tag List
Results 1 to 24 of 24
-
May 31, 2004, 05:23 #1
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Test your CSS skills - Number 5 (hardest yet!)
Hi,
Test your CSS skills - Number 5
Due to demand I have come up with what I think is the hardest test yet and I'll be surprised if anyone can come up with a solution (now there's a challenge for all you experts).
Take a look at the link below which shows a simple table layout.
http://www.pmob.co.uk/temp/fourcellstable.htm
There are 4 cells that take up the 100% width and each cell will expand in height and equalise with the cell that contains the most content. The background colour will expand to be consistent with the longest cell. I have put the longest text in each different cell so that you can see the full effect.
While this is a simple job to do in tables it has previously been though almost impossible to replicate with css alone. However after a bit of thought (and 2 hours hard work) I've produced the table layout precisely with all its characteristics. Don't get excited too much though as the layout is probably too convoluted to use in the real world.
Here are some images to show how the table layout and the css layout compare.
http://www.pmob.co.uk/temp/fourcellsimages.htm
As you can see there is no drop of the cells at small sizes and all cells are equalised with the longest cell accordingly.
- Rules:
Four cells of 25% each (approx - I'm not worried about a couple of pixels here and there) - The layout must not break unless the layout is very small.
- The same css is to be used for every row. You can't hard code each longest cell by any means. (You should be able to put any amount of text in any cell without altering the css or html to take account of it.)
- No frames or iframes
- No javascript or scripting of any kind
- NO TABLES
- No inline styles
- No images
- No expression,conditional comments, behaviours etc.
- Use Valid CSS
- Use Valid xhtml
- Must work in Firefox and ie6 exactly the same as my example above. You won't be able to use display:table-cell etc as IE6 doesn't understand that.
- No hacks, no child selectors, no universal selectors, no means of offering separate code to each browser. The same code must work for both browsers.
As with the other tests these aren't meant to be suggestions for layout but more an exercise in using css to achieve something different and having fun at the same time. (The methods used in this example will suffer from divitis i'm afraid and won't make much sense if css is turned off but that's not the point of this exercise anyway.)
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=171221Last edited by Paul O'B; Jun 1, 2004 at 05:03.
-
May 31, 2004, 14:55 #2
- Join Date
- Sep 2002
- Location
- Canada
- Posts
- 2,087
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
If only display: table; would work in IE
"A nerd who gets contacts
and a trendy hair cut is still a nerd"
- Stephen Colbert on Apple Users
-
May 31, 2004, 23:01 #3
- Join Date
- Aug 2003
- Location
- Romania
- Posts
- 26
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Almost got it. Just that it looks bad when I resize the window.
An error is a human mistake with honest intention.
-
Jun 1, 2004, 02:20 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by new guy
Originally Posted by mofo
).
Anyone else got any ideas?
I told you it wasn't easy lol
Paul
-
Jun 1, 2004, 03:51 #5
- Join Date
- Dec 1999
- Location
- Southampton, Hants, UK
- Posts
- 672
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I'm a little confused as to why you would want to turn this into CSS only. - this is not a dig at the competition, just a general enquiry.
From what I've heard, (i could be wrong), you shouldn't be using tables to control layout, only display tabular data. but this is generally not a layout thing, it is, in my oppinion a table of data.
I think people in general (me included), try to remove tables entirely from a site, even in cases like this.
Why would it be beneficial to remove the table in favour of css in this situation. when a simple table set of html tags with no layout attributes and a simple class/id attribute for the table..then css to control the visuals would be perfectly ok.
:-) Dan
-
Jun 1, 2004, 04:18 #6
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Daniel,
Originally Posted by daniel
Originally Posted by me
However what you will gain from trying to do the impossible is that you will learn many techniques that can be applied in different situations.
A table is best used for tabular data and of course there would be no point in using css for this as a a table has got it covered.
But if I changed the test to be make a table with a table it wouldn't be much of a test now would it
These tests are all about thinking how css works and how it can be applied. This test is specifically difficult and that was the only reason I chose the table test.
This is not a "how to" or "should do" but is it "possible to do".
Hope that makes it clearer
Paul
-
Jun 1, 2004, 04:36 #7
- Join Date
- Dec 1999
- Location
- Southampton, Hants, UK
- Posts
- 672
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
yup a lot clearer. Thanks :-)
-
Jun 1, 2004, 05:01 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Dougbtx (Doug Livingstone) is in the lead so far with the closest solution, but it's not close enough to win yet unless any of you can beat him to it.
I'll give you one clue in that the solution requires a lot of nesting (unfortunately - otherwise it would be a valid alternative to a table). Of course there may be other ways to do this apart from my method (but I don't think so).
You need to think how you can expand the other cells when one cell expands. How can it affect the other cells?
That's all the clues for now but if no-one's getting near or on the right track then I may start dropping hints during the week.
Remember that any cell should be able to contain the most (or any amount of) text without changing the css or html to reflect the change.
Thanks to those who have already PM'd me and keep trying
Paul
-
Jun 2, 2004, 06:09 #9
- Join Date
- Mar 2002
- Location
- Lappeenranta, Finland
- Posts
- 176
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I found a solution, and PM'd Paul about it. We'll see if he accepts it.
It's not pretty, but IMHO it can do what Paul described.
-
Jun 2, 2004, 06:19 #10
- Join Date
- Oct 2001
- Location
- Estonia
- Posts
- 141
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Done in 15mins.
Works only in Opera (i love the browser)
now i just have to hack IE and Moz
code is valid, browsers are not - when will it end ?(2B) or (not 2B) = FF
-
Jun 2, 2004, 08:58 #11
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Arkkimaagi:
I'm going to be a bit picky here before I declare a clear winner as I was looking for the content in any cell to be increased without having to change any other css, html or content in other cells to match.
At the moment you are in second place behind Doug and funnily enough both of you have used more or less the same solution.
To anyone else who is still trying this you must ensure that any cell can have more content without having to change the CSS, the html or any other content in any other cells.
I want to be able to go to a cell and type a line of text in and have it render correctly straight away as though it was dynamically entered.
Originally Posted by Hulkur
) as that would be too easy
Originally Posted by Hulkur
The same code must apply to both browsers Ie6 and Moz. (You can PM me your solution if you want to know if you're on the right track or not.)
I'll keep this open for a few more days to see what you can all come up with. (Some of you are very inventive).
Thanks for all the entries so far
Paul
-
Jun 2, 2004, 10:22 #12
- Join Date
- Mar 2002
- Location
- Lappeenranta, Finland
- Posts
- 176
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ok, lets see now if I got it nailed.
-
Jun 2, 2004, 10:58 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Arkkimagi
Well done - your solution does exactly what I wanted
Any cell can be the longest just by typing in more content without changing anything else. The columns all automatically expand to accomodate as per the table example.
Congratulations, I didn't think anyone was going to get this. I won't post the solution just yet in case some others are in the middle of trying this. I'll post the solution and links tomorrow (or Friday).
If anyone else is still trying this I'd still like to see your solution in case there's another way to do this. Arkkimagi's solution was similar to mine and both solutions look a little ugly lol.
Paul
-
Jun 2, 2004, 11:19 #14
- Join Date
- Oct 2001
- Location
- Estonia
- Posts
- 141
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally Posted by Paul O'B
And yes, it would be too easy (and it works only in opera, don't remember about firefox)
Originally Posted by Paul O'B
Just things like border around div so that firefox would show background correctly etc.
I got it working on opera and IE, firefox is still avoiding me.
I'll send it in to get comments at least.(2B) or (not 2B) = FF
-
Jun 2, 2004, 11:29 #15
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by hulkur
-
Jun 2, 2004, 12:07 #16
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi,
Just had another great entry from Hulkur which works perfectly in Opera 7 however ie6 and firefox aren't exactly playing ball yet but I'm sure he can fix it
Good work and thanks for making the effort
Paul
-
Jun 3, 2004, 15:50 #17
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Solution Time :
I haven't had any more enquiries on this so I think its time the solutions were posted.
Without further ado here is the link to my original solution. The css layout is on top and a table layout below and as you can see they behave very well together.
http://www.pmob.co.uk/temp/fourcellsboth.htm
Please no remarks about too many nestings or "You should have used a table" etc - that wan't the point
In case you are wondering how it works - it goes like this. (Take a deep breath):
The key element is a float that contains 3 other inner floats that are the same size as the parent. These will be the 4 cells in our layout.
Each inner float is slid out of the parent by using a 100% negative margin. This creates a telescopic effect where all floats slide out of their parents and eventually fill the 100% width.
If any one of the floats contains more content it will then stretch its parent which will also stretch its own parent and so on. This is the key to the layout and ties all the expansion down to the first parent float.
Around that first parent float we then add three outer floats that contain only background colour at the specified intervals that match exactly the inner floats that we detailed earlier.
When content in any cell is increased the main floats height is increased which also then pushes the three outer elements that contain the colours. In this way we will always get full column colours in the required place.
As mentioned numerous times this method suffers from numerous nestings and a table is the preferred way of doing this.
However the technique is quite useful and you could turn it into a 3 column fully fluid layout that doesn't need background gifs and can have different coloured columns.
Here are some simple examples.
http://www.pmob.co.uk/temp/new3colfluid/3col.htm
http://www.pmob.co.uk/temp/new3colfluid/3col_3.htm
http://www.pmob.co.uk/temp/new3colfluid/3colfluid_1.htm
These are just experiments and I don't offer them as a means to an end but perhaps something to look into and understand. The level of nesting isn't too bad for a 3 column layout and the best thing for the simpler versions of equal columns is that no hacks are required.
The winner in this weeks quiz was Arkkimaagi and here is his code which has some similarities to mine:
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title>CSS quiz 5 - Arkkimaagi</title> <style type="text/css"> <!-- .bl{ background-color: #0000FF; } .re{ background-color: #FF0000; } .si{ background-color: #C0C0C0; } .gr{ background-color: #008000; } .re{ width: 25%; } .gr,.bl,.si{ margin-left: 100%; margin-right: -100%; position: relative; width: 100%; } .clear{ clear: both; line-height: 1px; } .inner{ margin-left: -300%; position: relative; width: 400%; } .inner1{ float: left; position: relative; width: 25%; } .inner2{ float: left; position: relative; width: 25%; } .inner3{ float: left; position: relative; width: 25%; } .inner4{ float: left; position: relative; width: 25%; } --> </style> </head> <body> <div class="row"> <div class="re"> <div class="gr"> <div class="bl"> <div class="si"> <div class="inner"> <div class="inner1">content 1<br /> <br /> <br /> long</div> <div class="inner2">content 2</div> <div class="inner3">content 3</div> <div class="inner4">content 4</div> <br class="clear"> </div> </div> </div> </div> </div> </div> <br> <div class="row"> <div class="re"> <div class="gr"> <div class="bl"> <div class="si"> <div class="inner"> <div class="inner1">content 1</div> <div class="inner2">content 2<br /> <br /> <br /> long</div> <div class="inner3">content 3</div> <div class="inner4">content 4</div> <br class="clear"> </div> </div> </div> </div> </div> </div> <br> <div class="row"> <div class="re"> <div class="gr"> <div class="bl"> <div class="si"> <div class="inner"> <div class="inner1">content 1</div> <div class="inner2">content 2</div> <div class="inner3">content 3<br /> <br /> <br /> long</div> <div class="inner4">content 4</div> <br class="clear"> </div> </div> </div> </div> </div> </div> <br> <div class="row"> <div class="re"> <div class="gr"> <div class="bl"> <div class="si"> <div class="inner"> <div class="inner1">content 1</div> <div class="inner2">content 2</div> <div class="inner3">content 3</div> <div class="inner4">content 4<br /> <br /> <br /> long</div> <br class="clear"> </div> </div> </div> </div> </div> <span class="clear"></span> </div> </body> </html>
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS Test 5 - Hulkur</title> <style type="text/css"> .row { width: 99%; clear: both; border-bottom: 2px solid #fff; border-top: 2px solid #fff; } .c_1,.c_2,.c_3,.c_4 { float: left; } .box1 { background-color: #f69; width: 100%; margin: 0 0 0 0; } .box2 { background-color: yellow; width: 75%; margin: 0 -5px 0 25%; } .box3 { background-color: red; width: 66%; margin: 0 -5px 0 34%; } .box4 { background-color: blue; width: 50%; margin: 0 -6px 0 50%; } .c_1 { width: 25%; } .c_2 { width: 34%; } .c_3 { width: 50%; } .c_4 { width: 99%; } .clear { clear: both; } /* "hacks" follow */ /* firefox: background color fix */ .box1 { border: 1px solid #f69; margin-top: -1px; margin-bottom: -1px; } .box2 { border: 1px solid yellow; margin-top: -1px; margin-bottom: -1px; } .box3 { border: 1px solid red; margin-top: -1px; margin-bottom: -1px; } .box4 { border: 1px solid blue; margin-top: -1px; margin-bottom: -1px; } /* IE: height fix */ .box4 .clear { width: 99%; } </style> <meta http-equiv="Content-Type" content='text/html; charset="ISO-8859-15"' > </head> <body> <!-- Row 1 --> <div class="row"> <div class="box1"> <div class="c_1">Cell 1 <br /> Cell</div> <div class="box2"> <div class="c_2">Cell 2</div> <div class="box3"> <div class="c_3">Cell 3</div> <div class="box4"> Cell 4 <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> <!-- Row 2 --> <div class="row"> <div class="box1"> <div class="c_1">Cell 1</div> <div class="box2"> <div class="c_2">Cell 2 <br /> Cell</div> <div class="box3"> <div class="c_3">Cell 3</div> <div class="box4"> Cell 4 <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> <!-- Row 3 --> <div class="row"> <div class="box1"> <div class="c_1">Cell 1</div> <div class="box2"> <div class="c_2">Cell 2</div> <div class="box3"> <div class="c_3">Cell 3 <br /> Cell</div> <div class="box4"> Cell 4 <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> <!-- Row 4 --> <div class="row"> <div class="box1"> <div class="c_1">Cell 1</div> <div class="box2"> <div class="c_2">Cell 2</div> <div class="box3"> <div class="c_3">Cell 3</div> <div class="box4"> Cell 4 <br /> Cell <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> </div> </body> </html>
However it was very clever and worth a mention
I hope you've enjoyed this weeks quiz and keep an eyeout for the next one some time next week. Next weeks will be a bit simpler so more people can have a go.
Thanks to all those that entered and congratulaions to those mentioned above especially to arkkimaagi's solution which worked more or less as stated (not quite as stable as mine though)
Paul
-
Jun 4, 2004, 10:58 #18
- Join Date
- Sep 2002
- Location
- Canada
- Posts
- 2,087
- Mentioned
- 1 Post(s)
- Tagged
- 1 Thread(s)
Boo! negative percentages
Good job though, tough one.
"A nerd who gets contacts
and a trendy hair cut is still a nerd"
- Stephen Colbert on Apple Users
-
Jun 4, 2004, 11:56 #19
- Join Date
- Oct 2003
- Location
- The Netherlands
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Now make thread number six so I can participate
-
Jun 4, 2004, 12:22 #20
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by newguy
Originally Posted by kilroy
Paul
-
Jun 6, 2004, 22:48 #21
- Join Date
- Oct 2003
- Location
- The Netherlands
- Posts
- 406
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Paul, looking forward to it!
-
Jun 9, 2004, 07:16 #22
I couldn't do this one, in fact I am still trying to figure out the how-it-works bit, however I finally understand 'divitis'
Octal - All your base-8 belong to us
"Knowing is not enough, we must apply.
Willing is not enough, we must do." - Bruce Lee
-
Jan 15, 2009, 16:31 #23
- Join Date
- Oct 2007
- Location
- United Kingdom
- Posts
- 622
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
(I have been going through the challenges)
This seems to work well in all the browsers I have tested it in (including IE6!)....
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>ro0bear</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> html, body {margin: 0; padding: 0;} .pink {background-color: pink; padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 0; z-index: 0;} .yellow {background-color: yellow; padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 24.9%; z-index: 0;} .red {background-color: red; padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 49.8%; z-index: 0;} .blue {background-color: blue; padding-bottom: 1000%; width: 24.9%; position: absolute; top: 0; left: 74.7%; z-index: 0;} .container p {width: 24.9%; float: left; margin: 0; z-index: 1; padding: 0;} .container {position: relative; margin: 0; padding: 0; width: 100%; border: 1px solid white; overflow: hidden; z-index: 1;} .bottom {position: relative; padding-bottom: 1000%; background-color: white; width: 100%; z-index: 1;} #outercontainer {position: absolute; width: 100%; margin: 0.5em; padding: 0;} </style> </head> <body> <div id="outercontainer"> <div class="pink"></div> <div class="yellow"></div> <div class="red"></div> <div class="blue"></div> <div class="container"> <p>This is cell 1 with the most text: This is cell 1 with the most text</p> <p>This is cell 2 : This is cell 2 :</p> <p>This is cell 3 : This is cell 3 :</p> <p>This is cell 4 : This is cell 4 :</p> </div> <div class="container"> <p>This is cell 1 : This is cell 1 :</p> <p>This is cell 2 with the most text: This is cell 2 with the most text</p> <p>This is cell 3 : This is cell 3 :</p> <p>This is cell 4 : This is cell 4 :</p> </div> <div class="container"> <p>This is cell 1 : This is cell 1 :</p> <p>This is cell 2 : This is cell 2 :</p> <p>This is cell 3 with the most text: This is cell 3 with the most text</p> <p>This is cell 4 : This is cell 4 :</p> </div> <div class="container"> <p>This is cell 1 : This is cell 1 :</p> <p>This is cell 2 : This is cell 2 :</p> <p>This is cell 3 : This is cell 3 :</p> <p>This is cell 4 with the most text: This is cell 4 with the most text</p> </div> <div class="bottom"></div> </div> </body> </html>
ro0bear
-
Jan 16, 2009, 03:36 #24
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Good thinking ro0bear using absolute columns to make the colours
That seems to work well and is neater than the original. Glad you are still having fun with these.
Bookmarks