CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Naor
Naor

Reputation: 24093

arrange caption over an image

I have this example: http://jsfiddle.net/WkpL9/
HTML: 

<div class="span2">
    <div class="image-container">
        <img alt="" src="http://placehold.it/150x120"/>
        <p>asdadsadasdasdsadasdasdasdasdsadsad</p>
    </div>
</div>

CSS:

.image-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.image-container img {
    max-height: 150px;
}

.image-container p {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0px;
}

I would like the caption of the image to be: 1. positioned over the image (in the top layer). 2. placed vertically in the bottom of the image. 3. with ellipsis. 4. will not get out of the wrapping div.

Is this possible?

I am using twitter bootstrap.

Upvotes: 0

Views: 2363

Answers (3)

Zeth
Zeth

Reputation: 2598

I would do that with position: relative; and position: absolute;, like so:

.image-container {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.image-container img {
    max-height: 150px;

    position: relative;

}

.image-container p {
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    position: absolute;
    bottom: 0px;

    position: absolute;
    top: 0;
    left: 0;

    text-align: center /* Not sure if I misunderstood you with this */

}


.image-container img {
    margin-top: 15px;
}

Regarding the ellipsis, then you can add this: &hellip; after the text. Was that what you meant?

Upvotes: 1

Kamyar
Kamyar

Reputation: 18797

1- add top:0x; to .imageContainer p instaed of bottom
4- use word-wrap: break-word on .imageContainer p. Also you have to set a height in px for the containing div and set the p element's width to 100%. here's your sample with word wrap.

Upvotes: 0

Marcin Orlowski
Marcin Orlowski

Reputation: 75646

Use z-index to specify order, so you can place i.e. two divs overlapping each other and speficy which one is on top or bottom. As for positioning you can use negative values (i.e. top: -50px;) to "lift" element above its target position.

Upvotes: 0

Related Questions