...

View Full Version : No understanding z-index . . .



michael180
07-11-2011, 11:21 PM
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?

bullant
07-11-2011, 11:25 PM
z-index only works on elements that have been positioned using css positioning. Does .photo have a position: style in the css?

kwdamp
07-11-2011, 11:35 PM
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.

michael180
07-12-2011, 12:23 AM
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;
}

michael180
07-12-2011, 01:05 AM
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.

kwdamp
07-12-2011, 02:14 AM
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?

michael180
07-12-2011, 02:23 AM
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

djh101
07-12-2011, 02:48 AM
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=http%3A%2F%2Fchieftainclothing.com%2Fmockup%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.2

michael180
07-12-2011, 03:06 AM
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=http%3A%2F%2Fchieftainclothing.com%2Fmockup%2Findex.html&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%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

djh101
07-12-2011, 03:32 AM
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.

michael180
07-12-2011, 04:25 AM
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/

djh101
07-12-2011, 04:59 AM
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.

michael180
07-12-2011, 05:19 AM
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 . . .



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum