[Solved] How to Implement this user interface via CSS.

[msaljaber]

I’m working on WordPress template, and got this little problem which is: I can’t position the date label above the image thumbnail, as you can see here:

http://cl.ly/image/3X1j3h3j0E0X

If I make the label position: absolute, its position would be changed while the window is changing.

How could I implement the right CSS for that.

Here is the CodePen example: http://codepen.io/msabdullah/pen/rplgC

[Paulie_D]

You need to complete the HTML…you have unclosed elements.

http://codepen.io/Paulie-D/pen/egxiG

Use position:relative on the parent and you’re good to go.

[__]

You’re trying to match the layout in the image you posted?

HTML is the same; but I took out a lot of CSS. If you are able to change the HTML,this could be done with even less code.

edit

…you have unclosed elements.

Missed that!

[msaljaber]

Is is better to type less HTML code?

[msaljaber]

Yup thank you. The problem was that I, somehow, forgot to make the parent element position: relative so its children would not change its position while the window changing. Thank you.

[Author]

Posts