html - 页面顶部的页眉间隙

标签 html css header

我的问题是我的标题与页面顶部稍微分开,我似乎无法弄清楚为什么,它可能真的很简单,但我迷路了。谁能帮我让它回到页面顶部?

非常感谢。

这是代码,

HTML:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stepps</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>

    <div class="container">

        <header>
            <img src="images/logo.png">


            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Members</a></li>
                    <li><a href="#">Productions</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="#">Tickets</a></li>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </nav>
        </header>

        <div id="banner">


        </div>

        <div id="content">
            <p>Bacon ipsum dolor amet pastrami tail pork, cupim pig porchetta swine pork chop leberkas flank sausage beef ribs. Bresaola venison andouille fatback capicola kevin. Pancetta ham meatball venison cupim rump, drumstick beef picanha turkey. Chicken filet mignon hamburger strip steak venison, doner cow beef ribs boudin brisket salami landjaeger biltong ham shankle. Filet mignon doner kevin, spare ribs cupim corned beef porchetta hamburger drumstick leberkas. Frankfurter pastrami sirloin jerky rump sausage ball tip strip steak landjaeger jowl ground round chuck cow kielbasa hamburger. Turducken bacon alcatra bresaola ball tip meatloaf.

Ham chicken shankle bresaola. Bresaola swine andouille kielbasa, short ribs filet mignon pastrami boudin pork loin jerky turducken ham hock. Meatloaf salami prosciutto, bresaola tail jerky alcatra filet mignon rump. Alcatra shankle boudin pork belly, pork kielbasa ball tip sirloin brisket bresaola turducken tenderloin. Salami shoulder corned beef strip steak, spare ribs fatback drumstick tenderloin. Chuck prosciutto andouille, tongue frankfurter capicola venison tri-tip shank kielbasa chicken.

Ground round tri-tip shoulder, pig turkey doner andouille turducken corned beef jowl leberkas sausage biltong picanha. Leberkas chuck strip steak, beef beef ribs bresaola ribeye short ribs meatloaf pastrami pig corned beef drumstick. Kevin andouille swine corned beef beef frankfurter cupim capicola flank porchetta alcatra chuck. Pork belly tri-tip chuck jowl, beef drumstick brisket cupim andouille turkey sirloin strip steak tongue. Pork loin tenderloin sausage, meatball meatloaf pastrami chicken short loin turducken biltong jerky t-bone landjaeger tri-tip rump. Meatloaf sausage salami t-bone leberkas capicola flank ham hock pork belly pork chop. Pork beef hamburger salami fatback biltong alcatra ham drumstick filet mignon tri-tip.</p>
        </div>

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

CSS:

body {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Helvetica';
    background-color: #E6E6E6;
}


header {
    margin: 0;
    padding: 0;
    border: 0;
    height: 110px;
    width: 100%;
    position: fixed;
    background-color: #a43131;
    z-index: 99;
}

header img {
    display: block;
    height: 100px;
    position: relative;
    left: 55%;
    margin-left: -100px;
    padding-top: 5px;
    padding-bottom: 5px;

}




/*navigation */
nav {
    background-color: #7c2828;
    margin: 0;
    font-size: 15px;
    text-align: center;
}

nav ul {
    margin: 0;
    padding: 0;
    display: inline-block;
}

nav ul li {
    /* allows to arrange list items in a row without float */
    display: inline-block;
    list-style-type: none;
}

/* first level items style */
nav > ul > li > a {
    color: #fff;
    background-color: #7c2828;
    display: block;
    line-height: 2em;
    padding: 0.5em 0.5em;
    text-decoration: none;

}


nav > ul > li > a:hover {
    color: #fff;
    background-color: #a43131;
    display: block;
    line-height: 2em;
    padding: 0.5em 0.5em;
    text-decoration: none;
    transition: 0.5s;

}

/* navigation end */


#banner {
    width: 100%;
    height: 800px;
    position: fixed;
    top: 110px;

    background-image:url(images/headerimage.jpg);
    background-size: cover;
}


#content {
    width: 100%;
    position: relative;
    top: 910px;
    background: #e6e6e6;
    height: 1500px;
}

这个论坛有点新,所以对格式不正确的帖子表示歉意,希望你能成功,我非常感谢任何帮助,非常感谢。

jack 。

最佳答案

您可以使用...修复该问题

top: 0;

因为您在该元素上使用固定位置。

header {
    margin: 0;
    padding: 0;
    border: 0;
    height: 110px;
    width: 100%;
    position: fixed;
    top: 0;
    background-color: #a43131;
    z-index: 99;
}

查看in action on JSFiddle .

关于html - 页面顶部的页眉间隙,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33266048/

相关文章:

javascript - 如何在发生图像更改事件时显示加载图标。 (没有 jQuery)

css - Smartadmin、Bootstrap 3 buttons with span 有死点。不触发事件

html - 打字机效果,光标移至屏幕末尾然后自行修复

c# - 如何在 SOAP header 中声明命名空间前缀

javascript - 使 iframe 适合其内容高度

html - CSS Transition 和另一个 div 内的 div 表现得很疯狂

html - 无法让我的标题和主要样式正确

css - 将页脚固定在页面底部,并在顶部固定导航

javascript - javascript 代码应该始终加载在 html 文档的头部吗?

javascript - 是否可以从外部样式表而不是计算的样式表中获取 dom 元素的特定 css 属性的值?