Question

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

Answer 1

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