我有一个div用于容器内的下拉阴影,但它似乎不是容器的子项。我的网站:http://ps4news.eu.pn/homepage.html(这是为了学校)。我会让它缩小,所以你可以告诉我什么是错的。我删除了容器的高度,所以它只要需要,但是当我为下拉阴影做同样的事情时,容器似乎缩小到下拉阴影div的最大尺寸。但是下拉阴影div是容器元素的子元素,而容器内的所有其他div都不会影响容器元素。那么,只要是contianer,我需要做些什么?
编辑: 下拉阴影实际上只有11像素长(我的意思是图像)。但它似乎停止了标题停止的位置。
如果你的意思是好的:
body {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px
}
#Container {
z-index:999999;
width: 1350px;
background-color:#CCC;
position:relative;
}
#DropDownShadow {
width: 1015px;
z-index:-9999;
margin-right: auto;
margin-left: auto;
background-image: url(../images/bgdropshadow.jpg);
background-repeat: repeat-y;
}
#Wrapper {
width: 975px;
height: auto;
margin-left: auto;
margin-right: auto;
}
#ContentHolder {
width:975px;
background:#0F0;
margin-left:auto;
margin-right:auto;
}
#Header {
height: 125px;
margin-right: auto;
margin-left: auto;
background-color: #000;
width: 975px;
}
#Social-Networks {
height:36px;
width:164px;
margin-right:230px;
margin-top:80px;
float:right;
}
#Social-Networks img {
opacity:1;
}
#Social-Networks img:hover {
opacity:0.9;
}
#ContentHolder1 {
width:650px;
height:925px;
margin-left:42px;
margin-right:auto;
margin-top:-10px;
background-color:transparent;
color: #8B8B8B;
}
#Side-Content {
width:250px;
height:600px;
float:right;
background-color:transparent;
}
#Content1 {
width: 725px;
height:1235px;
color: #9B9B9B;
margin-top:-18px;
margin-left:5px;
background-color: #03C;
border-radius: 4px 0px 0px 0px;
text-align: center;
font-family: "Open Sans";
}
hr {
height: 1px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 4px;
}
#Copyright {
position:absolute;
bottom:0;
height: 25px;
width: 975px;
margin-right: auto;
margin-left: auto;
background-color: #0000d3;
text-align:left;
font-family:"Open Sans";
overflow:hidden;
}
<div id="Container">
<div id="DropDownShadow">
<div id="Wrapper">
<div id="Header"> <img src="images/Header.png" width="400" height="95"
style=
"position: absolute;
left: 189px;
top:10px;">
<div id="Social-Networks"><a href="http://www.playstation.com" title="Officiële Playstation-Website" target="_blank"><img id="Playstation" src="images/icons/Playstation-logo.png" width="36" height="36"></a><a href="https://www.youtube.com/user/PlayStation" title="Officiële Playstation Youtube Kanaal" target="_blank"><img src="images/icons/1387937374_Youtube.png" width="36" height="36" style="margin-left:5px;"></a><a href="https://twitter.com/PlayStation" title="Officiële Playstation Twitter" target="_blank"><img src="images/icons/1387937314_Twitter.png" width="36" height="36"
style="margin-left:5px;"></a><a href="https://www.facebook.com/PlayStation" title="Officiële Playstation Facebook" target="_blank"><img src="images/icons/1387947454_Facebook.png" width="36" height="36" style="margin-left:5px;"></a></div>
</div>
<div id="ContentHolder">
<div id='cssmenu'>
<ul>
<li class='active'><a href='homepage.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Artikelen</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Nederlands</span></a> </li>
<li class='has-sub'><a href='#'><span>Engels</span></a> </li>
</ul>
</li>
<li><a href='gallery.html'><span>Galerij</span></a></li>
<li style="float:right" class='last'><a href='#'><span>Over</span></a></li>
<li style="float:right" class='has-sub'><a href='#'><span>Contact</span></a></li>
</ul>
<div id="Side-Content">
<script type="text/javascript" src="http://output78.rssinclude.com/output?type=js&id=815822&hash=b0095ae8bebb910e5dc0f397a646173e"></script>
</div>
<div id="ContentHolder1">
<h1>Gallerij</h1>
<div id="Gallery">
<header>Welcome to my Gallery</header>
<section>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-02.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-02.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-03.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-03.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-04.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-04.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-05.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-05.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-06.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-06.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-07.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-07.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-08.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-08.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
<li><a class="fancybox" rel="group" href="images/gallery/img/larg/image-01.jpg" title="Istanbul"><img src="images/gallery/img/thumbnails/image-01.jpg" width="100" height="100" alt="Istanbul"></a></li>
</section>
<footer>All Rights Reserved</footer>
<!-- Add jQuery library -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="images/gallery/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="images/gallery/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="images/gallery/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="images/gallery/source/helpers/jquery.fancybox-thumbs.js"></script>
<script type="text/javascript">
$(".fancybox")
.attr('rel', 'gallery')
.fancybox({
padding : 0,
prevEffect : 'none',
nextEffect : 'none',
helpers : {
title : {
type: 'outside'
},
thumbs : {
width : 50,
height : 50
}
}
});
</script>
</div>
</div>
</div>
<div id="Copyright">©Copyright Mounteder Abdulrazag, Tom Borghouts</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:0)
您应该尝试将overflow: hidden;
添加到容器中,以便大小不会改变。