0

http://gyazo.com/17f61b8da9a1dab18c69ef1810920817

body {
    font-family: 'Courier-New', Courier, monospace;
    background-image:url('images/bg.png');
}

p {
    color: #fff;
}

a {
    text-decoration: none;
    color: #fff;
}

a:hover {
    color: #8e00d9;
}

/* Header */

header {
    background: url('images/swirl.png');
    box-shadow: 0px 1px 10px #000;

}

header h1 {
    margin: auto;
    background: url('images/logo.png') no-repeat;
    text-indent: -9999px;
    width: 380px;
    height: 120px;
}

/* Navigation Top */

ヘッダーが伸びない…。

HTML

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>Green Cup Of Tea</title>
    </head>
    <body>
        <header>
            <h1>
                Logo here
            </h1>
            <div id="navtop">
                <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Work</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
                </ul>
            </div>
        </header>
        <div id="content">

        </div>
    </body>
</html>
4

2 に答える 2

0

とを追加するpadding: 0;とmargin: 0;、完全に伸びるはずです。

コードのリセットをお勧めします。これを行う最も簡単な方法は、次のコードを css ファイルの一番上に追加することです。

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

ソース。

于 2012-12-29T01:30:43.970 に答える
0

簡単な修正の提案:

  1. thisまたはthisのいずれかのリセットの使用を検討してください。

  2. そうでない場合は、この CSS を先頭に含めてください。

     * {margin: 0; padding: 0;}
于 2012-12-29T02:02:43.123 に答える