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 5 of 5
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    92
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Absolute Positioning inside of a DIV

    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:
    Code:
    <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:
    Code:
    #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.

  • #2
    Senior Coder jcdevelopment's Avatar
    Join Date
    Oct 2007
    Location
    Cowboy Nation
    Posts
    2,182
    Thanks
    174
    Thanked 257 Times in 257 Posts
    Can you take the image in the header and load it in the id, like so:

    Code:
    #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...

  • #3
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    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.

  • #4
    Regular Coder
    Join Date
    Jan 2008
    Location
    Willow Grove, PA
    Posts
    169
    Thanks
    1
    Thanked 27 Times in 27 Posts
    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.
    Code:
    #body {
    	background-color: #CCFFCC;
    }
    
    #header {
    	background-color: #FFCCCC;
    }
    
    #links {
    	background-color: #CCCCFF;
    }

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    92
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by jcdevelopment View Post
    Can you take the image in the header and load it in the id, like so:

    Code:
    #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.


  •  

    Posting Permissions

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