RJM 0 Report post Posted April 22, 2009 I'm laying out my site and I'm trying to come up with a layout like the one in this sketch I did: Should I use Div, Frames, or Tables? Can I do this using only CSS and HTML? Or do I need to write a script? Also the box on the right will have an x-repeat image across the top 25px tall and the rest a full tile background. Do I need to split it with a 25px tall cell? First responder with working solution gets my manginity. Share this post Link to post Share on other sites
rvalkass 5 Report post Posted April 22, 2009 Tables should never be used for layout. Tables are there for tabular data, not for laying pages out.Frames are somewhat inaccessible and outdated considering current methods for accomplishing the same thing, although there is nothing specifically wrong with them.I would recommend using divs to make the layout. They can be fully styled with HTML and CSS, and no scripting would be required.For the box on the right, the CSS for using two background images isn't fully supported yet, so I would add a 25px tall bar at the top for your first image. Share this post Link to post Share on other sites
RJM 0 Report post Posted April 22, 2009 I tried with div, but I get problems with some things. Like what width do I set the right box at? 100% and it's 100%+800px off to the side and I get a scrollbar going way out in right field.And same with the bottom box. Share this post Link to post Share on other sites
RJM 0 Report post Posted April 22, 2009 (edited) Here's what I have: }#SiteHolder { position:absolute; width:100%; height:100%; z-index:1;}#BannerDiv { position:relative; width:100%; height:92px; z-index:1; left: 0; top: 0;}#ContentDiv { position:relative; width:100%; height:808px; z-index:1; left: 0px; top: 0px;}#BkgDiv { position:relative; width:767px; height:808px; z-index:2;}#RightbarDiv { position:relative; float:right; z-index:2; background-image: url(images/sky-bkg.gif);}#RightShadow { position:relative; height:25px; z-index:3; background-image: url(images/shadow.gif);}#FooterDiv { position:relative; width:100%; z-index:1; background-image: url(images/tile.gif); top: 900px; visibility: inherit;}--></style></head><body><div id="SiteHolder"> <div id="BannerDiv" style="background-color:#000000"> <img src="images/Logo_main.gif" width="380" height="92" align="left" /> </div> <div id="ContentDiv" style="background-image:url(images/tile.gif)"> <div id="BkgDiv"> <img src="images/bkg.gif" width="767" height="808" align="left" /> </div> <div id="RightbarDiv"> <div id="RightShadow"> </div> </div> </div> <div id="FooterDiv"> </div></div> Edited April 22, 2009 by RJM (see edit history) Share this post Link to post Share on other sites
frozen.fish 0 Report post Posted April 22, 2009 100% height with divs is almost impossible but there are work arounds.. i forgot though never successfully made one. i just give it a fixed height instead. Share this post Link to post Share on other sites
truefusion 3 Report post Posted April 22, 2009 To the topic starter: it is impossible to make a table that is 100% by 100% if you are following standards. But your current mistake is positioning the layout structure as absolute. In this case you are giving the effect of the DIV as appearing to be "floating" in mid air—at least by design. Due to this, the browser is incapable of determining what is "100%" width and height for that specific DIV element. You should remove "position" from everything in the CSS if you want better results. Albeit, you still won't get 100% height no matter what you do, even if you were to give the HTML and BODY element 100% height. Tables should never be used for layout. Tables are there for tabular data, not for laying pages out.Tables as structure support isn't a taboo, even in a standards compliant world. They just don't want you to go all out with them. There's currently no way to visually obtain the same result as a table using pure DIVs and CSS. Ironically, when people attempt to achieve such results they end up producing code that looks like a table anyway. Here's an example of such (see the similarities): <table><tr> <td></td> <td></td> <td></td> </tr> </table> <div id="container"> <div id="left"></div> <div id="content"></div> <div id="right"></div> </div> Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted April 22, 2009 How wide is the sidebar? Are you wanting the Header and Footer to be 'fixed position' so the centre content scroll independently of them? Share this post Link to post Share on other sites
RJM 0 Report post Posted April 22, 2009 Here's my latest code...I simplified it to just the divs and color coded each div to see exactly what each is doing. The RightShadow div is the one I need to fix. I want to make it 100% of RightbarDiv. I want RightbarDiv to fill the space between the BkgDiv div and the right side of the window. But RightbarDiv is contained by ContentDiv and so 100% covers the whole thing. How do I make RightbarDiv "see" and stop at BkgDiv? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Imagaeon Branding</title><style type="text/css"><!--body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}div {display:inline-block}#SiteHolder { position:absolute; width:100%; height:100%; z-index:1;}#BannerDiv { position:relative; width:100%; height:92px; z-index:1; left: 0; top: 0;}#ContentDiv { position:relative; width:100%; height:808px; z-index:1; left: 0px; top: 0px;}#BkgDiv { position:relative; width:767px; height:808px; z-index:2; float:left;}#RightbarDiv { position:relative; z-index:2; float:right;}#RightShadow { position:relative; height:25px; z-index:3; width: 100px;}#FooterDiv { position:relative; width:100%; z-index:1; visibility: inherit; height: 30px;}--></style></head><body><div id="SiteHolder" style="background-color:#99FF00"> <div id="BannerDiv" style="background-color:#FF0000"> </div> <div id="ContentDiv" style="background-color:#666666"> <div id="BkgDiv" style="background-color:#33FF00"> </div> <div id="RightbarDiv" style="background-color:#CC9900"> <div id="RightShadow" style="background-color:#FF00FF"> </div> </div> </div> <div id="FooterDiv" style="background-color:#999999"> </div></div></body></html> Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted April 22, 2009 Check this out for a starting point: http://forums.xisto.com/no_longer_exists/*I think* that will work as a 'template' for your design. Header and Footer fixed. I can alter (I think) the content to go full width and have a second div beside the existing content. Be back in a flash. Share this post Link to post Share on other sites
RJM 0 Report post Posted April 22, 2009 I'm thinking I might need to do a script function for the Div's width... I'll see if I know enough JS yet... Share this post Link to post Share on other sites
jlhaslip 4 Report post Posted April 22, 2009 Or maybe this one might be a better start. Already has the right column there.http://forums.xisto.com/no_longer_exists/Yes, I'm thinking that there needs to be something 'flex' in the layout. What happens to someone viewing in a 800px wide monitor? There are still loads of them around. Fixing the left hand side to 800px and then adding the right column will be a challenge. Why the 800px width on the left? Where is the Flash going? Can you use a fixed width on the right and the left is the balance? Share this post Link to post Share on other sites
truefusion 3 Report post Posted April 23, 2009 I'm thinking I might need to do a script function for the Div's width... I'll see if I know enough JS yet...Here's an updated version of the code you have provided. I removed all the unnecessaries. It doesn't yet do 100% height, but a workaround can be implemented later (as i find it quite annoying trying to work with 100% height, so i didn't try to here).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Imagaeon Branding</title><style type="text/css"><!--body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}p { padding: 0 5px 0 5px;}#SiteHolder {}#BannerDiv { height:92px;}#ContentDiv { background-color: #CC9900;}#BkgDiv { width: 80%;}#RightbarDiv { float:right; width: 20%;}#RightShadow { height:25px; width: 100px;}#FooterDiv { width:100%; height: 30px;}--></style></head><body><div id="SiteHolder" style="background-color:#99FF00"> <div id="BannerDiv" style="background-color:#FF0000"></div> <div id="ContentDiv"> <div id="RightbarDiv"> <p>asdf</p> </div> <!-- // End of RightbarDiv --> <div id="BkgDiv" style="background-color:#33FF00"> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> <p>asdfaf</p> </div> <!-- // End of BkgDiv --> </div> <!-- // End of ContentDiv --> <div id="FooterDiv" style="background-color:#999999"></div></div></body></html> Share this post Link to post Share on other sites
