CSS在不使用负值的情况下定位于顶部

时间：2014-04-01 22:58:53

标签： html css margin padding

这可能是非常简单的事情，但我不知道怎么做而不使用像负值的填充顶部这样的东西，我的网站看起来像：

http://funedit.com/imgedit/soubory/small_9858499121396392876.jpg

我的CSS是：

.center {
  width: 1030px;
  margin: 0 auto;
}
.top-panel {
  background-image: url("images/top_panel.png");
  background-repeat: repeat-x;
  background-position: center;
  height: 43px;
  padding-top:5px;
}
a.top-button{
  background: url("images/top_button.png");
  height: 37px;
  width: 141px;
  background-repeat: no-repeat;
  display: block; 
}
.text {
  color: #9c9c9c;
  padding: 0px 160px;
  line-height: 43px;
  position: relative;
}
.panel {
    color: #6ab1ed;
}

和我的HTML：

<body>
  <div class="top-panel">
  <div class="center"> 
  <a class="top-button" href="#"></a>
  <div class="text">Prave hraje 5000 hracov na 150 serveroch!
  <div class="panel">Registruj sa zdarma nebo</div></div>
  </div>
  </div>  
</body>

有人真的可以简单地解释一下我该怎么办？

2 个答案:

答案 0 :(得分：0)

我认为你只是在不需要的地方搞乱不同的HTML元素。 试试这个：

CSS：

.top-panel {
  position: relative;
  background-image: url("images/top_panel.png");
  background-repeat: repeat-x;
  background-position: center;
  height: 43px;
  padding-top:5px;
}
a.top-button{
    float: left;
  background: url("images/top_button.png");
  height: 37px;
  width: 141px;
  background-repeat: no-repeat;
  display: block; 
}
.text {
  position: inline;
  color: #9c9c9c;
  position: relative;
}
.panel {
    position: inline;
    color: #6ab1ed;
}

HTML：

<body>
<div class="top-panel">
    <div class="center"> 
        <a class="top-button" href="#"></a>
        <p><span class="text">Prave hraje 5000 hracov na 150 serveroch!</span><br/>
        <span class="panel">Registruj sa zdarma nebo</span></p>
    </div>
</div>
</body>

答案 1 :(得分：-1)

尝试

.top-panel {
     position:absolute; //or 'fixed' if you want it to stay there on scroll
     top:0; 
     left:1%; 
    right:1%;
}
相关问题
最新问题