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 to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Difficult CSS positioning

    I've attached a link to the mock up of the page I'm trying to make. I currently have everything working properly except for a big arrow image that overlays multiple divs. I'm trying to find the best way to put it where it goes, but honestly don't know where to start.
    I've attached an image of what it is supposed to look like and below is a link of what it looks like now. Right now I just have it absolutely positioned, but obviously that doesn't work with any variation in window size.

    any tips would be much appreciated! Thanks!

    What it looks like: bradnelsoninc.com/test/layout.html
    What it's supposed to look like: bradnelsoninc.com/test/mockup.png

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello bradix14,
    Look what position: relative; can do for you -
    Code:
    #wrapper {
        margin: 0 auto;
        position: relative;
        width: 980px;
    }
    Adjust your top/left positioning to suit.

    CSS positioning in 10 easy steps here.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, thanks. That did it. It worked, but I'm wondering why adding position:relative to the parent element changes the way the child is positioned?

    especially when the child is position: absolute.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by bradix14 View Post
    Hey, thanks. That did it. It worked, but I'm wondering why adding position:relative to the parent element changes the way the child is positioned?

    especially when the child is position: absolute.
    Your #wrapper is centered with left/right margins set to auto. If you make an ap element relative to the body of the document, like you had, it doesn't move because the body of the document looks just like the viewport of the browser. In other words, #wrapper can move away from it.

    By making #wrapper the relative element, the ap element stays where it's supposed to.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you. Way appreciate the help. Someday I'll be smart enough to help someone with this stuff!


  •  

    Posting Permissions

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