SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Please help me with position:absolute for my Logo

    Admittedly I have not used absolute positioning that much.

    Not quite sure what I am doing wrong here. Check the link below. The logo is in maroon. What am I doing wrong with my css?

    http://baseboardbuddy.com/

    Thanks!

  2. #2
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, that was confusing. The problem is that your logo is saved at an enormous resolution.

    1,500px × 860px .png

    this image should be cropped as tight as you can get on it. After you do that, re-upload the image. Remove your absolutely positioning and the logo may fall pretty close to where you want it. If you want to move it use position:relative; in this case.

  3. #3
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    holy crap how did i do that lol.. amateur mistake

    Okay I changes it to relative and it bumped everything around a bit... What did I do wrong here?

  4. #4
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    EDIT: almost have it in the right position.. but now it has bumped down the image of the beer beneath it?

  5. #5
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're almost there!!!

    Give #headerimg position:relative;

    Then give img.logo position:absolute;

  6. #6
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    absolutely positioned elements are positioned in relation to the browser window.

    UNLESS.... they are contained inside a relatively positioned element. Then they are absolutely positioned in relation to the container that is relatively positioned.

    <div style="position:relative">
    <img src="###" style="position:absolute;top:3px;left:400px;" />
    </div>

  7. #7
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    woot!

    got it.. thanks rusty!

    So the parent element for an absolute element has to be position:relative?

  8. #8
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oops sorry posted that before you posted that last one.. thanks again rusty!

  9. #9
    SitePoint Evangelist
    Join Date
    Sep 2006
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No prob. I'll pm you my address to ship some of that fine looking brew!!!

    Site's looking good btw, the client should be pleased!

  10. #10
    SitePoint Addict
    Join Date
    Jul 2009
    Posts
    352
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the compliment! Design is my bag, still trying to master css

    If you live anywhere near boardman ohio there is a huge beerfest coming up soon.. sorry for the off topic but here is the site I just finished for the same guy

    www.bigtapin.com


Tags for this Thread

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
  •