Clever Geek Handbook

Arranging and reordering CSS layers

I am trying to have one layer and center images inside. I.E., if I have 3 images and want to have 3 links below them, is there a way to do this without using a separate div tag for each link and image? To automatically make the links centered under the images, and the images have to be evenly spaced within the layer?

I was also wondering how to make the show div behind the standard html if possible. I.E. if I have text and a div above the text, the div will be displayed by default on the text when I want it to be behind. Is this only possible with another layer?

0


source to share


2 answers


Yes, you will need to wrap a container element like a div around each image and its caption to keep them together.

<div class="pictureBox">
    <div>
        <img />
        caption caption
    </div>
    <div>
        <img />
        more caption
    </div>
</div>
--------
.pictureBox div {
    text-align: center;
    /* whatever width/height/positioning you want */
}


for the second part of the question on how to place it in other text, have a look at the CSS z-index , although I think it only applies to absolutely positioned elements.

+2


source


nickf is right, z-index only applies to absolutely positioned elements.



You can make the position of the containing element: relative, then give both the image and the position of the link: absolute to affect their stacking order.

0


source






More articles:


All Articles