Forum Moderators: not2easy
Other needs are simple - left hand sidebar to contain menu, and a 'banner' top section. A footer would be nice but isn't mandatory.
Only needs to be compatible with current browser versions.
Not too difficult? Can someone point me to something like that?
[edited by: SuzyUK at 10:38 pm (utc) on Jan. 9, 2008]
[edit reason] No URI's please [/edit]
Based on your description, all you need is a banner div on top, then left floated div for the side bar, and then put in your table. Aside from mandatory tags, that adds up to only 4 lines of code. If you care about a stupid estetics thing, then you might also want to add a simple faux column effect for the side bar. There's never a problem with width expansion (to the right or to the left are the same thing... width expansion) unless you make one... so what you're saying doesn't really make sense to me, since a blank HTML document can expand to the right indefinately.
The CSS just styles your HTML... margins, colors, background images, text style, width&positioning, etc. Those are all your personal choices... what are you expecting?
[edited by: Xapti at 5:49 pm (utc) on Jan. 9, 2008]
I don't see what you're exactly looking for, and why you can't find it yourself.
FYI, Mr BJ has indeed tried to find a template for themself, prior to asking for help here!
basically the template should stretch anything that's above/below the wide table/image/content so that the application when scrolled to the far right still has the appropriate links directly above it rather than having to scroll back to the left - just like a table layout would have done - IMHO it's not always only aesthetics which are involved - it depends on the application.
Unfortunately Mr BJ it is difficult, and although any template could likely be adapted to give this stretchy design, until I find the answer to this question [webmasterworld.com] I can't see there being a 100% solution template - oh and if anyone has come across an answer to the above I'm sure it would be a useful addition to the CSS toolbox and I'd be grateful!
I also happen to know your existing HTML is source ordered in that the content appears before the left menu - is this an important requirement?
For a pure CSS solution, what you're looking to do, with any template, is make the body (wrapper) element behave like a table, which you can do simply by adding
display: table;The footer btw is not a problem, solve part 1 and the footer will just sit under it all - the source ordering is the biggest issue as it requires floats and that invokes an IE percentage margin bug (which is why a prior attempt at this showed your left menu being in the wrong place)
So I'm off to play with using a <table> as a wrapper instead of a wrapper div (for IE).. to see if a compromise is easier that way around! and do let us know if you come across anything in the meantime
-Suzy
Current page structure is:
<body>
<div id="container">
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="menu">
</div>
<div id="extra">
</div>
<div id="footer">
</div>
</div>
</body>
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#wrap, #wrapie {display: table; width: 100%;}
.stretchy {width: 150px; background: #ffd;}
#header {background: gray;}
#contentwrap {float: right; margin-left: -100%; width: 100%;}
#content {margin-left: 210px; background: #f00; border: 1px solid #000;}
#content p {margin: 1em 0;}
#sidebar {float: left; width: 200px; background: #ff0;}
#subnav, #footer {background: #000; color: #fff; font-weight: bold; width: 100%; clear: both;}
</style>
</head>
<body>
<div id="wrap"><!--[if IE]><table summary="wrapper" id="wrapie" cellspacing="0"><tr><td><![endif]-->
<div id="header"><h1>Header</h1></div>
<div id="subnav">subnavigation text..</div>
<div id="contentwrap"><div id="content">
<p class="stretchy">this paragraph is stretchy<br><br>
<!--
<table border=1>
<tbody>
<tr><td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
<td NOWRAP>This is Header 1</td>
</tr>
<tr><td COLSPAN=11> line item</td></tr>
</tbody>
</table>
<br>
-->
</p>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></div>
<div id="sidebar">
sidebar menu<br>sidebar text<br>sidebar menu<br>sidebar text<br>
sidebar menu<br>sidebar text<br>sidebar menu<br>sidebar text<br>
</div>
<div id="footer">footer text..</div>
<!--[if IE]></td></tr></table><![endif]--></div>
</body>
</html>
Are these 'sticky footers' problematical? Do they work? I'm not to fussy about the preciseness of where it sits down below - just looks better if it's not in the middle of the page! Can someone post some modified footer code to do this?
there is no SEO requirement at all as it is a web application.
Ahh, I did wonder, I originally thought that might make it a bit easier, the floats used in the source ordering were causing some problems at various points. However even if the order is changed some float trickery is still required to stop the wide content "dropping" below the sidebar
here's some code I have so far**, and even if you change the source order so the sidebar comes before the content the CSS still holds up (no float drops)
I have to stress this is not tested with anything more than paragraphs, so if anyone does take this code and tries it out please let me know where/if/how it breaks!
I think also instead of the conditional comment for IE which feeds the table to IE only, you could just feed the table "wrapie" to all browsers and drop the "wrap" div. As it's for an application it's possibly best to Keep it Simple:
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Untitled</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#wrap, #wrapie {display: table; width: 100%;}
.stretchy {width: 150px; background: #ffd;}
#header {background: #eee;}
#contentwrap {float: right; margin-left: -100%; width: 100%;}
#content {margin-left: 210px; background: #f00; border: 1px solid #000;}
#content p {margin: 1em 0;}
#sidebar {float: left; width: 200px; background: #ff0;}
#subnav, #footer {background: #000; color: #fff; font-weight: bold; width: 100%; clear: both;}
</style>
</head>
<body>
<div id="wrap"><!--[if IE]><table summary="Page Content Holder" id="wrapie" cellspacing="0"><tr><td><![endif]-->
<div id="header"><h1>Header</h1></div>
<div id="subnav">subnavigation text..</div>
<div id="contentwrap"><div id="content">
<p class="stretchy">this paragraph is stretchy</p>
<p>Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
</div></div>
<div id="sidebar">
sidebar menu<br>sidebar text<br>sidebar menu<br>sidebar text<br>
sidebar menu<br>sidebar text<br>sidebar menu<br>sidebar text<br>
</div>
<div id="footer">footer text..</div>
<!--[if IE]></td></tr></table><![endif]--></div>
</body>
</html>
did you find anything else usable?
& Good Luck
[added]sorry, forgot to say, in that code above if you change the width of the "stretchy" class to say 1500px or more that's the equivalent of the wide content, which would likely be a data table[/added]
oooops, sorry I didn't see you'd already posted the code with the table intact, sorry for cross posting!
[edited by: SuzyUK at 11:45 pm (utc) on Jan. 10, 2008]
providing this code is actually usable, I would remove the footer from inside the wrapper, make the wrapper a minimum height of say 98% then have the footer coming after that, I have no idea if it will work in practice, (table heights can be strange) but even if it did it would mean the footer would not stretch to beyond the viewport width if there was extra wide content, is that an issue?
if not then centering the footer text in it might look better.
might be interesting to see if the above code can incorporate a sticky footer
sigh...
_________________________________________________
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Untitled</title>
<style type="text/css" media="screen">
html, body {margin: 0; padding: 0;}
#wrap, #wrapie {display: table; width: 100%;}
.stretchy {width: 150px; background: #ffd;}
#header {background: #eee;}
#contentwrap {float: right; margin-left: -100%; width: 100%;}
#content {margin-left: 210px; margin-top: 18px; padding: 5px 10px 5px 10px; background: #eee; border: 1px solid #999;}
#content p {margin: 1em 0;}
div#content p{line-height:1.4}
div#content h1.tablename1 {
height: auto;
font-size : 1.0em;
}
div#menu {float: left; width: 170px; margin-top: 18px; background: white;}
div.navdiv p {
margin: 0 0px 0px 16px;
line-height: normal;
color: #333;
font-size: 0.9em;
}
div#menu p.navbutts {
margin: 0 0 2px 16px;
width: auto;
border: none;
}
div#menu .navbutts a {
border : 1px solid #999;
display : block;
color :#333;
padding : 3px 2px 3px 8px;
text-decoration : none;
width : auto;
font-weight:normal;
}
.navbutts a:hover {
background : #b5b1c3;
color : #fff;
text-decoration : none
}
#subnav {width: 100%; clear: both;}
#footer {background: #333; color: #fff; width: 100%; clear: both;}
#footer p {margin:0; padding:5px 10px; color: #FFF;}
a.footer {color : #FFF;}
</style></head><body>
<table class="container" summary="Page Content Holder" id="wrapie" cellspacing="0"><tbody><tr><td>
<div id="header"><h1> header here</h1>
</div>
<div id="subnav"><h1>subheader</h1></div>
<div id="contentwrap"><div id="content">
<p class="stretchy">
<table border="1">
<tbody>
<tr><td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
<td nowrap="nowrap">This is Header 1</td>
</tr>
<tr><td colspan="11"> line item</td></tr>
</tbody>
</table>
<br>
</p>
</div></div>
<div id="menu" class="navdiv">
<p class="navbutts"><a href="#">Menu Button </a></p>
</div>
<div id="footer"><p>this is footer text</p></div>
</td></tr></tbody></table>
</body></html>
