PDA

Click to See Complete Forum and Search --> : nesting multiple <div>s inside a "center fixed" <div> ??

deltatango5
01-03-2008, 12:35 PM
I've been trying to find a "solution" that allows me to have a parent <div> (with a fixed position-centered) on a browser page, and have it contain multiple nested <div> tags.

I want to be able to do this so it works on both IE and FF, as well MAC. Through several attempts I've utilized a background-image--but don't believe that is compliant with "all" recent platforms, etc. I've also been able to place the nested <div> tags but then shove the parent div's image down ...

Does anyone have thoughts, links, suggestions or a quick example to toss my way?

Thanks Much and Happy New Year!

Des
TJ111
01-03-2008, 01:29 PM
Here's an example I wrote up in about 3 min for ya.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
width:100%;
}
#wrapper {
display:block;
width:750px;
margin:0 auto;
border:1px solid red;
background:white;
}
#banner {
width:100%;
height:50px;
}
#main_body {
width:100%;
height:500px;
}
#nav {
width:25%;
height:100%;
background:#FFFFD2;
float:left;
}
#nav ul {
margin:10px 0;
border-top:1px solid grey;
}
#nav li {
list-style-type: none;
display:block;
width:100%;
height:30px;
border-bottom:1px solid grey;
}
#content {
width:70%;
height:100%;
padding:15px;
border:1px solid black;
float:left;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="banner">
<h1>This is a website!</h1>
</div>

<div id="main_body">

<div id="nav">
<ul>
<li>You could make this a menu</li>
<li>Home</li>
<li>About</li>
</ul>
</div>


<div id="content">
<h2>Here's some content</h2>

<p>Here would be a paragraph</p>
</div>

</div>
</div>
</body>
</html>

I added some unneeded styles in there but it highlights each section for ya.
deltatango5
01-03-2008, 02:06 PM
Still having issues ... i tried to eliminate the navigation ... I wanted to put a "base layer" image and then place nested divs "ontop" (within the main div) ... still having issues. Thoughts?
TJ111
01-03-2008, 02:17 PM
What do you have?
deltatango5
01-03-2008, 02:39 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<style type="text/css"><!--
body {
background-color: #EEEEEE;
color:#564b47;
padding:20px;
margin:0px;
text-align: center;
}
#main {
display:block;
width: 804px;
height: 531px;
margin: 0 auto;
border: 1px solid red;
background: #FFFFFF;
}
#chamber1 {
background: YELLOW;
width: 100%;
height: 100%;
}
#c1 { z-index:10; position: relative; left: 0px; top: 0px; width: 804px; height: 531px; padding: 0px; border: 1px dotted BLACK; float: left; }
#c2 { z-index:20; position: relative; left: 20px; top: 20px; width: 100px; height: 100px; padding: 0px; border: 1px dotted RED; float: left; }
#c3 { z-index:30; position: relative; left: 40px; top: 40px; width: 100px; height: 100px; padding: 0px; border: 1px dotted GREEN; float: left; }

--></style>
</head>

<body>

<div id="main">

<div id="chamber1">
<div id="c1"><img src="images/bg-lft2.gif" alt="" width="804" height="531" border="0"/></div>
<div id="c2"><img src="images/invisi.gif" alt="" width="100" height="100" border="0"/></div>

</div>


</div>


</body>
</html>
Rajivgandhi
12-08-2009, 10:29 PM
How to use nested DIV inside PHP code?