DIV不显示在页面顶部

我创建了一个基本的布局，并在页面上有2个链接，一个注册和一个登录按钮。DIV不显示在页面顶部

看看我的jsfiddle链接，看看它的外观。有一个黑色的盒子，这将是标志，你会看到绿色和蓝色的盒子，这是我的按钮。

我需要他们在页面的顶部。

不知道我需要做的CSS，使链接坐在非常页面顶部？

HTML：

<div id="accountLinks"> 
<ul> 
<li class="login"><a href="#">Log in</a></li> 
<li class="register"><a href="#">Register</a></li> 
</ul> 
</div>

CSS：

#accountLinks{ 
float: right; 
height:20px; 
width: 170px; 
margin: 0; 
padding: 0; 
} 
#accountLinks ul{ 
list-style-type: none; 
margin: 0; 
padding: 0; 
} 
#accountLinks li{ 
float: left; 
text-align: center; 
} 
#accountLinks .login{ 
background: url(../images/button_login.gif) no-repeat; 
width: 70px; 
height: 20px; 
color: #FFF;  
    } 
#accountLinks .register{ 
background: url(../images/button_register.gif) no-repeat; 
width: 70px; 
height: 20px; 
color: #FFF;  
}

感谢

来源

2011-09-11 Tim

[编辑]现在我明白了这个问题。对不起，还在醒来。 –

您的H1标签是块元素，是推动搁置下来。只需添加float：left; H1的CSS

h1{ 
width: 351px; 
height: 49px; 
background: #000; 
text-indent: -9999px; 
float: left; 
}

款式的链接只有在登录：

#accountLinks .login a { 
    color: #FFF;  
} 
#accountLinks .login a:hover { 
    color: yellow;  
}

来源

2011-09-11 16:18:32 checkenginelight

谢谢，这真是太棒了 - 工作过。对于我忘了提及的页面上的其他内容感到好奇，并不适合我。关于CSS中的#accountLinks .login，如果将其更改为#accountLinks .login a：链接似乎不适用于样式链接。以为这会工作？ – Tim

这应该工作，我认为你想要悬停效果。我已将它添加到我的答案中。 – checkenginelight

完美，谢谢！ – Tim

他们由<h1>Salesboard</h1>下推 - 是否有可能以移动刚刚后的accountLinks div，还是需要留在他们面前的HTML？

如果是这样，那么这应该可以解决accountLinks：

#accountLinks{ 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    height:20px; 
    width: 170px; 
}

看到这个小提琴：http://jsfiddle.net/NZ2T5/

来源

2011-09-11 16:12:07 Joe

这是一个完美的...评论的例子。 –

不是真的，我正在研究CSS，只是让他有一种可能性来思考，而我做到了这一点:)刚刚更新了CSS的帖子。 – Joe

乔，更新它是一个更好的解决方案，同意。然而，只有另一个问题发布答案，最好还是附带评论。 –

你看不到你的链接，因为它们是浮动离开！在您的css风格的销售板下

此外，您的text-intend (9999)是这样的，将不会显示文本。

解决方案 较新的浏览器提供，固定的属性将完全按照它的说法。

添加此"position: fixed;"

#accountLinks{ 
    position: fixed; 
    top: 0px; 
    right: 0px; 
    height:20px; 
    width: 170px; 
} 

#Container{ 
    width:100%; 
}

来源

2011-09-11 16:25:55

我说旁边的ID = “accountLinks” 风格，这将是更容易给你的div包含登录等..定位

<h1>Salesboard</h1> 
<div id="accountLinks" style="margin-top:-45px;"> 
<ul> 
<li class="login"><a href="#">Log in</a></li> 
<li class="register"><a href="#">Register</a></li> 
</ul> 
</div>

来源

2011-09-11 16:33:35 user939222

简单的地方h1在#header的底部。

来源

2011-09-11 16:45:44 simoncereska

DIV不显示在页面顶部

回答

相关问题