Richtige Positionen ... mehrere Elementen

Guten Tag.
Hab folgendes Problem mit meiner website http://www.beep-bob.de
Ich wollte in der mitte mein Logo setzen (2. Element) und in den Logo ein Login Bereich ( 2. Element ).
Habe es versucht mit folgendes Code :

#a1 { position:absolute; top:5px; left:20%; width:30%; height:25px;
z-index:1; background-color:transparent; }
#a2 { position:absolute; top:5px; left:50%; width:50%; height:60px;
z-index:2; background-color:transparent; }

Das Klappt zwar alles schön und gut .
Wenn aber ein User kommt mit Auflößung von 1024x648 kommt,verschiebt sich alles.
Ich wollte es so,das jeder User egal mit was er für eine Bildschirmauflößung kommt das alles in der mitte ist und auch richtige Position hat.
Der Login ist nicht nicht das einzelen Problem sondern über dne Logo sollen dann noch Button hin. Hat jemand vorschlag bzw kann mir jemand ein Grundgerüst geben dafür ? (Das für jeden User alles in der Mitte ist und auch richtige Position )
Danke im Vorraus

sejuma,
endlich mal sinnvoller vorschlag.
Aber jetzt ist da sLogin bereich unten

So sieht mein Code aus

#a1 {width: 30%; margin: 5px auto 0 auto; height: 25px;}
z-index:1; background-color:transparent; }
#a2 {width: 10%; margin: 5px auto 0 auto; height: 25px;}
z-index:2; background-color:transparent; }
#a3 {width: 30%; margin: 5px auto 0 auto; height: 25px;}
z-index:2; background-color:transparent; }

A1 kommt ja der Button noch später dazu.
Frames hjab ich verwendet damit der Header überall stimmt auch für Forum und Chat.
Und nun