8

I Try to add a shadow to a div element. But only to 90% of the width from the div and with margin-left from 10% . This was try

<div id="post-headline">
    <div id="post-headline-date">33.12</div>
    <div id="post-headline-title"><?php the_title(); ?></div>       
    <div id="post-headline-author"><?php the_author(); ?></div>
    <div id="shadow"></div>
</div>

CSS

#shadow{
  position:relative;
  height:5px;
  z-index:0;
  width:96%;
  left:3.7%;
  top:-6px;
  -moz-box-shadow: 0px 5px 4px #888;
  -webkit-box-shadow: 0px 5px 4px #888;
  box-shadow: 0px 5px 4px #888;
}

But it seems the percent values does not belong to the size of "post-headline". On different screen resolutions has it different values. What am I doing wrong?

Example: res1:

  • ---------------- headline
  • ------------ shadow

res2:

  • ---------------- headline
  • ----------------- shadow

UPDATE My CSS

#post-headline {
position:relative;
    background-color: #3366cc;
    color:#fff;
    left:-60px;
    height: 40px;
    width: 106.5%;
    z-index:1;
}

#post-headline:after{
  content: " ";
  position:absolute;
  width: 95.7%;
  right: 0;  
  bottom: 0;
  height: 20px;
  -moz-box-shadow: 0px 5px 4px #888;
  -webkit-box-shadow: 0px 5px 4px #888;
  box-shadow: 0px 5px 4px #888;
}

#post-headline-title {
    margin-left: 60px;
}

#post-headline-author{
font-weight:bold;
margin-left:60px;
}

#post-headline-date{
position:absolute;
margin:8px;
font-weight:bold;
font-size:12px;
}

#post-headline-triangle
{
    z-index:-1;
    left: -51.7px;
    top:-31px;
    height:45px;
    width:45px;
    background-color:#0033cc;
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
 }

My PHP

<div id="content">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div id="post-headline">
    <div id="post-headline-date">33.12</div>
    <div id="post-headline-title"><?php the_title(); ?></div>       
    <div id="post-headline-author"><?php the_author(); ?></div> 
  </div>
<div id="post-headline-triangle"></div>
          ...
      <?php endwhile;endif; ?>  
</div>

Is still not working :/

1 Answer 1

8

You could do it like this: http://codepen.io/pageaffairs/pen/DAvoj

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {margin: 0; padding: 0;}

#post-headline{
  position:relative;
  background: white;

}

#post-headline:after{
  content: " ";
  position:absolute;
  width: 90%;
  right: 0;
  bottom: 0;
  height: 20px;
  z-index:-1;
  -moz-box-shadow: 0px 5px 4px #888;
  -webkit-box-shadow: 0px 5px 4px #888;
  box-shadow: 0px 5px 4px #888;
}

</style>
</head>
<body>

<div id="post-headline">
    <div id="post-headline-date">33.12</div>
    <div id="post-headline-title"><?php the_title(); ?></div>       
    <div id="post-headline-author"><?php the_author(); ?></div>
</div>

</body>
</html>
2
  • This does not work. Same problem as before: Percent values differs from resolution to resolution.
    – Lucas
    Commented Jun 16, 2013 at 12:54
  • Not sure what you mean by that. No matter what width the screen, or how much zoomed in or out, the shadow line in my example is always 90% the width of the post-headline div, which seemed to be what you wanted.
    – ralph.m
    Commented Jun 16, 2013 at 14:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.