不能得到一个div来定位我想要的方式(Can't get a div to position the way i want it to)
这是我正在为一个学校项目工作的网站。页面是荷兰语，对不起。 http://v14ewoude.helenparkhurst.net/index.html我试图让我的div来掩盖我的所有内容。 但它始终坚持我的标题。 我无法让它发挥作用。 有人可以帮我查一下吗？ 提前致谢。
这是我的代码的一部分：
<body><div id="wrapper"> <img class="logo" src="images/ericvanderwoude.png" alt="Eric van der Woude" height="150" width="150"> <header> <h1>Informatica Opdracht</h1> </header> <nav id="menu"> <ul> <li><a href="index.html" title="Home">Home</a></li> <li><a href="#" title="About">About</a></li> <li><a href="#" title="Portfolio">Portfolio</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul> </nav> <section class="fullwidth"> <h3>Opdracht</h3> <p>De opdracht was een site te maken met behulp van HTML5 en CSS. Als hulpbronnen mocht ik onder andere de cursus op <a href="http://informatica-actief.stoas.nl/login/index.php" target="_blank">Informatica Actief</a> gebruiken en de informatie van <a href="http://www.w3schools.com/" target="_blank">W3Schools.</a></p> <h3>Eisen</h3> <p>Volgens de opdracht moest ik mij aan een aantal eisen houden, namelijk de site moest minimaal een startscherm, hoofdscherm en minimaal 1 scherm vanuit het menu in het rechtergedeelte. Ik moest zo veel mogelijk laten zien wat ik van HTML5 en CSS afweet. De opmaak moet geheel met CSS zijn gemaakt en de pagina moet een favicon hebben.</p> </section> <article> <h3>Kolom</h3> <p>Voor het gemak heb ik het onderwerp 'salaris' gekozen. Overigens heb ik de <th> of table header niet meegerekend als kolom.</p> <table style="width:100%"> <caption>Salarissen</caption> <tr> <th>Maand</th> <th colspan="4">Salaris</th> </tr> <tr> <td></td> <td>Rex</td> <td>Emily</td> <td>Marcel</td> <td>Julia</td> </tr> <tr> <td>Januari</td> <td>€95</td> <td>€110</td> <td>€70</td> <td>€45</td> </tr> <tr> <td>Februari</td> <td>€70</td> <td>€60</td> <td>€85</td> <td>€95</td> </tr> <tr> <td>Maart</td> <td>€145</td> <td>€40</td> <td>€60</td> <td>€80</td> </tr> <tr> <td>April</td> <td>€85</td> <td>€110</td> <td>€98</td> <td>€100</td> </tr> </table> </article> <aside> <h4>Extra opgaven</h4> <p>Er werd ook een extra opgave gegeven. Deze zal ik hieronder beschrijven.</p> <p>"Je hebt een 4 rijen, 5 kolommen tabel, met de tabel functionaliteit van HTML en geheel met CSS gemaakt. De tabel moet voorzien van een eerste speciale rij en kolom. Elke cel in de tabel moet van een rand voorzien zijn (lijnen zichtbaar)"</p> </aside> <footer> <p>Copyright© 2014 - Eric van der Woude - Informatica Helen Parkhurst</p> </footer> </div> </body>并且是我的css的一部分：
body{ overflow:hidden; margin:0;padding:0; margin: auto; background-image:url('/images/background_graygoose_noise.png'); background-repeat: repeat-y; background-repeat: repeat-x; background-color:white; } #menu{ background-color: #44699C; height: 50px; border: 1px solid black; border-radius: 10px; width:90%; } article, section{ margin: 1.858736%; /* 10px/538px=0.1858736*100=~1.858736 */ } article, section{ float: left; width: 63.197026%; /* 340px/538px=0.631970*100=~63.197026 */ } aside{ float: right; width: 29.638029%; /* 158/538px=0.293680*100=~29.638029 */ } footer{ float:left; width:100%; margin: 1.858736%; /* 10px/538px=0.1858736*100=~1.858736 */ } #wrapper{ background-color:white; }This is a site I am working on for a school project.The page is in Dutch, sorry. http://v14ewoude.helenparkhurst.net/index.html I am trying to get my div to cover up all of my content. But it keeps sticking at my header. I can't get it to work. Could someone look it up for me? Thanks in advance.
Heres a part of my code:
<body><div id="wrapper"> <img class="logo" src="images/ericvanderwoude.png" alt="Eric van der Woude" height="150" width="150"> <header> <h1>Informatica Opdracht</h1> </header> <nav id="menu"> <ul> <li><a href="index.html" title="Home">Home</a></li> <li><a href="#" title="About">About</a></li> <li><a href="#" title="Portfolio">Portfolio</a></li> <li><a href="#" title="Contact">Contact</a></li> </ul> </nav> <section class="fullwidth"> <h3>Opdracht</h3> <p>De opdracht was een site te maken met behulp van HTML5 en CSS. Als hulpbronnen mocht ik onder andere de cursus op <a href="http://informatica-actief.stoas.nl/login/index.php" target="_blank">Informatica Actief</a> gebruiken en de informatie van <a href="http://www.w3schools.com/" target="_blank">W3Schools.</a></p> <h3>Eisen</h3> <p>Volgens de opdracht moest ik mij aan een aantal eisen houden, namelijk de site moest minimaal een startscherm, hoofdscherm en minimaal 1 scherm vanuit het menu in het rechtergedeelte. Ik moest zo veel mogelijk laten zien wat ik van HTML5 en CSS afweet. De opmaak moet geheel met CSS zijn gemaakt en de pagina moet een favicon hebben.</p> </section> <article> <h3>Kolom</h3> <p>Voor het gemak heb ik het onderwerp 'salaris' gekozen. Overigens heb ik de <th> of table header niet meegerekend als kolom.</p> <table style="width:100%"> <caption>Salarissen</caption> <tr> <th>Maand</th> <th colspan="4">Salaris</th> </tr> <tr> <td></td> <td>Rex</td> <td>Emily</td> <td>Marcel</td> <td>Julia</td> </tr> <tr> <td>Januari</td> <td>€95</td> <td>€110</td> <td>€70</td> <td>€45</td> </tr> <tr> <td>Februari</td> <td>€70</td> <td>€60</td> <td>€85</td> <td>€95</td> </tr> <tr> <td>Maart</td> <td>€145</td> <td>€40</td> <td>€60</td> <td>€80</td> </tr> <tr> <td>April</td> <td>€85</td> <td>€110</td> <td>€98</td> <td>€100</td> </tr> </table> </article> <aside> <h4>Extra opgaven</h4> <p>Er werd ook een extra opgave gegeven. Deze zal ik hieronder beschrijven.</p> <p>"Je hebt een 4 rijen, 5 kolommen tabel, met de tabel functionaliteit van HTML en geheel met CSS gemaakt. De tabel moet voorzien van een eerste speciale rij en kolom. Elke cel in de tabel moet van een rand voorzien zijn (lijnen zichtbaar)"</p> </aside> <footer> <p>Copyright© 2014 - Eric van der Woude - Informatica Helen Parkhurst</p> </footer> </div> </body>and heres a part of my css:
body{ overflow:hidden; margin:0;padding:0; margin: auto; background-image:url('/images/background_graygoose_noise.png'); background-repeat: repeat-y; background-repeat: repeat-x; background-color:white; } #menu{ background-color: #44699C; height: 50px; border: 1px solid black; border-radius: 10px; width:90%; } article, section{ margin: 1.858736%; /* 10px/538px=0.1858736*100=~1.858736 */ } article, section{ float: left; width: 63.197026%; /* 340px/538px=0.631970*100=~63.197026 */ } aside{ float: right; width: 29.638029%; /* 158/538px=0.293680*100=~29.638029 */ } footer{ float:left; width:100%; margin: 1.858736%; /* 10px/538px=0.1858736*100=~1.858736 */ } #wrapper{ background-color:white; }最满意答案
问题是，你正在使用浮动...这意味着你的包装器不计算那些div，所以它坚持唯一不浮动的东西。 解决方案是移除浮子并找到替代品。 希望这可以帮助
The problem is, that you are using float...which means your wrapper doesn't count those divs, so it sticks to the only thing that's not floating. The solution is to remove the floats and find alternatives. hope this helps
更多推荐
发布评论