Jump to content

RMarinJMZ

Members
  • Posts

    2
  • Joined

  • Last visited

RMarinJMZ's Achievements

Newbie

Newbie (1/7)

1

Reputation

  1. RMarinJMZ

    Layout help

    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!
  2. RMarinJMZ

    Layout help

    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
×
×
  • Create New...