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 13 of 13
  1. #1
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts

    No understanding z-index . . .

    I have a page here;

    http://chieftainclothing.com/mockup/index.html

    I want to place the image "Chieftian" image on top the bar image. I've added the z-index to the class .photo, but it doesn't seem to work.

    Any suggestions?

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    z-index only works on elements that have been positioned using css positioning. Does .photo have a position: style in the css?

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    All the Z-index tells the browser is which layer to place on top if two layers overlap. It will not magically place a layer where you want it on the layout.

    You still have to position it correctly, then add the z-index to the layers in the order of priority.
    Last edited by kwdamp; 07-11-2011 at 11:35 PM. Reason: spelling

  • #4
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by bullant View Post
    z-index only works on elements that have been positioned using css positioning. Does .photo have a position: style in the css?
    Yes, here's what I have;

    .photo {
    position: relative;
    float: left;
    padding: 0px;
    margin-top: -165px;
    z-index: 1;
    }

  • #5
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by kwdamp View Post
    All the Z-index tells the browser is which layer to place on top if two layers overlap. It will not magically place a layer where you want it on the layout.

    You still have to position it correctly, then add the z-index to the layers in the order of priority.
    Yes, I am aware of that.

  • #6
    New Coder
    Join Date
    Jun 2011
    Posts
    46
    Thanks
    1
    Thanked 2 Times in 2 Posts
    I guess I'm not seeing what the problem is then. Can you tell (or show) specifically what you are trying to do that isn't working correctly?

  • #7
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by kwdamp View Post
    I guess I'm not seeing what the problem is then. Can you tell (or show) specifically what you are trying to do that isn't working correctly?
    Sure, as you can see the left panel is far below the logo. I would like the left panel to line up with the center panel without changing the position of the panel it's self. I hope that makes sense.

    REF: http://chieftainclothing.com/mockup/index.html

  • #8
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    614
    Thanks
    48
    Thanked 64 Times in 64 Posts
    Actually, it's the center panel that is located far below the logo. The div in the center of your page is actually the leftpanel. On another note, is there a point to having a wrapper div within a div that is already wrapping? A wrapper with a greater width than its parent, nonetheless.

    http://validator.w3.org/check?uri=ht...alidator%2F1.2
    "Yeah science!"
    Online Science Tools

  • #9
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by djh101 View Post
    Actually, it's the center panel that is located far below the logo. The div in the center of your page is actually the leftpanel. On another note, is there a point to having a wrapper div within a div that is already wrapping? A wrapper with a greater width than its parent, nonetheless.

    http://validator.w3.org/check?uri=ht...alidator%2F1.2
    Okay, I now have a single 'wrapper'. I'll have to work on the panel locations. It makes absolutely no sense to me that I clearly identity and size and alignment for the left, mid, and rightpanels. I've tried every way possible, but nothing seems to work! And I still need help with the z-index.

    Thanks
    Last edited by michael180; 07-12-2011 at 03:24 AM.

  • #10
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    614
    Thanks
    48
    Thanked 64 Times in 64 Posts
    Right now I think the positioning of your elements is the least of your problems. It's always best to get rid of all your syntax errors before worrying about layout. Here's some suggestions to start you off:
    -Fix all the errors shown by the w3 validator.
    -Fix the ids of your panels so you (or anyone helping you) don't get confused (right now your left panel is named 'midpanel' and your mid panel is named 'leftpanel').
    -Remove all padding and margins. It looks like you're trying to position your elements using margins- this is what the left/right/top/bottom attributes are for.
    -Adjust the sizes of your elements. If the combined width (plus margins and padding) of your elements is smaller than that of their container, they're not going to float side by side (there won't be enough room).

    Regarding z-index, your image is appearing exactly as it should. However, as I already said, you shouldn't use margins for positioning. Stick with the positioning attributes.
    Last edited by djh101; 07-12-2011 at 03:38 AM.
    "Yeah science!"
    Online Science Tools

  • #11
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by djh101 View Post
    Right now I think the positioning of your elements is the least of your problems. It's always best to get rid of all your syntax errors before worrying about layout. Here's some suggestions to start you off:
    -Fix all the errors shown by the w3 validator.
    -Fix the ids of your panels so you (or anyone helping you) don't get confused (right now your left panel is named 'midpanel' and your mid panel is named 'leftpanel').
    -Remove all padding and margins. It looks like you're trying to position your elements using margins- this is what the left/right/top/bottom attributes are for.
    -Adjust the sizes of your elements. If the combined width (plus margins and padding) of your elements is smaller than that of their container, they're not going to float side by side (there won't be enough room).

    Regarding z-index, your image is appearing exactly as it should. However, as I already said, you shouldn't use margins for positioning. Stick with the positioning attributes.
    Okay it validates, now can you help me position the panels. I don't know how to do without using margins.

    The new location is http://chieftainclothing.com/test/

  • #12
    Regular Coder djh101's Avatar
    Join Date
    May 2009
    Location
    California
    Posts
    614
    Thanks
    48
    Thanked 64 Times in 64 Posts
    position: relative; will allow you to relatively position your element (i.e. the position of the element is based on where it will be flowing naturally in the document.

    The attributes top, right, left, and bottom allow you to change the position of the element. For example, top: 10px; will move the element down so that it stands 10px from it's original position.

    Back to the floating of your element, if you haven't checked the width sums, then check them. If the with of the elements plus their padding and margins is greater than the width of their container, they aren't going to float side by side.
    "Yeah science!"
    Online Science Tools

  • Users who have thanked djh101 for this post:

    michael180 (07-12-2011)

  • #13
    Regular Coder
    Join Date
    Apr 2005
    Posts
    313
    Thanks
    18
    Thanked 2 Times in 2 Posts
    Quote Originally Posted by djh101 View Post
    position: relative; will allow you to relatively position your element (i.e. the position of the element is based on where it will be flowing naturally in the document.

    The attributes top, right, left, and bottom allow you to change the position of the element. For example, top: 10px; will move the element down so that it stands 10px from it's original position.

    Back to the floating of your element, if you haven't checked the width sums, then check them. If the with of the elements plus their padding and margins is greater than the width of their container, they aren't going to float side by side.
    Great help, now I'll work on the images etc.

    http://chieftainclothing.com/test/

    Much 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
    •