CODEWITHSUNDEEP
htmlcss
Tim
Tim

Reputation: 2649

DIV not displaying at top of page

I've created a basic layout and on the page are 2 links, one register and one login button.

Take a look at my jsfiddle link to see how it looks. There's a black box which will be the logo and you will see the green and blue boxes which are my buttons.

I need them at the top of the page.

http://jsfiddle.net/4EZa5/

Not sure what I need to do to the CSS to make the links sit at the top of the very page?

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;    
 }

Thanks

Upvotes: 1

Views: 2832

Answers (5)

Lorenz Lo Sauer
Lorenz Lo Sauer

Reputation: 24740

You couldn't see your links, because they were floating left! underneath your css-styled Salesboard

Additionally your text-intend (9999) is such that no text will be shown.

Solution Newer browsers offer, the attribute fixed which will do exactly as it says.

Add this "position: fixed;" 

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

#Container{
  width:100%;
}

Upvotes: 0

simoncereska
simoncereska

Reputation: 3043

Simply place h1 at the bottom of #header.

Upvotes: 0

checkenginelight
checkenginelight

Reputation: 1156

Your H1 tag is a block element and is pushing the rest down. Just add float: left; to h1 css

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

To style the link only in login:

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

Upvotes: 1

user939222
user939222

Reputation: 17

I added a style next to the id="accountLinks" this will be easier to position you div which contains the login etc..

<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>

Upvotes: 0

Joe
Joe

Reputation: 15812

They're being pushed down by the <h1>Salesboard</h1> - is it possible to move that to just after the accountLinks div, or does that need to stay before them in the HTML?

If so, then this should fix the accountLinks:

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

See this fiddle: http://jsfiddle.net/NZ2T5/

Upvotes: 0

Related Questions