0

HTML と CSS だけを使用して、Web サイトにシンプルなナビゲーション バーを作成しています。ナビゲーション バーは本来あるべきように見え、機能しますが、画像と実際のナビゲーション バーの間にスペースがあります。ナビゲーションバーを画像のすぐ下に配置したい。 

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>
    CrossFit Villains
    </title>
</head>

<link rel="stylesheet" type="text/css" href="style.css" />

<body>
    <header>
        <span class="title">
            <a href="crossfitvillains.com">CrossFit Villains</a>
        </span>
        <br />
        <span>1702 McAra Street, Regina, SK</span>
        <br />
        <br />
    </header>

    <div id="banner">
        <img src ="banner.jpg" />
    </div>

    <nav>
        <ul id="menu" class="black">
            <li><a href="#">Home</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Daily News</a></li>
            <li><a href="#">Hours</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Class Sign In</a></li>
        </ul>
    </nav>



body {
background-image:url('dark_leather.png');
font-family: arial;
color: white;
margin-left: 15%;
}

.title {
font-size: 90px;
font-family: "Space Ranger";

text-decoration: none;
}

#address {
font-size: 18px;
text-decoration: none;
color: white;
}

#email {
text-decoration: none;
}

a {
text-decoration: none;
color: white;
}

a:hover {
text-decoration: none;
color: grey;
}

#container {
float:left; 
vertical-align: top;
}


.image-section{
float:left;
padding: 0 10px;
}

.cb{
clear: both;
}

.image-title {
padding-left: 50px;
}

footer {
padding-left: 10px;
color: white;
background-color: #333;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
}

#footertext {
margin-left: 15%;
}

#menu {
text-transform: uppercase;
margin: 50px 0;
padding: 0 0 0 10px;
list-style-type: none;
font-size: 13px;
background: #eee;
height: 40px;
width: 1280px;
border-top: 2px solid #eee;
border-left: 2px solid #eee;
border-bottom: 2px solid #ccc;
border-right: 2px solid #ccc;
}

#menu li {
float: left;
margin: 0;
}

#menu li a {
text-decoration: none;
display: block;
padding: 0 20px;
line-height: 40px;
color: #666;
}

#menu li a:hover, #menu li.active a {
background-color: #f5f5f5;
border-bottom: 2px solid #DDD;
color: #999;
}

#menu.black {
border-top: 2px solid #333;
border-left: 2px solid #333;
border-bottom: 2px solid #000;
border-right: 2px solid #000;
background: #333;
}
#menu.black a {
color: #CCC;
}

#menu.black li a:hover, #menu.black li.active a {
color: #999;
background: #555;
border-bottom: 2px solid #444;
}
4

3 に答える 3

1

CSS をリセットする必要があるようです。以下を試してください。

applet, object, iframe,body,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,       address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong,  sub, sup, tt, var,dd, dl, dt, li, ol, ul,fieldset, form, label, legend, caption,img, header,    section {
    margin: 0;
    padding: 0;
    outline:none;
    border: none;
}
于 2013-06-09T19:06:29.923 に答える
1

ナビゲーションの順序付けられていないリストには、上下に 50 ピクセルの余白があります。これが、ロゴ div をナビゲーションから分離しているものです。

#menu {
...
margin: 50px 0;
...
}

下に 50px が必要な場合は、次のように記述します。

margin: 0 0 50px 0;

あるいは単に：

margin-bottom: 50px;

CSS のリセットは必要ありません。それは大砲を使ってメスの仕事をするようなものです。

于 2013-06-09T19:13:23.170 に答える
0

ここで作成した html と css に基づいて jsFiddle を作成しました。

#banner私は書くことによってあなたのdivが持っていた余分なピクセルを殺すことになりました:

#menu { margin: 0; }
#banner { line-height: 0; }

編集: ベンジャミンが上で述べたように、下のマージンを維持したい場合は、次のように書くことができます:

#menu { margin: 0 0 50px 0 }.
// The order of specification is top, right, bottom, left
于 2013-06-09T19:16:20.580 に答える