Дочерний элемент не кажется дочерним

0

У меня есть div для тени вниз в контейнере, но он, похоже, не является дочерним элементом контейнера. Мой сайт: http://ps4news.eu.pn/homepage.html (Это для школы). Я собираюсь оставить его сжатым, чтобы вы могли сказать, что случилось. Я удалил высоту для контейнера, поэтому он будет до тех пор, пока это необходимо, но когда я делаю то же самое для тени вниз, контейнер, похоже, сжимается до максимального размера сбрасываемого теневого div. Но выпадающий теневой div - это дочерний элемент контейнера, а все остальные div внутри контейнера не влияют на контейнер, который только он делает. Итак, что мне нужно сделать, чтобы сделать это до тех пор, пока контиран?

Изменить. Наклонная тень на самом деле составляет всего 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&amp;id=815822&amp;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">&copy;Copyright Mounteder Abdulrazag, Tom Borghouts</div>
      </div>
    </div>
  </div>
</div>
  • 1
    Возможно, опубликуйте соответствующий код, чтобы другим было легче отлаживать и помогать.
  • 0
    Пожалуйста, отправьте контейнер / дочерний HTML-код.
Теги:
parent-child

1 ответ

0

Вы должны попробовать добавить overflow: hidden; в контейнер, чтобы размер не изменился.

  • 0
    Не похоже на работу: /.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню