DIV layer [Archive] - Lissa Explains it All: Web Design Forums

View Full Version : DIV layer

Rayna0607

02-03-2006, 08:19 AM

http://www.bluerobot.com/web/layouts/layout3.html

Hi! I would appreciate if someone can help me out with this. I want to add another div box under the one on the right side. I would like to know do I just add another div code under the one that's already on the right side or do I edit the .css file. I tried adding another set of div code under the code for the div layer on the right side but it didn't seem to work. Thanks!

HeLpM3

02-03-2006, 01:14 PM

<html>
<head>
<style type="text/css">

body {
color:#333;
background-color:white;
margin:20px;
padding:0px;
font:11px verdana, arial, helvetica, sans-serif;
}
h1 {
margin:0px 0px 15px 0px;
padding:0px;
font-size:28px;
font-weight:900;
color:#ccc;
}
h2 {
font:bold 12px/14px verdana, arial, helvetica, sans-serif;
margin:0px 0px 5px 0px;
padding:0px;
}
p {
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
.Content>p {margin:0px;}
.Content>p+p {text-indent:30px;}

a {
color:#09c;
font-size:11px;
font-family:verdana, arial, helvetica, sans-serif;
font-weight:600;
text-decoration:none;
}
a:link {color:#09c;}
a:visited {color:#07a;}
a:hover {background-color:#eee;}

/* All the content boxes belong to the content class. */
.content {
position:relative; /* Position is declared "relative" to gain control of stacking order (z-index). */
width:auto;
min-width:120px;
margin:0px 210px 20px 170px;
border:1px solid black;
background-color:white;
padding:10px;
z-index:3; /* This allows the content to overlap the right menu in narrow windows in good browsers. */
}

#navl {
position:absolute;
width:150px;
top:20px;
left:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:2;

voice-family: "\"}\"";
voice-family:inherit;
width:128px;
}

body>#navl {width:128px;}
/*1st right Menu */
#r1{
background-color:#eee;
border:5px dashed red;
width:168px;
padding:10px;

}

#r2{
background-color:#eee;
border:5px dashed green;
width:168px;
padding:10px;

}
#navr {
position:absolute;
width:190px;
top:20px;
right:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;

voice-family: "\"}\"";
voice-family:inherit;
width:168px;
}

body>#navr {width:168px;}
</style>
<title> My Very Own Page</title>
</head>
<body>
<div class="content">
<h1>Top Content</h1>
<p>Top Content here </p>
</div>

<div class="content">
<h2>Middle Content</h2>
<p>Here is your Middle Content :) </p>
</div>

<div class="content">
Here is your content @ bottom anything you want :)
</div>

<div id="navl">
<h2>Links</h2>
<p>
<a href="" title="">Link</a><br>
<a href="" title="">Link</a><br>
<a href="" title="">Link</a><br>
<a href="" title="">Link</a><br>
<a href="" title="">Link</a><br>
<a href="" title="">Link</a><br>
<a href="" title="">Link</a><br>
<a href="" title="">Link</a><br>
<a href="" title="">Link</a><br>
</p>
</div>

<div id="navr">

<div id="r1">
<h2>1st right menu Heading </h2>
<p>What ever you want on the first level </p>
</div>

<div id="r2">
<h2>2nd right menu Heading </h2>
<p>What ever you want on 2nd level </p>
</div>
</div>
</body>
</html>

you can try this doubt if this is what you wanted if you want the box to be separate like the content is just repley and i will try to get ya the codes peace :) :) :prince: :drool:

luvhartz

02-03-2006, 05:25 PM

try changing this

<div id="navBeta">

<h2>A Call To Action</h2>
<p>Much effort has been made to ensure that the layouts in the BlueRobot Layout Reservoir appear as intended in CSS2 compliant browsers. The content should be viewable, though unstyled, in other web browsers. If you encounter a problem that is not listed as a known issue, I am most likely not aware of it. <em>Please</em> <a href="mailto:rob@bluerobot.com?subject=Layout Reservoir" title="Email BlueRobot about a layout issue">email me</a> a heads-up. Your help will benefit the other five or six people who visit this site.</p>
</div>

And [from css vvvvv]

#navBeta {
position:absolute;
width:190px;
top:20px;
right:20px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;

To this:

<div style="position: absolute; top:20px; right:20px;">
<div id="navBeta">

<h2>A Call To Action</h2>
<p>Much effort has been made to ensure that the layouts in the BlueRobot Layout Reservoir appear as intended in CSS2 compliant browsers. The content should be viewable, though unstyled, in other web browsers. If you encounter a problem that is not listed as a known issue, I am most likely not aware of it. <em>Please</em> <a href="mailto:rob@bluerobot.com?subject=Layout Reservoir" title="Email BlueRobot about a layout issue">email me</a> a heads-up. Your help will benefit the other five or six people who visit this site.</p>
</div>
<div id="navBeta">Blah blah this is your other box... blaaah</div>
</div>

And to your CSS:
#navBeta {
width:190px;
border:1px dashed black;
background-color:#eee;
padding:10px;
z-index:1;

Goodluck!

Rayna0607

02-06-2006, 06:47 AM

thanks so much luvhartz...that worked!