Forums

pzh20

I'm working with a CMS and am trying to position the Meta Date absolutely, however, if you look at xxx you will see the problem I'm having with the green roundels.

Here is theHTML

<section class="row row-3 sub-art">
<section class="column column-1 grid-left-0 grid-width-14">

<

div id="block-3" class="block block-type-content block-fluid-height">

<

div class="block-content">

<

div class="loop">

<

div id="post-124" class="post-124 post type-post status-publish format-standard hentry category-mainarticle author-admin">

21 Jan

And the CSS

.post {position:relative; z-index:50;}
div.entry-meta-above {width:36px; height:36px; position:absolute; top:30px; left:-18px; text-align:center; z-index:99;}

I thought the z-index would help, but I cannot seem to make it work.

If I put the position:relative; higher up, ther three posts in the middle column go haywire.

Any thoughts?

Regards Pete

pzh20

sorry, not xxx but http://www.hhhconsulting.co.uk/dev/bootstrap/

Sedana

you have :

.block { overflow: hidden; margin-bottom: 10px; }

Change it to overflow:visible and add line-height:36px to "entry-date published"-span element

pzh20

Sedana,

That worked a treat, thanks. Could you explain it so I understand more for the future.

Regards Pete

Sedana

Howdy,

If you put overflow hidden on a parent-element all child-elements inside it will get cut outside of its box.

By changing the value to overflow visible you are allowing the child-elements to be visible even if they are positioned outside of its parent.

For the line-height: If you have an element that is not a 'td' (or is displayed as a 'td' width css) you can't use the style:vertical-align:middle. To achieve the same effect in this case you tell the text it is 36px high = the same as the circle. This will place the text in the middle of 36px's.

/Sedana

pzh20

Thanks, I understand a lot more now.

Regards Pete

treehouse : what would you like to learn today?

Forums

[Solved] Absolute positioning and z-index