Jump to content

Layout help


RMarinJMZ

Recommended Posts

This is my first post here. I am trying to build my design in Dreamweave and I am running into a few walls. I attached a jpg of the layout I want to create. Here is the code for what I have so far: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...ransitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>HTML Layout using Div Elements TEST2</title></head><body> <!--<div id="container" style="max-width:1280px; min-width:800px; min-height:768px; max-height:1024px;">--><div id="container-header" style="width:100%; height:38; overflow:hidden; margin:0px; padding:0px;"><div id="header1" style="background-color:#72657E; height:38px; width:10%; float:left;"></div> <div id="header2" style="background-color:#B5ADC2; height:38px; width:20%; float:left;"></div> <div id="header3" style="background-color:#ABA3AE; height:38px; width:772px; float:left;"></div> <div id="header4" style="background-color:#B5ADC2; height:38px; width:5%; float:left;"></div></div><div id="container-main" style="width:100%; height:515px; overflow:hidden; margin:0px; padding:0px;"><div id="navigation" style="background-color:#5E5E5E; height:515px; width:10%; float:left;"></div> <div id="content" style="background-color:#FFFFFF; height:515px; width:20%;float:left;"></div><div id="image" style="background-color:#CCCCCC; height:515px; width:772px; float:left;"></div> <div id="right" style="background-color:#5E5E5E; height:515px; width:5%; float:left;"></div></div><div id="container-strip" style="width:100%; height:10px; overflow:hidden; margin:0px; padding:0px;"><div id="strip1" style="background-color:#72657E; height:10px; width:10%; float:left;"></div> <div id="strip2" style="background-color:#B5ADC2; height:10px; width:20%; float:left;"></div> <div id="strip3" style="background-color:#ABA3AE; height:10px; width:772px; float:left;"></div> <div id="strip4" style="background-color:#B5ADC2; height:10px; width:5%; float:left;"></div></div><div id="container-footer" style="width:100%; height:auto; overflow:hidden; margin:0px; padding:0px;"><div id="footer1" style="background-color:#A59EAD; height;50px; width:10%; float:left;"></div> <div id="footer2" style="background-color:#CDC8D5; height;50px; width:20%; float:left;"></div> <div id="footer3" style="background-color:#BCB5BE; height;50px; width:772px; float:left;"></div> <div id="footer4" style="background-color:#CDC8D5; height;50px; width:5%; float:left;"></div></div></div></body></html> If you view that in a browser, you should be able to see the problem. I need the colors to repeat and expand to the edges of the browser. Ideally, this would be a liquid layout. The white box is the text content and the grey box is an image. The navigation on the left would have a range to expand, min and max. The white text box would have a larger range, but the photo box would be set. Expansion of the vertical spaces would be needed also. Top bar would expand and the strip directly below the content would expand also. The code I have above is the farthest I have gotten without the layout falling apart. As you can see from the layout, there are two areas of content, so once I have the BG functioning properly, the rest of the site should be a breeze. I havent been able to find a good tutorial about this type of layout. Thanks for any help!-Ryan

post-94531-0-53316400-1336507062_thumb.jpg

  • Like 1
Link to comment
Share on other sites

At what point did your code start acting up?

Link to comment
Share on other sites

where do your div id (container) ends?... and have you commented that out too?... i mean... if one thing is commented out, then the stop should also does that... else its too many stops :)..,.

Link to comment
Share on other sites

yes, I did have one commented out. I removed the extra stop. I guess the more basic question is how would you build this? From what i can tell, each of the background boxes should probably be, for the horizontal bands, 1px hight, width should be a percentage if i want it to be liquid/fluid, and the hight should repeat Y. But that didn't work. I am very new to CSS. Any suggested tutorials would be much appreciated!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...