SitePoint Sponsor |
|
User Tag List
Results 1 to 8 of 8
Thread: Tricky Layout
-
Jan 24, 2008, 00:07 #1
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
Tricky Layout
Ok, here's the challenge:
Left and right columns need to remain at 200px wide.
Bottom left cell needs to remain at 200px high.
Total layout should match the windows available space - complete layout will be within another table cell.
All cells should have scroll bars when the content exceeds it's dimensions..
Here's a start i've made:
If it can work without the table then so be it - but i'm not too phased about it being within a table at this point.
Code:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Untitled Document</title> <style type="text/css"> * { margin: 0; padding: 0; } html, body { height: 100% } .grid { border-collapse: collapse; border: 1px solid #aaa; width: 100%; height: 100%; } .grid td { border: 1px solid #aaa; overflow: auto; height: 100%; margin: 0; padding: 0; } .grid .inner { height:100%; background: #F2F2F3; } .grid .workspaces { height: 200px; } .grid .workspaces .inner { background: #fff; } </style> </head> <body> <table cellpadding="0" cellspacing="0" style="width: 100%; height: 100%"> <tr> <td colspan="2" style="background:#FC6"><p style="height:100px;">Header</p></td> </tr> <tr> <td style="height:100%; vertical-align:top;"><table class="grid"> <tr> <td style="width:200px" class="criteria"><div class="inner"> <p>asdf</p> <p>asdf</p> <p>asdf</p> <p>df</p> <p>asdf</p> <p>sadf</p> <p>asdf</p> <p>sdf</p> <p>asdf</p> </div></td> <td rowspan="2" class="workspace"><div class="inner"></div></td> <td style="width:200px" rowspan="2"><div class="inner"></div></td> </tr> <tr> <td class="workspaces"><div class="inner"> </div></td> </tr> </table></td> <td style="width: 200px; background:#FCC"><p style="height: 600px">Sidebar</p></td> </tr> </table> </body> </html>
table.grid should match the available space in the window, not match the height of the sidebar.
At smaller height windows I am wanting table.grid to be completely visible.
The first to get it out wins a coke.. if they accept it though the post.
-
Jan 24, 2008, 03:21 #2
- Join Date
- Oct 2006
- Location
- New Zealand
- Posts
- 2,323
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
That looks far too easy. But I'm guessing I'm missing something here.
I thought the same of one of Paul O'Briens tests a while ago and after about two hours of pounding away at it I gave up! I don't have time right now to have a crack unfortunately but count me in for next time
-
Jan 24, 2008, 16:18 #3
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
That looks far too easy..
-
Jan 24, 2008, 16:37 #4
- Join Date
- Sep 2005
- Location
- Tanzania
- Posts
- 4,662
- Mentioned
- 2 Post(s)
- Tagged
- 0 Thread(s)
I had a go at it lazily using lots of absolute positioning.
HTML Code:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <title>T</title> <style type="text/css"> body, html, div {padding:0;margin:0} div {border:1px solid red} #left, #right, #left div { width:200px; position:absolute; top:0; bottom:0; } #left .upper { left:0; top:0; bottom:200px; overflow:scroll; } #right { right:0; } #left .lower { left:-1px; position:absolute; height:200px; top:auto; } </style> </head> <body> <div id="main"> <div id="left"> <div class="upper"> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> <p>stuff</p> </div> <div class="lower"> </div> </div> <div id="right"> </div> </div> </body> </html>
-
Jan 24, 2008, 17:57 #5
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Yes, I thought along the same lines but I knew IE6 wouldn't work so I added a cheat
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> <style type="text/css"> *{margin:0;padding:0} html,body{height:100%;} #outer{ height:100%; position:relative; } #left,#right,#middle{ position:absolute; overflow:auto; top:0; } #left{ left:0; width:200px; bottom:200px; background:red } * html #left{ height:expression( (d = document.compatMode == "CSS1Compat" ? document.documentElement : document.body) && (d.clientHeight - 200 +"px" )); } #right{ right:0; bottom:0; height:100%; width:200px; background:blue; } #middle{ left:205px; right:205px; bottom:0; height:100%; background:green; } #inner{height:100%} #base{ position:absolute; left:0; bottom:0; height:200px; width:200px; background:yellow; overflow:auto; } </style> </head> <body> <div id="outer"> <div id="left"> <p>Left content goes here : Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here :Left content goes here : </p> </div> <div id="middle"> <div id="inner"> <p>This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : This is the middle content : </p> </div> </div> <div id="right"> <p>Right content goes here : Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here :Right content goes here : </p> </div> <div id="base"> <p>This is the base content: </p> </div> </div> </body> </html>
-
Jan 24, 2008, 22:31 #6
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
You both deserve a coke in your own right, very very decent.
Paul, with your IE cheat - because it matches the windows height - 200px it won't work unless the layout is the entire window. I'm really needing this layout to occupy just a portion of the window..
Code:<div style="height: 300px; width: 500px; position: relative;"> Could you make it work in here in IE6< ? </div>
-
Jan 25, 2008, 04:36 #7
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Hi Mark,
style="height: 300px; width: 500px; position: relative;
Expressions are just basically javascript for ie so you can find the elements height instead of the documents height.
We might need to see a real example of what you are trying to do as I'm not sure whether any of the above will be workable in a real situation unless its explicitly controlled
-
Jan 25, 2008, 16:06 #8
- Join Date
- Jul 2006
- Location
- Victoria, Australia
- Posts
- 4,122
- Mentioned
- 29 Post(s)
- Tagged
- 2 Thread(s)
I should be able to get it working now with that info.
I'll post an example of the whole page so I can get your thoughts on it.
All the best,
Bookmarks