Question

I have a div container (header)

div.header {
    width: 1024px;
    height: 115px;
    background-color: black;
}

which contains a h1 named header_title with a text inside:

#header_title {
    font: 80px 'Oxygen', sans-serif;
    letter-spacing: -8px;
    margin-left: 25px;
    text-shadow: 500px 35px 18px white, 300px -50px 30px lightblue;
}

Exactly below header div i have my menu, like you see in my image.

If I set a text shadow that will go out the div, (the 4th letter, a ‘g’) ho can I make it displaying anyway and don’t be cut off?

I tried overflow: visible, and z-index solution, but it doesn’t work =(

Thanks.

Markup for header:

 <div class=header>
      <h1 id=header_title>Programmazione</h1>
 </div> <!-- fine header -->    

 <div class=menu>
     etc......

Answer 1

Try deleting the height property of the header and give it a padding-bottom of about say 15px for the shadow. That should do the trick.