absolute positioning within div [Archive]

Click to See Complete Forum and Search --> : absolute positioning within div

esthera

07-20-2007, 07:46 AM

i have a div id of mainhome

now I want all the other divs of the page to be positioned according to that div

now i'm doing for example

.linkguest{
position: relative;
right: 31;
top: 218;
}

but this is not working -- i want it to be in that exact position relative to mainhome

what am I doing wrong?

WebJoel

07-20-2007, 09:21 AM

"position:relative;" remains in the document flow, -even when 'positioned' elsewhere, it is in fact, still in the normal place that it would reside even without having been positioned. It 'occupies invisible space' equal to itself...

A better way to do this is to make a main 'wrapper' that is fluid ("%") and of a defined height, make it "position:relative;" (with no 'left' or 'right' values, unless required for other reasons), and then inside this relative-DIV, position smaller "position:absolute;" DIVs.

"absolute" is 'out of the document flow', meaning that it does not touch/interfere with any other element on the page. This is handy for DIVs that need to be 'overlapped' (like a deck of playing cards), or need to 'move' (resize with variable-width 'relative' container, etc.).

Here is an example of what I mean: the 'container' is "relative" and the 'cards' are "absolute" (and positioned to be overlapping).. :<html>
<head>
<style type="text/css">
#container {position:relative; width: 500px; height:395px; border:1px solid #000; background:#000; }
.card1, .card2, .card3, .card4, .card5 {position: absolute; background:#454545; border:1px solid #fff; width:150px; padding:3px; height:250px; color:#fff;}
.card1 {margin:120px 0 0 20px;}
.card2 {margin:95px 85px;}
.card3 {margin:70px 170px;}
.card4 {margin:45px 245px;}
.card5 {margin:20px 330px;}
</style>
</head>
<body>

<div id="container">
<h2 style="position:absolute; left:20px; top:10px; color:white;">Container Box</h2>
<h2 style="position:absolute; right:20px; bottom:10px; color:white;">Container Box</h2>
<div class="card1">
first card </div>
<div class="card2">
second card </div>
<div class="card3">
third card </div>
<div class="card4">
fourth card </div>
<div class="card5">
fifth card </div>
</div>

</body>
</html>

esthera

07-20-2007, 09:34 AM

thanks -- i tried what you said but see the code below - - everything is staying at the top left and not in it's position. (all the positions should be relative to mainhome

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html>
<head>
<title>d</title>
<style>

/* CSS Document */

body{

padding:0px;

}
#outer{
margin:auto;
width:750px;
}
#mainhome{
font-family: Arial, Helvetica, sans-serif;
background-image: url(images/home_page_background.jpg);
background-repeat: no-repeat;
background-position: right top;
width:750px;
height:1082px;
position:relative;

}
.linkguest{
position: relative;
right: 31;
top: 218;
}

.linkdonor{
position: absolute;
right: 31;
top: 319;
}
.linkparent{
position: absolute;
right: 31;
top: 426;
}

.linkcaregiver{
position: absolute;
right: 31;
top: 526;
}

#news{
position: absolute;
right: 151;
top: 319;
}
#news img{
float:right;
}
#newstb{
background:#ffffff;
width:472px;
height:249px;
overflow: auto;
position: absolute;
scrollbar-base-color:#FDC6CC;
text-align:right;
float:right;
}

</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

</head>

<body>
<div id=outer>
<div id=mainhome>
<div class=linkguest><img src="images/guest.gif" alt="Guest" width="103" height="101" border="0"></div>
<div class=linkdonor><img src="images/donor.gif" alt="Guest" width="106" height="109" border="0"></div>
<div class=linkparent><img src="images/parent.gif" alt="Guest" width="106" height="104" border="0"></div>
<div class=linkcaregiver><img src="images/caregiver.gif" alt="Guest" width="99" height="103" border="0"></div>
<div id=news> <img src="images/news.gif" width="229" height="37" border="0"><br>
<div id=newstb> this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
this is dummy text <bR>
will be pulling form the db<br>
</div>
</div>
</div>
</div>
</body>
</html>

WebJoel

07-20-2007, 12:34 PM

I really have no idea what you are after here. I don't understand the need for an 'outer' and an 'inner' DIV, so I changed a few things and have this to show you. The need for 'positioning' here is really not warranted. The same thing can be achieved with 'centering' and 'margins'. And, a complete !doctype that includes the URL to referance it (absolutely required to keep IE from messing-up).<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>d</title>

<style type="text/css">
/* CSS Document */
* { padding:0px; margin:0; }
p {margin:14px 0 10px 0;}
#outer{ position:relative; margin:auto; width:750px;}
#mainhome{ position:relative; font-family: Arial, Helvetica, sans-serif; background-image: url(images/home_page_background.jpg); background-repeat: no-repeat; background-position: right top; width:750px; height:1082px; border:1px solid gray;}
.linkguest {float:right;}
.linkdonor {clear:right; float:right;}
.linkparent {clear:right;float:right;}
.linkcaregiver {clear:right;float:right}
#news {width:230px; margin:75px auto 0 auto; border:1px solid silver;}
#news p {margin:0;}
#news p img {width:230px; margin:0 auto;}

#newstb{ background:#ffffff; width:472px; height:249px; overflow: auto; position: relative; scrollbar-base-color:#FDC6CC; text-align:right; border:3px double silver; margin:0 auto; padding:25px 15px; }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="outer">
<div id="mainhome">
<div class="linkguest">
<img src="images/guest.gif" alt="Guest" width="103" height="101" border="0" />
</div>

<div class="linkdonor">
<img src="images/donor.gif" alt="Guest" width="106" height="109" border="0" />
</div>

<div class="linkparent">
<img src="images/parent.gif" alt="Guest" width="106" height="104" border="0" />
</div>

<div class="linkcaregiver">
<img src="images/caregiver.gif" alt="Guest" width="99" height="103" border="0" />
</div>

<div id="news">
<p><img alt="image over news content scrolling" src="images/news.gif" width="229" height="37" border="0" /></p>
</div>

<div id="newstb">

<h1 title="First-Level Header">First-Level Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit
risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu,
pulvinar et, volutpat vel, elit. <img alt="pic-1" src="#" style=
"width:60px; height:75px; border:1px solid black; margin:8px; float:left;" />
<img alt="pic-2" src="#" style=
"width:60px; height:75px; border:1px solid black; margin:8px; float:right;" />
Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero
fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus
pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada
fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc
purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui.
Nulla accumsan turpis at erat.</p>
<h1 title="Second-Level Header">Second-Level Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam
tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien
pulvinar purus, vel hendrerit ipsum tellus at ante.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi
lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros. Etiam
tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien
pulvinar purus, vel hendrerit ipsum tellus at ante.</p>

</div>
</div>
</div>

</body>
</html> This will look the same for IE and Fx.

esthera

07-21-2007, 02:39 PM

well in your example everything is in the wrong place

i thought that the best way to position things was with positioning?
would it be better to just leave it as you have it floating and adding margins to the top and side to get it where I want?