0

背景画像もあり、ヘッダーを画面全体に広げ、ナビゲーションバーをヘッダーに実装したいと思います(ヘッダーの問題でナビゲーションバーを解決しました)。また、ここにあるすべての例を検索して試しましたが、役に立ちませんでした。たとえば、次のように: http://www.projectseven.com/

私のhtmlコードはこれです:

<!DOCtype html>
<html>
<head>
<title>Adventist Youth's Empowerment</title>
<link rel="stylesheet" href="mainstyle.css" text="style/css">
<head>
<div id="header">
<nav>
<nav id="nav_bar_center">
<ul>
    <li><a href="Home.html">Home</a></li>
    <li><a href="Main.html">Main</a></li>
    <li><a href="Aboutus.html">About Us</a></li>
    <li><a href="Contactus.html">Contact US</a></li>
    <li><a href="form.html">Form</a></li>
    <li><a href="Pictures.html">Pictures</a></li>
</ul>
</nav>
</nav>
</div>
</head>

私のcssコードはこれです：

body {
background-repeat:
background-size: 100%;
background-image: url(Images/background%20image5.jpg);
background-position: fixed;
}

#content {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: small-caps;
text-transform: none;
color: #000000;
}
nav {
width: 100%;
height: 33px;
background-image:url(Images/navbar.gif);
background-repeat:repeat;
}
#nav_bar_center {
width: 900px;
margin-left:auto;
margin-right:auto;
}

nav ul{
list-style:none;
}
nav a {
display:inline;
float:left;
text-decoration:none;
color:#FFF;
font:"Times New Roman", Times, serif;
font-size:18px;
font-weight:bold;
line-height: 33px;
padding-left: 25px;
padding-right: 25px;
padding-bottom: 5px;

}
nav a:hover {
background-image:url(Images/navbgr.gif);
height: 28px;
}
#header {
width: 100%;
background-image:url(Images/header.gif);
}
4

1 に答える 1

2

bodyHTML マークアップは無効です。コンテンツをタグでラップしないでください。head代わりに、簡単な名前付き:<body></body>タグを使用して、ページ コンテンツをラップしてください。navまた、要素を別のnavタグでラップしないでください。

あなたが得ていた空白は、ブラウザのデフォルトのスタイリングが適用されたためでした.リセットスタイルシートを使用できます.Eric Mayerの. または、この便利な css ステートメントを使用することもできます。

* {
    margin: 0;
    padding: 0;
}

ページ上のすべての要素を効果的にターゲットにし、マージンとパディングを 0 にします。

HTML の場合は、代わりにセマンティック マークアップを使用する必要があります。

<!DOCtype html>
<html lang="en">
    <head>
        <title>Adventist Youth's Empowerment</title>
        <link rel="stylesheet" href="mainstyle.css" text="style/css">
    </head>
<body>
<header></header>
    <nav>
        <ul>
            <li><a href="Home.html">Home</a></li>
            <li><a href="Main.html">Main</a></li>
            <li><a href="Aboutus.html">About Us</a></li>
            <li><a href="Contactus.html">Contact US</a></li>
            <li><a href="form.html">Form</a></li>
            <li><a href="Pictures.html">Pictures</a></li>
        </ul>
    </nav>
</body>
</html>

ここで、あなたが達成したい効果のために jsFiddle も作成しました: http://jsfiddle.net/5vdgr/

于 2013-11-03T16:59:00.337 に答える