|
|||||||||
|
|||||||||
| |||||||||
|
|
|
| |||||||||
 |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
Dev Shed Forums Sponsor:
|
|
|
|
#1
January 25th, 2004, 05:44 PM
|
|||
|
|||
|
CSS Layout Help Please
I am having a hard time grasping this and would really appreciate some help. I think if you look at this code, my problem is obvious. I want a layout with a nav column down the left side, a banner area, and a content area. I have played around with this for hours, tons of trial and error. I almost had it in IE, but in NS it looks like crap. Also, in the container <div> that someone kindly gave me, what is the -350px do? Here is my code, thanks so much.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <title>Full Height</title> <style type="text/css"> /*<![CDATA[*/ body { height: 100%; margin: 0; } #container { position: absolute; top: 0; left: 50%; margin-left: -350px; width: 700px; height: 100%; background-color: #fff; border: 1px solid red; background-image: url('images/keybg.jpg'); background-repeat: no-repeat; } #nav{ width:135px; position:absolute; background-color:#000; left:0px; height:100%; float:left; clear:right; top:0px; margin-top:0px; } #banner{ width:565px; position:absolute; background-color:#f00; left:135px; height:125px; float:right; } #content{ width:565px; position:absolute; margin-top:125px; background-color:#00f; left:0px; height:100%; float:right; clear:left; } /*]]>*/ </style> </head> <body> <div id="container"> <div id="nav"> </div> <div id="banner" </div> <div id="content"> </div> </div> </body> </html>
__________________
Today the world, tomorrow the universe...
|
|
#2
January 25th, 2004, 09:23 PM
|
||||
|
||||
|
When you I use position absolute, I avoid using the float property as it can create a conflict: Should it float, or should it be where you put it? Also, the order of your div's matter because it determines the z order, for instance your nav bar is there, but it is actually covered by your container area (due to the left: 0px;). Negative margins do not have any effect, either. In the html, you left a > off of one of your divs, BTW. I think this may be what you were looking for:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<title>Full Height</title>
<style type="text/css">
/*<![CDATA[*/
body {
height: 100%;
margin: 0;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 100%;
background-color: #fff;
border: 1px solid red;
background-image: url('images/keybg.jpg');
background-repeat: no-repeat;
}
#nav{
width:135px;
position:absolute;
background-color:#000;
left:0px;
height:100%;
top:0px;
}
#banner{
width:565px;
position:absolute;
background-color:#f00;
left:135px;
height:125px;
}
#content{
width:565px;
position:absolute;
background-color:#00f;
left:135px;
top: 125px;
height: 100%;
}
/*]]>*/
</style>
</head>
<body>
<div id="container">
<div id="nav">
</div>
<div id="banner">
</div>
<div id="content">
</div>
</div>
</body>
</html>
Please note that there is a small issue: The content area overflows the container because height: 100%; refers to 100% of the container's height, and then the top: 125px; moves it down. I am not too sure of how to make it take the remaining area unless you specify pixel sizes for the container and content areas... HTH
__________________
Obstruct the doors, cause delays, be dangerous.
|
|
#3
January 25th, 2004, 09:38 PM
|
|||
|
|||
|
Don't know if it really helps your issue or not, but
Code:
<div id="banner" Code:
<div id="banner"> While they can be confusing at first, you're on a path to a happier place. Check out these links for some simple tutorials that should get you where you want to go. http://www.google.com/search?q=Table-less+layout+CSS http://glish.com/css/ http://www.alistapart.com/articles/journey/
|
|
#4
January 25th, 2004, 11:41 PM
|
||||
|
||||
|
I believe that's some of my code you're basing everything on.
First, the -350px for the margin, is a centering hack for absolute positioned boxes in both IE and good browsers. left is set at 50%, then the left margin is set at − ½ the width to create a centered box. Second, I believe you need to expand your base knowledge about CSS positioning. I recommend the articles at /*PIE*/ for a clear explanation. cheers, gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing. Ask a better question, get a better answer.
|
|
#5
January 26th, 2004, 01:46 AM
|
|||
|
|||
|
Thanks all of you for your help, I have bookmarked the tutorials referenced. I played with the code above and noticed that when ever the div-content had any type of padding, margin or top applied, it would push it down below the nav div. I then thought I had it solved by nesting div in the content div and putting a top on that. That seemed to work until I filled that nested div with content, the result of which you will see here -
http://tmh.netdbs.com/turnkey/full_height1.htm Any further suggestions. I think it should be obvious as to my problem, the nav bar doesn't go 100% When you have a div in a parent block, such as this one - div container- whose height is set to 100%, why does it not "stretch" to accommodate something like my nested div content2? I am having hard time grasping this... Thanks again.
|
|
#6
January 26th, 2004, 01:53 PM
|
||||
|
||||
|
Please don't just bookmark the articles. Study them. They will explain and answer the questions you have.
In a nut-shell, absolutely positioned (AP) elements do not exist in the flow. They exist in the parent container only in terms of position relationships and relative sizing. AP elements cannot extend the parent element because they are not in the parent element. To illustrate, try this; Code:
<div style="position: relative; border: 1px solid black; padding: 5px;"> <div style="position: absolute; width: 45%; border: 1px solid blue;"> some<br />abslutely<br />positioned<br />text<br /> </div> <div style="margin-left:50%;"><p>some content</p></div> </div> <p><br /><br /><br /><br /><br /></p> <div style="position: relative; border: 1px solid black; padding: 5px;"> <p>some content</p> <p>some content</p> <p>some content</p> <p>some content</p> <p>some content</p> </div> See? the AP element does not push the parent container's lower edge. Play with this snippet, and RTFM gary
|
|
#7
January 26th, 2004, 02:13 PM
|
|||
|
|||
|
Thank you for your time, though I hate to ask what RTFM means. :-) I will study the links referenced
|
|
#9
January 26th, 2004, 02:41 PM
|
|||
|
|||
|
Such language, I'll tell ya. I have the O'Reily book by my side and am doing just that
|
|
#10
January 28th, 2004, 02:59 AM
|
|||
|
|||
|
not only did i btfm, I rtfm. Thanks so much for all our help, this is what I was looking for, hopefully someone will benefit from this post as I did.
http://tmh.netdbs.com/turnkey/default.htm
|
|
| Viewing: Dev Shed Forums > Web Design > CSS Help > CSS Layout Help Please |
| Thread Tools | Search this Thread |
| Display Modes | Rate This Thread |
|
|
 |
|
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
