0

我的网站上有一个简单的导航栏，只使用 HTML 和 CSS。导航栏的外观和功能应有尽有，但图像和实际导航栏之间存在空间。我希望导航栏位于图像的正下方。 

<!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

导航中的无序列表在顶部和底部有 50px 的边距。这就是将您的徽标 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 回答