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 10 of 10
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Unhappy Absolutely positioning a Div within another Div...

    Hi,

    Apologies if I seem like a simpleton - I'm new to this. I've created a page where I've tried to absolutely position a div within the centered container of the page. It doesn't seem to be working - when I change the browser window size, the AP DIV stays where it is, whereas the rest responds correctly.

    The link is www.norwichbodyartfestival.co.uk/venue.html

    As you'll prob be able to see, I would like the scroll box to sit on top of the 'Venue' column.

    My coding is this...

    <style type="text/css">
    <!--
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #000000;
    margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #000000;
    }
    .oneColElsCtr #container {
    width: 800px;
    height: 600px;
    background: #000000;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */
    }
    .oneColElsCtr #mainContent {
    padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
    }
    #header {
    width: 800px;
    height: 531px;
    background: #000000;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */

    }

    #nav {
    width: 800px;
    height: 69px;
    background: #000000;
    margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    border: 1px solid #000000;
    text-align: left; /* this overrides the text-align: center on the body element. */

    }
    #Layer1 {
    position:absolute;
    left:510px;
    top:98px;
    width:310px;
    height:366px;
    z-index:1;
    overflow: scroll;
    }
    .style1 {font-size: 10px}

    -->
    </style>
    <script type="text/JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>

    <body onload="MM_preloadImages('navhome_over.jpg','navabout_over.jpg','navvenue_over.jpg','navtickets_over .jpg','navcontact_over.jpg','navink_out.jpg')">
    <div class="style1" id="Layer1">
    <p><img src="standrewshall.jpg" width="295" height="188" align="middle" /></p>
    <p align="left">Lorem ipsum ...</p>
    </div>
    <div id="container">
    <div id="header"><img src="nbafvenue.jpg" alt="Venue" width="800" height="531" /></div>
    <div class="oneColElsCtr" id="nav"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navhome','','navhome_over.jpg',1)"><img src="navhome_out.jpg" alt="Home" name="navhome" width="127" height="69" border="0" id="navhome" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navabout','','navabout_over.jpg',1)"><img src="navabout_out.jpg" alt="About" name="navabout" width="128" height="69" border="0" id="navabout" /></a><a href="venue.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Venue','','navvenue_over.jpg',1)"><img src="navvenue_out.jpg" alt="Venue" name="Venue" width="123" height="69" border="0" id="Venue" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navtickets','','navtickets_over.jpg',1)"><img src="navtickets_out.jpg" alt="Tickets" name="navtickets" width="155" height="69" border="0" id="navtickets" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','navcontact_over.jpg',1)"><img src="navcontact_out.jpg" alt="Contact" name="Contact" width="147" height="69" border="0" id="Contact" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navink','','navink_out.jpg',1)"><img src="navink_over.jpg" alt="Ink Virgins" name="navink" width="120" height="69" border="0" id="navink" /></a></div>
    </body>
    </html>

    Any help would be greatly appreciated.

    Thanks...

  • #2
    Regular Coder BoldUlysses's Avatar
    Join Date
    Jan 2008
    Location
    Winston-Salem, NC
    Posts
    938
    Thanks
    10
    Thanked 190 Times in 187 Posts
    The best way I've found to understand absolute positioning is that position:relative looks "downstream" to child elements and position:absolute looks "upstream" to parent elements. That is, when you tell an HTML element to be absolutely positioned, it's going to look "up" to its parent elements until it finds one that is set to position:relative, and will position itself based on that. If it doesn't find one, it will position itself with respect to the <body> by default.

    That said, if you want the element to position itself with respect to the container, you'll need to set the container to position:relative:

    Code:
    #container {
    	position:relative;
    	width: 800px;
    	height: 600px;
    	background: #000000;
    	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
    	border: 1px solid #000000;
    	text-align: left; /* this overrides the text-align: center on the body element. */
    }
    And then nest your HTML properly so your absolutely positioned element (#Layer1) is a child of #container:

    Code:
    <div id="container">
    
    	<div class="style1" id="Layer1">
    		<p><img src="standrewshall.jpg" width="295" height="188" align="middle" /></p>
    		<p align="left">Lorem ipsum ...</p>
    	</div>
    
    	<div id="header"><img src="nbafvenue.jpg" alt="Venue" width="800" height="531" /></div>
    	<div class="oneColElsCtr" id="nav"><a href="home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navhome','','navhome_over.jpg',1)"><img src="navhome_out.jpg" alt="Home" name="navhome" width="127" height="69" border="0" id="navhome" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navabout','','navabout_over.jpg',1)"><img src="navabout_out.jpg" alt="About" name="navabout" width="128" height="69" border="0" id="navabout" /></a><a href="venue.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Venue','','navvenue_over.jpg',1)"><img src="navvenue_out.jpg" alt="Venue" name="Venue" width="123" height="69" border="0" id="Venue" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navtickets','','navtickets_over.jpg',1)"><img src="navtickets_out.jpg" alt="Tickets" name="navtickets" width="155" height="69" border="0" id="navtickets" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','navcontact_over.jpg',1)"><img src="navcontact_out.jpg" alt="Contact" name="Contact" width="147" height="69" border="0" id="Contact" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('navink','','navink_out.jpg',1)"><img src="navink_over.jpg" alt="Ink Virgins" name="navink" width="120" height="69" border="0" id="navink" /></a></div>
    </div>
    Does that help?
    matt | design | blog

  • Users who have thanked BoldUlysses for this post:

    emu_robot (01-08-2009)

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Code:
    <div id="header"><img src="nbafvenue.jpg" alt="Venue" width="800" height="531" /></div>
    I think the above portion also need to be altered. ie you'd need to remove that img tag(and why that #header there?) and then apply that image as the background of #container.
    Last edited by abduraooft; 01-08-2009 at 02:42 PM.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    msuffern has it right. What you have is something positioned to 510px left by 98px down on the entire window. Make the window 500px wide and it is gone entirely. Absolute is positioned to its container (window) or a relative <div>. If you positioned it to the relative div, it would still be 510X98 of that div whereever it moved.

    I suspect you want it centered?
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • Users who have thanked jerry62704 for this post:

    emu_robot (01-08-2009)

  • #5
    New Coder
    Join Date
    Jan 2009
    Posts
    15
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Thankyou so much MSUFFERN, and for the other replies. That worked a treat - not only that, but you actually explained it too (hopefully I've learnt something!)

    Thanks again.

    Emma x

  • #6
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm having this problem as well and the parent div IS positioned relatively. I'm pulling my hair out trying to figure out what's wrong. It's probably something stupid and I would love someone's help. I bolded what I thought was pertinent:

    body {
    width: 900;
    }

    #contentbody {
    text-align: center;
    position: relative;
    }

    #menu {
    position: absolute;
    width: 130px;
    height: 400px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: right;
    }

    .submenutitle {
    font-size: 13px;
    font-weight: bold;
    text-decoration: underline;
    }


    .submenu, .submenu a {
    text-decoration: none;
    list-style-type: none;
    color: #666666;
    font-size: 11px;
    }


    #contentnavbar {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 15px;
    }

    .bar {
    margin: 0 0 46px 0;
    border: 0 0 0 0;
    display: inline;
    border-width: 0;
    padding: 0;
    text-align: center;
    }

    .center {
    text-align: center;
    }

    #navbar {
    width: 638px;
    height: 150px;
    text-align: center;
    margin-left: auto;
    margin-right:auto;
    }

    <!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" lang="en" xml:lang="en" >

    <head>
    <META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <meta name="description" content="MM "></meta>
    <meta name="keywords" content="MM "></meta>

    <title>Vitam Vas! Maminka Mila</title>

    <link type="text/css" rel="stylesheet" href="maminka.css" />

    </head>


    <body>
    <?php
    include ('MMHeader.php');
    ?>

    <div id="contentbody">

    <div id="menu">
    <ul class="submenu">
    <li class="submenutitle">Maminka Mila</li>
    <li><a href="dortky">Dorty</a></li>
    <li><a href="dortky">Dorty</a></li>
    </ul>
    </div>

    <img src="images/sladkosti(3).png" />
    </div>

    </body>
    </html>

    A lot of the CSS is not pertinent (and messy) but I wanted to post it just in case. Thank you for any and all help in advance!

  • #7
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,863
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    #menu {
    position: absolute;
    width: 130px;
    height: 400px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: right;
    }
    Don't you need to apply top/bottom and left/right properties to position your menu? Can we have a link?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #8
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did have it in there but just removed it because I figured it didn't matter to the issue because it won't stay in the parent div.

    The link is
    www.maminkamila.cz/sladkosti.php

    Thank you for your help. Any help you can provide would be really appreciated!

  • #9
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got it to work for IE but it's not working for Safari. Can you help me figure that out?

  • #10
    Senior Coder
    Join Date
    Oct 2005
    Posts
    1,340
    Thanks
    0
    Thanked 61 Times in 60 Posts
    You don't have units specified in your widthL 900. Do you mean px?


  •  

    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
    •