2014-01-05 6 views
1

Я установил высоту своей обертки в auto, чтобы она автоматически настраивалась на любой экран, но обертка не обертывается вокруг внутренних div. Обертка, кажется, составляет 150 пикселей, хотя я не знаю почему. Примечание. Оболочка - это контейнер.Обертка не обертывается

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Playstation 4 Home Page English</title> 
<style type="text/css"> 
@import url("styles/Default Style.css"); 
@import url("styles/Homepage.css"); 
@import url("styles/styles.css"); 
</style> 
<link rel="shortcut icon" href="images/icons/Playstation-logoicon.ico" type="image/x-icon"> 
    <link rel="stylesheet" type="text/css" href="../engine1/style.css" /> 
    <script type="text/javascript" src="../engine1/jquery.js"></script> 
</head> 

<body style="background:#CCCCCC;"> 
<div id="Container"> 
     <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 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="wowslider-container1"> 
    <div class="ws_images"><ul> 
<li><img src="../data1/images/SonyPlaystationGeschiedenisSlider.jpg" alt="SonyPlaystationGeschiedenisSlider" title="Het onstaan van Het Gaming Icoon" id="wows1_0"/></li> 
<li><img src="../data1/images/RemotePlayPS4PSVita.jpg" alt="RemotePlayPS4PSVita" title="Remote-Play voor de PS4 en PS Vita" id="wows1_1"/></li> 
</ul></div> 
<div class="ws_bullets"><div> 
<a href="#" title="De geschiedenis van de Sony Playstation">1</a> 
<a href="#" title="Remote-Play voor de PS4 en PS Vita">2</a> 
</div></div> 
    <div class="ws_shadow"></div> 
    </div> 
    <script type="text/javascript" src="../engine1/wowslider.js"></script> 
    <script type="text/javascript" src="../engine1/script.js"></script> 
      <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>Welkom op onze Playstation 4 News Website!</h1> 
      adjskl;fjaklsfdjaflds; 
      <hr> 
      lkdajf;lkdaj;fas 
      </div> 
     </div> 
     </div> 
     <div id="Copyright">&copy;Copyright Mounteder Abdulrazag, Tom Borghouts</div> 
     </div> 
</body> 
</html> 

И мой CSS:

@charset "utf-8"; 
/* CSS Document */ 

body { 
margin-top: 0px; 
margin-right: 0px; 
margin-bottom: 0px; 
margin-left: 0px 
} 

#Container { 
    height:auto; 
    width: 975px; 
    margin-left:auto; 
    margin-right:auto; 
    background-color:#006; 
    overflow:hidden; 
} 

#Wrapper { 
    margin:auto; 
    background-color:#EEEEEE; 
    width: 975px; 
    margin-left: auto; 
    margin-right: auto; 
} 

#ContentHolder { 
    width:975px; 
    background-color:#0F0; 
    margin-left:auto; 
    margin-right:auto; 
    overflow:hidden; 

} 

#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 { 
    height: 25px; 
    width: 975px; 
    margin-right: auto; 
    margin-left: auto; 
    background-color: #0000d3; 
    text-align:left; 
    font-family:"Open Sans"; 
} 
+0

Какой цвет является оболочкой ?? – BuddhistBeast

+0

Whitesmoke. Но я это исправил;). – user3161014

ответ

0

попробовать

#Container { 
    float: left;    //this 
    display: inline-block; // or this 
} 
+0

Это не сработало. Он только потащил обертку влево, и все равно 150px: /. – user3161014

+0

Я исправил его. Кажется, что CSS-меню (панель навигации) было контейнером большей части. Я просто закрыл div, где он должен был закончиться, и он был решен. Спасибо за помощь :). – user3161014

Смежные вопросы