Question

这是我正在为学校项目工作的网站。页面是荷兰语，抱歉。 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 &lt;th&gt; 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&copy; 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;
}

Answer 1

问题是，你正在使用浮动...这意味着你的包装器不计算那些div，所以它坚持唯一不浮动的东西。解决方案是移除浮子并找到替代品。希望这有帮助

Answer 2

<div style="clear:both;"></div>

在您想要更改浮动或更改行之前放置该行

Answer 3

如果您检查Chrome中的元素并查看“样式”旁边的“计算”选项卡，则会看到背景重复

repeat-x

覆盖

repeat-y

如果您需要两者重复，只需输入：

background-repeat: repeat;

不能得到一个div来定位我想要的方式

3 个答案: