Problem mit Zentrierung

[donovan]

Hallo zusammen,
für eine Freundin bin ich gerade dabei, eine sehr einfache Homepage zu basteln. Meine Kenntnisse sind nicht die aktuellsten, das gebe ich gern zu, daher mag der Code auch etwas altmodisch aussehen. Hier erst mal die Seite, um die es geht: www.fairykelt.de

Das Problem ist die zentrierte Positionierung des Headers, also dem großen Schriftzug mit der Elfe in der Mitte. Folgende Forderungen sollen erfüllt sein:

1. Das Logo mit der Elfe soll unabhängig von der Bildschirmgröße zentriert dargestellt werden.
2. Die Buttons sollen relativ zu dem Logo so (frei) angeordnet sein, wie es z.Zt. zu sehen ist.

Problem: Bei mittleren Fenstergrößen klappt das. Bei zu großen Fenstern driftet das Bild aber nach rechts weg, und bei zu kleinen (unsinnig kleinen) Fenstergrößen nach links. Außerdem ist es wiederum komplett anders angeordnet, wenn ich auf das Gästebuch gehe.

Meine bisherige Lösung mittels DIVs und CSS sah bisher so aus:

.foto
{
position:absolute;
left:-229px;
top:67px;
} 
.audio
{
position:absolute;
left:202px;
top:51px;
} 
.video
{
position:absolute;
left:256px;
top:252px;
} 
.gb
{
position:absolute;
left:-334px;
top:286px;
} 
.termine
{
position:absolute;
left:140px;
top:310px;
} 
.contact
{
position:absolute;
left:-40px;
top:26px;
} 
.info
{
position:absolute;
left:-394px;
top:41px;
} 
.logo
{
	position:relative;
	left:-430px;
	top:-414px;
	text-align: center;
}

Dummerweise hatte ich - wegen Grafikkartenproblemen - beim ersten Zurechtfummeln der DIVs eine Bildschirmauflösung von maximal 1650 Pixeln breite oder so. Da passte alles. Aber wenn ich auf 1920x1080 gehe, wandert es mir, wie gesagt, nach rechts weg.

Wie kann ich das nun retten, ohne alles komplett neu zu machen. Das sollte eigentlich ein Projekt werden, was nicht ewig dauert.

Freue mich über Eure Antworten :)

 

[scbawik]

Wie kann ich das nun retten, ohne alles komplett neu zu machen.

Alles in einem <div> wrappen und diesem <div> eine fixe Breite zuweisen.
Würde ich trotzdem komplett neu machen.

 

[donovan]

Danke, scbawik, das war die Lösung. Da ich jedoch den linken Rand des <div> auf 50% der Fenstergröße gesetzt hatte, funktioniert das erst dann korrekt, wenn ich die fixe Breite des <div> auf 0px setze. Die zugehörige CSS-Klasse sieht bei mir dann so aus:

.centerdiv
{
   position:absolute;
   left:50%;
   top:0px;
   height:414px;
   width:0px;
}

Damit klappt's :) Oh Freude!