Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Nov 2009
    Location
    Florida
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    AP Divs are moving and I want them static

    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

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 -
    Code:
    <!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 -
    Code:
    #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...)
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •