CODEWITHSUNDEEP
htmlcss
Skeptar
Skeptar

Reputation: 179

Box-shadow is not complete at the bottom

I cant see the box-shadow at the bottom of the imageborder. I think its cutted of and i have no idea what i have to do... Maybe set the height of the article heigher? Here is the Page Page and the code 

*{
    padding: 0px;
    margin: 0px;
    font-family: Raleway;
    line-height: 20px;
}

body{
    background-image: url(images/hintergrund.png);
}

section{
    margin-top: 20px;
    width: 1100px;
    background: white;
    border: 2px solid black;
	box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
    
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

article{
    width: 100%;
    overflow: hidden;
}

.bild{
    height: 200px;
    width: 200px;
    float: left;
    border: 2px solid black;
	box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
}

.text{
    float: right;
    width: 860px;
    word-wrap: break-word;
    height: 200px;
}
<html>
    <head>
        <title>Homepage</title>
        <link rel="stylesheet" href="index.css">
        <link href='http://fonts.googleapis.com/css?family=Raleway:600' rel='stylesheet' type='text/css'>
        
        
        <!-- include jQuery library -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <!-- include Cycle plugin -->
        <script type="text/javascript" src="http://malsup.github.com/jquery.cycle.all.js"></script>

        <script type="text/javascript">
            $(document).ready(function() {
                $('.bild').cycle({
                    fx: 'scrollRight',
                    next: '.bild',
                    timeout: 0
                });
            });
        </script>            
    </head>
    <body>
        <section>
            <article>
                <div class="bild">
		<img src="http://malsup.github.com/images/beach1.jpg" width="200" height="200" />
		<img src="http://malsup.github.com/images/beach2.jpg" width="200" height="200" />
		<img src="http://malsup.github.com/images/beach3.jpg" width="200" height="200" />
		<img src="http://malsup.github.com/images/beach4.jpg" width="200" height="200" />
		<img src="http://malsup.github.com/images/beach5.jpg" width="200" height="200" />
                </div>
            </article>
        </section>
    </body>
</html>

...............................................

Upvotes: 0

Views: 73

Answers (1)

jmore009
jmore009

Reputation: 12923

it's because you have overflow: hidden on article. Use a clearfix instead:

.article:after{
   content: '';
   display:block;
   clear: both;
}

and add the overflow on .bild instead to hide your images

.bild{
   height: 200px;
   width: 200px;
   float: left;
   border: 2px solid black;
   box-shadow: 8px 8px 10px 0px rgba(0,0,0,0.75);
   overflow: hidden;
}

FIDDLE

overflow:hidden does exactly as it sounds, hides anything that overflows its boundaries. You can usually use it to do things like clear float issues (which you are doing whether you know it or not) and hide images (which you are also doing) but in some cases (this being one) it prevents your box shadow from extending past it's boundaries. So using a clearfix clears your floats without the hiding the box shadow.

Upvotes: 2

Related Questions