固定位置標題重疊

好吧，所以我有兩個問題。一種是每當我嘗試做位置：固定;在.header上它爲頭部的底部增加了空間，並且它使.main-content位於頭部的後面，並且在頭部的頂部添加了邊距。另一個問題是，每當我沒有固定的位置時，標題和主要內容之間就有空間，並且由於某種原因，如果我在主要內容上放置邊框，空間不在那裏。我查看並查看了我的代碼，試圖找出它有什麼問題，我似乎無法找到任何東西。感謝您的幫助！固定位置標題重疊

/*********************************** 
 
      LOGO 
 
***********************************/ 
 
.header{ 
 
background-color: skyblue; 
 
margin:0; 
 
padding:0; 
 
width: 100%; 
 
} 
 
.logo{ 
 
text-align: left; 
 
display: block; 
 
margin:0 15px 0px 15px; 
 
} 
 
#logo-large{ 
 
display: inline; 
 
font-size: 3em; 
 
font-weight: 200%; 
 
font-family: 'Dosis' , sans-serif; 
 
} 
 
#logo-small{ 
 
display: inline; 
 
font-weight:0; 
 
font-size: 2.5em; 
 
font-family: 'Dosis' ,sans-serif; 
 
} 
 
/************************************ 
 
      NAVIGATION 
 
************************************/ 
 
nav ul{ 
 
list-style-type:none; 
 
/****display: block; 
 
padding: 5px; 
 
margin: 5px; 
 
text-align: center;****/ 
 
} 
 
nav{ 
 
display:inline; 
 
float: right; 
 
} 
 
nav ul li{ 
 
display: inline-block; 
 
padding: 5px 0px; 
 
margin: 0; 
 
} 
 
nav ul li a{ 
 
text-decoration: none; 
 
padding:20px 12px 12px 12px; 
 
color:black; 
 
font-family: 'Muli', sans-serif; 
 
font-size: 1.25em; 
 
} 
 
nav ul li a:active, nav ul li a:hover{ 
 
background-color: deepskyblue; 
 
color: white; 
 
} 
 
/************************************* 
 
      main content 
 
*************************************/ 
 
.main-content{ 
 
background-color: grey; 
 
font-family: 'Muli', sans-serif; 
 
margin:0; 
 
padding:10px; 
 
border: 1px solid black; 
 
} 
 
body{ 
 
margin:0; 
 
padding:0; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>FatHead | Blog</title> 
 
<link href='http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400italic' rel='stylesheet' type='text/css'> 
 
<link rel="stylesheet" href="css/style.css" type="text/css"> 
 
</head> 
 
<body> 
 
<div class="header"> 
 
    <div class="logo"> 
 
     <h1 id="logo-large">FAT</h1> <h1 id="logo-small">HEAD</h1> 
 
     <nav> 
 
     <ul> 
 
      <li><a href="index.html">Home</a></li> 
 
      <li><a href="#">About</a></li> 
 
      <li><a href="#">Contact</a></li> 
 
      <li><a href="#">Categories</a></li> 
 
     </ul> 
 
     </nav> 
 
    </div> 
 
</div> 
 
<div class="main-content"> 
 
    <h1>Welcome to my blog!</h1> 
 
    <p>This would be where all the content inside the blog post goes.</p> 
 
</div> 
 
</body>  
 
</html>

來源

2015-07-13 Gadawg099

作爲這樣http://jsfiddle.net/rohitmalikazad/y5L3qqaa/ –

是的，就像那樣。你做了什麼來修復它，只是增加邊緣到身體的頂部？ – Gadawg099

no body define {padding-top：65px;} ... –

現在只需添加到這個CSS定義.headerposition :fixed並定義bodypadding-top:65px;

.header{ 
     position: fixed; 
     left:0; 
     right:0; 
     top:0; 
    } 
    html body { 
    padding-top: 65px; 
    }

來源

2015-07-13 07:28:33

固定位置標題重疊

回答

相關問題