无法破坏布局，无法让我的标题与页面顶部齐平

时间：2017-02-14 23:55:48

标签： html css layout header 

/*==================this is the part that is causing me headaches, I can't get the Header to stay flush with the top without losing the layout*/

header {
  background-image: url("images/song.png");
  background-color: #00020e;
  height: 210px;
  width: 1050px;
  margin: auto;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  top: 180;
  width: 100%;
  height: 40px;
}
li {
  float: left;
}
li a {
  display: block;
  color: #620000;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-family: 'oswald', sans-serif;
  font-weight: 600;
}
li a:hover {
  color: white;
}
li a:active {
  color: white;
}
body {
  background-image: url(images/v_bkgd.png);
  Background-repeat: no-repeat;
  background-position: center;
  background-color: #00020e;
}
P {
  font-family: 'roboto condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
}
#logo {
  float: left;
  padding: 5px 30px;
}
#nav_title {
  color: #620000;
  height: 170px;
  line-height: 170px;
}
#nav_title p {
  display: inline;
  font-size: 36px;
  font-family: 'oswald', sans-serif;
}
section {
  width: 700px;
  background-color: #d1d1d1;
  height: 600px;
  float: left
}
aside {
  width: 300px;
  background-color: #d1d1d1;
  height: 600px;
  float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
  </style>
  <!-- Index.html -->
  <meta charset="UTF-8">
  <link rel="stylesheet" href="stylesheet.css" />

  <title>Lilydale Football Club</title>
</head>

<body>
  <header>
    <div id="fixed_header">
      <a id="logo" href="index.html">
        <img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
      </a>
      <div id="nav_title">
        <p style="font-weight:400;">LILYDALE</p>
        <p style="font-weight:200;">FOOTBALL CLUB</p>
      </div>
      <nav>
        <ul>
          <li> <a href="index.html">Home</a> 
          </li>
          <li> <a href="history.html">History</a> 
          </li>
          <li> <a href="players.html">Players</a> 
          </li>
          <li> <a href="sponsors.html">Sponsors</a> 
          </li>
          <li> <a href="news.html">News</a> 
          </li>
          <li> <a href="contact.html">Contact</a> 
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <div id="content">
    <section></section>
    <aside></aside>
  </div>


</body>

</html>
所以基本上，我似乎无法将页眉与页面顶部齐平。我可以看到标题后面顶部的背景图像，我不希望这样。我对这一切都很陌生，这是我第一次尝试编写网站。

Here is a screenshot

2 个答案:

答案 0 :(得分：0)

这里存在一个小差距的原因是因为许多浏览器中的标准元素样式包括padding和margin等内容的自动值。在开始新项目时，为所有元素初始化这些CSS值是个好主意。

详细了解CSS重置here。

向padding:0添加margin:0和body即可解决问题。我更改了标题的样式，以更好地说明它现在确实与页面顶部齐平。您的徽标和页面顶部之间仍然存在小的差距，但是因为徽标上有填充。

/*==================this is the part that is causing me headaches, I can't get the Header tostay flush with the top without losing the layout it self*/

header {
  background-image: url("images/song.png");
  background-color: white;
  border:1px solid red;
  height: 210px;
  width: 1050px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  top: 180;
  width: 100%;
  height: 40px;
}
li {
  float: left;
}
li a {
  display: block;
  color: #620000;
  text-align: center;
  padding: 10px 10px;
  text-decoration: none;
  font-family: 'oswald', sans-serif;
  font-weight: 600;
}
li a:hover {
  color: white;
}
li a:active {
  color: white;
}
body {
  padding:0;
  margin:0;
  background-image: url(images/v_bkgd.png);
  Background-repeat: no-repeat;
  background-position: center;
  background-color: #00020e;
}
P {
  font-family: 'roboto condensed', sans-serif;
  font-size: 16px;
  font-weight: 400;
}
#logo {
  float: left;
  padding: 5px 30px;
}
#nav_title {
  color: #620000;
  height: 170px;
  line-height: 170px;
}
#nav_title p {
  display: inline;
  font-size: 36px;
  font-family: 'oswald', sans-serif;
}
section {
  width: 700px;
  background-color: #d1d1d1;
  height: 600px;
  float: left
}
aside {
  width: 300px;
  background-color: #d1d1d1;
  height: 600px;
  float: left;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    @import url('https://fonts.googleapis.com/css?family=Oswald:200,400,600|Roboto+Condensed:400,400i,700');
  </style>
  <!-- Index.html -->
  <meta charset="UTF-8">
  <link rel="stylesheet" href="stylesheet.css" />

  <title>Lilydale Football Club</title>
</head>

<body>
  <header>
    <div id="fixed_header">
      <a id="logo" href="index.html">
        <img src="images/logo.png" alt="Lilydale Demons Logo" width="142" height="150" class="align-center" />
      </a>
      <div id="nav_title">
        <p style="font-weight:400;">LILYDALE</p>
        <p style="font-weight:200;">FOOTBALL CLUB</p>
      </div>
      <nav>
        <ul>
          <li> <a href="index.html">Home</a> 
          </li>
          <li> <a href="history.html">History</a> 
          </li>
          <li> <a href="players.html">Players</a> 
          </li>
          <li> <a href="sponsors.html">Sponsors</a> 
          </li>
          <li> <a href="news.html">News</a> 
          </li>
          <li> <a href="contact.html">Contact</a> 
          </li>
        </ul>
      </nav>
    </div>
  </header>

  <div id="content">
    <section></section>
    <aside></aside>
  </div>


</body>

</html>

答案 1 :(得分：0)

在CSS文件的顶部写下以下内容（在任何其他代码之前）

*
{
  margin:0;
  padding:0;
}

每个浏览器都有一些默认的填充和边距。通过在css文件的顶部写上面的行，你会说每个元素（用*表示）在页面加载时应该有边距和填充为0。我希望这有帮助

相关问题
最新问题