How to Implement this UI with CSS [closed]


Tags: html,css,wordpress,web

Problem :

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 it position: absolute its position would be changed while the windows is changing.

How could I implement the right CSS for that.

This is the CodePen example, try to resize the window:

`http://codepen.io/msabdullah/pen/rplgC`


Solution :

You need to use a combination of position: relative and left right top bottom to position it correctly. It should be positioned relative to the parent element.

<div class="parent">
  <div class="child">
  </div>
<div>

If you had the above html structure then you would need to make sure both had positioning, and then position the child relative to the parent:

.parent {
  position: relative;
}

.child {
  position: relative:
  top: 0;
  right: 0;
}

This is just an example, but it should be something similar.


    CSS Howto..

    How do I get an element to always occupy a specific percentage of its parent element, even when the browser is resized?

    CSS how to center ::after pseudo elem

    Newbie: How to have a row background in my case?

    How can I place multiple spans in the same line?

    Progress Bar in jquery showing reverse animation

    How can I create this complicated layout using only CSS?

    How to repeat a code in html without writing the same code again and again

    How to make my css webkit animation stop changing

    How to debug(make page look like in Firefox) CSS in IE? [duplicate]

    How to reset CSS in inline? [closed]

    How to handle CSS code in my Android email app?

    how to download google fonts in version bold

    How can I align the checkboxes in a form when using table display with CSS?

    how to change :nth element background size

    Beginner's stuff: How to stop CSS' Divs from overlapping?

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How to scale and center text vertically in a fluid layout? (using CSS)

    How can you keep the “theme” of your website and add new dynamic pages? [closed]

    How to fix a footer overlay on main in HTML

    How to position two divs on the absolute front of a page, but with one over the other? CSS

    How to remove css class with some effect using jQuery?

    How can I set a border in alignment with other borders

    How to stop loading pdf on mobile device?

    How to change a button data-icon size

    How can I add a hover effect to icons with CSS? [closed]

    How to remove a element after animation?

    How can I use JQ to pick out a parent whose child is hr.strong?

    How to change the Size of the ListBox of the datePicker in GWT?

    How can I put styleName (css) on ui.xml to HTML5 input element (range)

    jQuery Mobile - How to change the css classes to be applied when i use a data-attribute?