Trouble with layout with DIV's

T

TomVDJ

New Member
Hello, I'm new here, and also new in making web layouts with div's (always used tables before). I'm trying to create this layout with divs:

1. The width of the site content (= width of top banner) is fixed (900 px). The empty spaces left and right each take up 50% of the space.
2. The top banner has a fixed height (100 px).
3. The menu has a fixed width (150 px) but height resizes with the browser.
4. The illustration fields have fixed height (20 px) and fixed width (750 px).
5. The content part would have to be a div that resizes with the browser, with inside this div an iframe that also resizes (in height) with the browser, so that the scrollbar (when needed) appears at the content. I was planning to create the space between the content div (with background image) and Iframe with padding.

This illustration in attachment should clarify my explanation.

I'm really having trouble achieving this layout with divs. Can someone help me out here?
 

Attachments

  • layout.gif
    layout.gif
    3.9 KB · Views: 73
anna

anna

New Member
I don't know anything about iframes, except to stay away from them whenever possible. I could be wrong, but would percentages work?
 
T

TomVDJ

New Member
This is my start:

Code: 
<html>
<head>
<title>Test</title>

<style type="text/css">
body {
margin:0;
padding:0;
height:100%;
text-align:center;
}

#wrapper {
padding:0;
width:900px;
height:100%;
background:#eeeeee;
}

#header {
background:#dddddd;
height:100px;
}

#menu {
float:left;
width:150px;
height:100%;
background:#cccccc;
}

#illustrationtop {
background:#bbbbbb;
float: right;
width:750px;
height:20px;
}

#illustrationbottom {
background:#aaaaaa;
float: right;
width:750px;
height:20px;
}

#content {
background:#999999;
float: right;
width:750px;
height:100%;
}


</style>

</head>

<body>
<div id="wrapper">
  <div id="header"></div>
  <div id="menu"></div>
  <div id="illustrationtop"></div>
  <div id="content">
    <iframe src="blah.html" width="100%" height="100%">
  </div>
  <div id="illustrationbottom"></div>
</div>
</body>
</html>

Biggest problem I have is the content part. The 100% is not "100% of the remaining space", but just "100% of the browser space", resulting in scrollbars I don't want. Also the bottom illustration part is not showing (overlapped by the content part?)

Additional question: is the centering of the wrapper div done properly, or should I use another technique instead of a text-aling in de body?

If Iframe is not the way to go, what can i use instead? I'd like to have one "frame" page and if a link in the menu is clicked, that another page is send to the Iframe. So that's the reason I choose this. But if there's a better way, please let me know. Thanks in advance for all the help.
 
P

Pheno

New Member
You're along the right lines with the css, but I would seriously reconsider using Iframes. Can't you just reload the menu with each page? That's the normal way of doing things.

Iframes will cause you lots of pain, because there's no robust way of making the wrapper page adjust to fit the iframe. This is why you're getting the scrollbars.
 
T

TomVDJ

New Member
So you mean to have the menu on eacht page? Isn't this harder to maintain? I'd rather have the menu on one place.

And when i don't use IFrame, is it possible to have a scrollbar at the content part, instead of at browser level?
 
P

Pheno

New Member
If you're planning on having a multipage website, the best thing would be to learn some very basic php. This will allow you to have a single file storing the menu code which is then called from every page. Here's a link which may be useful:

http://www.donutey.com/buildwebsite.php

Yes you can have a scroller inside the content. You just use css something like:
div {
overflow: auto;
height: 500px;
}
 
T

TomVDJ

New Member
I tried a new approach where I will integrate the layout graphs in the divs. This is what I have now:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style type="text/css">
html,body {
  margin:0;
  padding:0;
  height:100%;
  background:#ffffff;
  text-align:center;
}
div#wrapper{
  background:#eeeeee;
  width:900px;
  height:auto !important;
  height:100%; /* IE6: treaded as min-height */
  min-height:100%;
  margin:0 auto;
}
div#header{
  float:top;
  background:#bbbbbb;
  width:900px;
  height:100px;
  margin:0 auto;
}
div#menu{
  display: inline; /* Workaround IE6 floating-margin bug */
  float:left;
  background:#dddddd;
  width:200px;
}
div#topillustration{
  display: inline; /* Workaround IE6 floating-margin bug */
  background:#aaaaaa;
  float:right;
  width:700px;
  height:20px;
}
div#content{
  display: inline; /* Workaround IE6 floating-margin bug */
  background:#cccccc;
  float:right;
  width:660px;
  min-height:100%;
  padding:10px;
  text-align: justify;
  margin: 0px 10px;
}
div#bottomillustration{
  display: inline; /* Workaround IE6 floating-margin bug */
  background:#aaaaaa;
  float:right;
  width:700px;
  height:20px;
}

</style>
</head>
<body>
  <div id="wrapper">
    <div id="header"></div>
    <div id="menu">test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test</div>
    <div id="topillustration"></div>
    <div id="content">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
    <div id="bottomillustration"></div>
</div>
</body>
</html>

Problem here is that the background (wrapper) is not stretched in firefox when the screen is sized down in height and a scrollbar appears: when you scroll to the bottom of the page, you see that the wrapper stops before the content stops. What can I do about that?
 
ronaldroe

ronaldroe

Super Moderator
Staff member
It's hard to help when we can't see what's going on. Post a link.

As for the IFrame, Phreno was spot on. I know nothing about PHP, except how to use includes. They are a huge time saver. You write the menu code once, and just put a little line of code in place to call it. Same with header, footer or any other elements that are the same on every page. Then, if you have to make a change, you only have to do it once.

Also, be careful about scrolling content within the page. Touch devices have a hard time with it.
 
P

Pheno

New Member
TomVDJ said:
Problem here is that the background (wrapper) is not stretched in firefox when the screen is sized down in height and a scrollbar appears: when you scroll to the bottom of the page, you see that the wrapper stops before the content stops. What can I do about that?
Click to expand...

I tried it in FF4 and IE9 and it looks identical to me, even when I resized the page. It's starting to look good.
 
You must log in or register to reply here.
Top