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不顯示在頁面頂部

回答

相關問題