...

View Full Version : Absolute Positioning inside of a DIV



Styles2304
01-04-2008, 07:45 PM
Ok, bear with me while I try to put this into words . . .

I'm trying to have my header (div1) contain a picture (picture) and a set of links (div2). Every tutorial I've read said that you should be able to move div2 around inside of div1 using absolute positioning as long as div2 is encased in the div1 div tags (<div> </div>). However, when I designate div2 as position: absolute; it sets it's position on the entire page instead of just inside div1. If I use position: relative; then I'm not able to move the text and links over the picture.

Hopefully I did ok explaining that.

Here's what I've got on the webpage so far:


<html>
<head>
<title>New Covenant Fellowship</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<LINK REL=StyleSheet HREF="style.css" TYPE="text/css">
<link rel="SHORTCUT ICON" href="/favicon.ico">

<script src="dynamiciframe.js">
</script>
<script src="linkframe.js">
</script>

</head>

<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="body">

<div id="header">

<img src="images/header.jpg">

<div id="links">
this is a test
</div>

</div>

</div>

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


And then for the style sheet:


#body {
position: absolute;
width: 100%;
min-width: 763px;
text-align: center;
z-index: 1;
border: 1px #000000 solid
}

#header {
margin: 0 auto;
width: 763px;
height: 122px;
z-index: 2;
border: 1px #000000 solid;
}

#links {
position: absolute;
top: 0px;
left: 0px;
width: 620;
text-align: right;
padding-left: 10px;
padding-right: 10px;
z-index: 3;
border: 1px #000000 solid;
}


Any ideas? Also, It doesn't seem that I'm able to get z-index to work properly . . . which is completely necessary to make the drop menus work.

jcdevelopment
01-04-2008, 07:52 PM
Can you take the image in the header and load it in the id, like so:




#header {
margin: 0 auto;
width: 763px;
height: 122px;
z-index: 2;
background-image:url(images/header.jpg);
background-position:top left;
border: 1px #000000 solid;
}




Then use margin-left and top to move your links, that could work i imagine...

sobrien79
01-04-2008, 07:59 PM
When you give an element position, it goes up the ancestor chain until it finds the first element with position. That being said, add position: relative; to #header. That should give you the effect you want.

Also, make sure you add px to your width declarations.

sobrien79
01-04-2008, 08:01 PM
Also, when I am debugging, sometimes it's better to use background-color to see where your divs are. This will help with seeing the stacking order too.

Add these and you'll be able to see it better.


#body {
background-color: #CCFFCC;
}

#header {
background-color: #FFCCCC;
}

#links {
background-color: #CCCCFF;
}

Styles2304
01-04-2008, 08:17 PM
Can you take the image in the header and load it in the id, like so:




#header {
margin: 0 auto;
width: 763px;
height: 122px;
z-index: 2;
background-image:url(images/header.jpg);
background-position:top left;
border: 1px #000000 solid;
}




Then use margin-left and top to move your links, that could work i imagine...

Yeah and I had done that for awhile but it was only a temporary fix . . . there are things I need it for later.

Thank you sobrien, that did the trick! Man that was a headache and good thinking with the colors . . . thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum