...

View Full Version : AP Divs are moving and I want them static



blskny
05-25-2010, 08:57 PM
I am not understanding what I am not doing. The AP div in the right hand upper corner of the page moves as I open and close the browser window. Am not understanding what I am doing wrong here. Please advise.
Thanks so much
Barbara

LINK:
http://pdtest.com/Varda_Website_Main/APDiv_test.html

Excavator
05-26-2010, 01:53 AM
Hello Barbara,
For absolute positioning to work it must be relative to your document. The way you have it now it is relative to the browser window which is why it moves whent the browser does.

To fix that, move #apDiv1 into #header, make #header position: relative; and reposition your #apDiv1.

Like this -


<!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=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 100% "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: 0;
}
#container {
width: 800px;
margin: 0 auto;
background: #999;
overflow: auto;
font-size: 0.8em;
}
#header {
height: 173px;
width: 800px;
position: relative;
background: url(http://pdtest.com/Varda_Website_Main/images/header_new.jpg) no-repeat;
}
#apDiv1 {
height:128px;
width:377px;
position: absolute;
top: 5px;
right: 0;
z-index:1;
line-height: 128px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<div id="apDiv1">
<p>HERE IS THE COPY</p>
<!--end apDiv1--></div>
<!--end header--></div>
<!--end container--></div>
</body>
</html>

There is nothing really wrong with absolute positioning that element but it's also not really necessary. It could also be done by floating it.
Try it again with this different CSS -


#header {
height: 173px;
width: 800px;
background: url(http://pdtest.com/Varda_Website_Main/images/header_new.jpg) no-repeat;
}
#apDiv1 {
height:128px;
width:377px;
float: right;
margin: 5px 0 0 0;
line-height: 128px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #FFF;
}


(I just now found your post here in the open forum so replied here too...)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum