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 to change cursor on the NextGen Gallery Slideshow in Wordpress

    How to include google search result in my specified div width and height?

    Floating of Divs not exact. How to arrange them the right way?

    How to avoid click on within an from triggering click event on without Javascript/jQuery?

    How to reference an embedded image from CSS?

    How to preserve aspect ratio when scaling image using one (CSS) dimension in IE6?

    How to make interactive logo design without flash?

    How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths? [closed]

    How to assign a css class to echo $output

    How to make a div take the remaining height without knowing the height?

    How to use one popup box to display arbitrary number of information respectively?

    CSS html : non-standard picture frame: how to imlement with CSS and HTML?

    How to style last tag img css?

    How to formatting a simple
      in columns and bolding the first item on its own line

    how to position a div for all screen resolutions

    How to create a full width background image with a variable height depending on content?

    CSS gone wild - how to stop a style from going too far

    How to use div classes to get my blocks to line up?

    How do I use pseudo-classes to select all children except first and last?

    how to apply css on only one class?

    How to get css button to stay active after it has been clicked?

    How can I show a loading screen while a really large image is loading?

    How can I make width flexible with CSS when using bootstrap's responsive design?

    How to inserted HTML tag from pseudo-element content: [duplicate]

    How can I create a pop up like the one Google Calendar uses ?

    How can I make this menu's “clear:both” work in Google Chrome?

    CSS: How to target a specific cell inside a table?

    Resolved - CSS of Blank Theme Does NOT Show My Edits - Why?

    How to use CSS to create a particular stylized, multi-lined text box?

    How do I vertically center my navigation bar?