2015-10-21 191 views
0

我的問題是,我的標題與我的頁面頂部稍微分開,我似乎無法弄清楚爲什麼,它可能非常簡單,但我迷路了。任何人都可以幫助我將它恢復到頁面頂部嗎?在頁面頂部的頁眉間隙

非常感謝。

繼承人的代碼,

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。

回答

1

您可以修復使用...

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

+1

謝謝你<3知道這將是簡單的 –

0

添加header { top: 0; }的CSS

0

出現這種情況的原因主要是因爲bannerposition:fixed的,我認爲有是也固定的一個原因,但如果沒有,你可以刪除,它會也解決你的問題。