Best way how to put elements above an tag?


Tags: css,html5

Problem :

I have a list of cards where the background of the card is an image and some extra information must be put above it. Sounds like a nice job for background-image? Yeah, but as I need to set these images dynamically and the images need to be editable, background-image isn't an option (I know there are ways to do it, but it is not an option for this particular situation).

So here is what my card looks like

<figure>
<img src="foo.jpg" alt="">
<figcaption>
<h5>Name:<span>xyz</span></h5>
<h6>Location:<span>xyz</span></h6>
</figcaption>
</figure>

And the css what it SHOULD do, but it doesn't and it neither seems to me like a good routine:

.container-of_the-cards{ /* This is actually a <li> element with some different specs, but for illustration purposes I guess this one is easier */
width:100%;
display:inline-block;}
figure{
box-sizing:border-box;width:30%;height:300px;margin-right:1.1%;overflow:hidden;}
figure img{
width:100%;
height:100%;}
figcaption{box-sizing:border-box;margin:0 20px; background: blue; margin-top:-280px;}
figcaption h5{top-margin:30px;}
figcaption h6{top-margin:80px;}

So, now I have this problem:

margin-top:-280px;

I should rather prevent this, but how?



Solution :

You should add position: relative in order to take the element out of flow.

You will need to adjust the left and top attributes.

HTML

<figure>
    <img src="foo.jpg" alt="">
        <figcaption>
            <h5>Name:<span>xyz</span></h5>
            <h6>Location:<span>xyz</span></h6>
        </figcaption>
</figure>

CSS

.container-of_the-cards{ /* This is actually a li-element with some different specs, but for illustrational purposes I guess this one is easier */
    width: 100%;
    display: inline-block;
}
figure{
    box-sizing: border-box;
    width: 30%;
    height: 300px;
    margin-right: 1.1%;
    overflow: hidden;
}

figure img{
    width: 100%;
    height: 100%;
    position: relative;
}

figcaption{
    box-sizing: border-box;
    margin: 0 20px;
    background: blue;
    margin-top: -280px;
}

figcaption h5{
    top-margin:30px;
}

figcaption h6{
    top-margin:80px;
}

JSFIDDLE

If this is not the effect you want please edit your question to be more clear.


    CSS Howto..

    How can I style dynamically created elements within an iframe?

    How to pass JavaFX variable into CSS style?

    How to make div scalable by using percentage in CSS

    How can I force an image to display in its entirety with CSS?

    how to get the height of a user's device in html

    how to keep the css style after inserting a row to table by jquery

    how to make a navigation 100% width within an header wrapper

    How to use jQuery to select a class name that's transformed by css-loader?

    CSS: How to achieve - Two elements to be centered and positioned side by side WITHOUT a third parent container?

    show css icon with select icon class selcetbox

    how to change style of a css element using jQuery

    How to prevent from loading a css and a js sheet at only one Rails controller?

    How to display a box of color beside a table row using CSS?

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    How to include css file in a JavaFx Spring application

    How is this fluid column layout changing to single-column as page narrows?

    How to get a table-cell aligned to the right?

    How can I compress / gzip my mimified .js and .css files before publishing to AWS S3?

    how to keep table 100% wide?

    CSS - How to prevent ul/ol li's second row of text from going further left than the first line?

    onsen ui 2 : how to implement android style scrollable tabbar?

    How to organize html and css to do this UI design with responsive design

    Every third post excerpt shows up on its own line

    CSS hover transition - how to remove delay?

    Using jQuery toggle to show content, but prevent closing when the user clicks on an input element

    My jquery slideshow is not functioning properly

    How do I make hidden description text push the content upwards when it shows

    How to create this image using CSS?

    How to get the exact RGBa value set through CSS via Javascript?

    How to get an interactive geographic map for a country? [closed]