SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Cant tame my logo with absolute positioning :-)



    Hi From freezing from cold York UK...

    I cant get my absolute positioned logo to sit at the end of my footer as illustrated by the above screenshot.

    Now before I posted this I went back to a css tutorial which explained that when you use absolute postioning you need to mahe sure you follow the document tree up so to speak and make sure theres a relative positioned element next up else it with hang off the view posrt which the logo is doing on this page:

    http://www.davidclick.com

    But I thought by adding a relative oposition in the #aside of the css it would position the where i want it.

    I know i could have floated it but I just want to see if i can do this skill of absolute positioning as i know it will come in useful.

    So my question is please... "How do i get the davidclick logo to stick to the right of the footer using absolute positioning please"

    Any insights welcome :-)
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As you said it your self, the AP is relative to the "nearest" parent that has RP.

    Code:
    #footer_venue {
        background: none repeat scroll 0 0 #CC3333;
        clear: both;
        height: 1%;
        padding: 0;
        text-align: left;
        position: relative;
    }
    Parent in the sense that it contains the absolute positioned element, no matter on what level of the inclusion tree that happens. <div> asside is not a parent to your logo <div>, neither is one to footer_venue <div>.

    If footer_venue <div> was contained in <div> asside, it would work putting the RP to <div> asside, like you did. But that would ruin your layout, and set the top and left absolute positions relative to <div> asside box model

    In short, you have to position a parent element if you want it to contain its absolute positioned child elements, much like you need to "declare" a height for a element, by establishing a new BFC (overflow:auto/hidden), if you want it to containts its floated child elements.

  3. #3
    SitePoint Guru Zygoma's Avatar
    Join Date
    May 2006
    Location
    York, Uk
    Posts
    916
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    As you said it your self, the AP is relative to the "nearest" parent that has RP.

    Code:
    #footer_venue {
        background: none repeat scroll 0 0 #CC3333;
        clear: both;
        height: 1%;
        padding: 0;
        text-align: left;
        position: relative;
    }
    Parent in the sense that it contains the absolute positioned element, no matter on what level of the inclusion tree that happens. <div> asside is not a parent to your logo <div>, neither is one to footer_venue <div>.

    If footer_venue <div> was contained in <div> asside, it would work putting the RP to <div> asside, like you did. But that would ruin your layout, and set the top and left absolute positions relative to <div> asside box model

    In short, you have to position a parent element if you want it to contain its absolute positioned child elements, much like you need to "declare" a height for a element, by establishing a new BFC (overflow:auto/hidden), if you want it to containts its floated child elements.
    Thank you so much :-) You fixed it!
    I have had a perfectly wonderful
    evening, but this wasn't it-
    Julius "GROUCHO" Marx - 1890-1977
    http://www.davidclick.com

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    4727′35″N 2618′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Glad to help


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
  •