seitliche Navigation

Hallo,

ich möchte mir gerne eine seitliche Navigation in meine Webseite einbinden nur habe ich dabei ein paar schwierigkeiten. Hier erstmal das was verbaut werden soll http://www.ohne-css.gehts-gar.net/demo/0024a.html . Das ganze habe ich nun versucht bei mir einzubauen in dem ich den Teil:

<div id="navi">
 
 <ul>
 <li><a class="home" href="#"></a></li>
 <li><a class="about" href="#"></a></li>
 <li><a class="contact" href="#"></a></li>
 </ul>
 
 </div><!--Ende navi-->

in die header.php geschrieben habe.

Dann habe ich den Teil in die stylesheet.css geschrieben.

#navi
{
float: right;
width: 35px;
margin-top: 0px;
}


#navi ul
{
margin: 0;
padding: 0;
list-style-type: none;
}


#navi li
{
margin-top: 25px;
}


#navi a
{
display: block;
width: 200px;
height: 255px;
}


.home
{
background: url(/blog1/pics/content/button1.png);
background-position: -80px 0;
background-repeat: no-repeat;
}


.about
{
background: url(/blog1/pics/content/button2.png);
background-position: -80px 0;
background-repeat: no-repeat;
}


.contact
{
background: url(/blog1/pics/content/button3.png);
background-position: -80px 0;
background-repeat: no-repeat;
}


a.home:hover, a.about:hover, a.contact:hover
{
background-position: 0 0;
}

Hier nun mein Ergebniss:

Auflösung 1920 x 1080p

http://www.abload.de/img/gut0mdy.jpg

Auflösung 1024 x 768p

http://www.abload.de/img/schlechtlmuu.jpg

Meine Frage ist also

-warum man bei einer kleineren Auflösung seitliche scrollen kann und wie ich des abstelle

-wie kann ich verhindern das sich dieses Menü beim scrollen des Content mitbewegt.

Das Hintergrundbild habe ich mit background-attachment: fixed; fixiert.