SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)

    Layer positioning

    Okay, is it possible to use "absolute" position for a layer but that absoluteness is relative to it's parent layer? Here's a sort of example
    HTML Code:
    <div id="parent" style="blah blah...">
        <div id="child" style="position: absolute; top: 5px; left: 5px;">
            Text stuff
        </div>
    </div>
    So with that example, the child layer's top-left corner would be 5px lower and 5px to the left of the parent layer's top-left corner. Get me?

    I want to do this so I can align layers so I can put links over the attached image, the red shaded part will be div.linkbar1 and the green shaded bit will be div.linkbar2.

    Any ideas?

    Thanks

  2. #2
    SitePoint Guru bronze trophy blufive's Avatar
    Join Date
    Mar 2002
    Location
    Manchester, UK
    Posts
    853
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why not just put 5px of padding into the outer div?
    HTML Code:
    <div id="parent" style="padding-left: 5px; padding-top: 5px; blah blah...">
      <div id="child">
        Text stuff
      </div>
    </div>
    Alternatively, use margins on the inner div:
    HTML Code:
    <div id="parent" style="blah blah...">
      <div id="child" style="margin-left: 5px; margin-top: 5px;">
        Text stuff
      </div>
    </div>

  3. #3
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Nice! OK, if I do that, can I have two layers inside the parent layer using margins to position themselves without effecting each other?

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    [quote]
    Nice! OK, if I do that, can I have two layers inside the parent layer using margins to position themselves without effecting each other?
    [quote]

    The margins of course will refer to the preceding element in the natural flow. i.e the first element will be placed from its parent, the second element will have its margin in respect of the first element (and so on).

    If you want to place 2 elements in a container and have the margins (positioning) relative to the parent container then you will have to place them absolutely. Obviously this means that you have to take care that the elements don't overlap as they will be removed from the natural flow.

    To place an element absolutely in relation to its parent you just have to ensure that the parent has a value set for the property positon other than static (default).

    What this means is that you can set the parent to position relative (no co-ordinates are needed if you don't want to affect the layout). Now any elements within the parent that are placed absolutely will be placed in relation to the top left corner of the parent element.

    Hope that all makes sense.

    Paul

  5. #5
    ********* Wizard silver trophy Cam's Avatar
    Join Date
    Aug 2002
    Location
    Burpengary, Australia
    Posts
    4,495
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Yeah, it makes sense and it's exactly what I asked for, thanks

    However I have it working with this code
    Code:
    div.header {
    	width: 764px;
    	height: 135px;
    	max-width: inherit;
    	
    	background: #06C url(Header.png) no-repeat center;
    	
    	clear: both;
    }
    
    div.linkbar1 {
    	height: 16px;
    	
    	text-align: center;
    
    	padding-top: 101px;
    	padding-left: 188px;
    	padding-right: 2px;
    }
    
    div.linkbar2 {
    	height: 16px;
    	
    	text-align: center;
    	
    	padding-top: 1px;
    	padding-left: 188px;
    	padding-right: 2px;
    }
    linkbar1 and linkbar2 are within header so yeah, works a treat

    Thanks all
    Edit:


    Also, can I use a short hand property or some inheritance for my linkbars because the CSS is the same except for one property

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    You could do something like this:
    Code:
    div.linkbar1,div.linkbar2 {
     height: 16px;
     text-align: center;
     padding-top: 101px;
     padding-left: 188px;
     padding-right: 2px;
    }
    div.linkbar2 {
     padding-top: 1px;
    }
    Paul



Bookmarks

Posting Permissions

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