CSS: relative Positionierung von der Mitte aus

[SirNoname]

Einen wunderschönen Guten Morgen!!

Ich habe folgendes Problem:
Auf meiner page ( http://www.sirnonamesplace.de ) habe ich auf dem index ein Hintergrundbild, auf dem Buttons als Menu postitioniert sind. Das Hintergrundbild an sich ist absolut ausgerichtet, ebenso wie die Buttons darauf (alles jpegs). Das sieht gut aus, bei der Auflösung, bei der es entwickelt wurde. Verkleinert man diese allerdings, bleibt logischerweise die absolute Positionierung der Elemente beibehalten, und man muss horizontal scrollen. Das ist natürlich unannehmbar.

Meine Idee zur Lösung des Problems:
Ich richte das Hintergrund-jpeg horizontal zentriert aus. Der Bezugspunkt ist also die der horizontale CENTER. Vertikal lasse ich einen bestimmten Wert.
Die Buttons richte ich (horizontal) ebenfalls CENTER+x aus, wobei x eine bestimmte Pixelmenge ist. Vertikal belasse ich absolute Angaben.

Kurz: Horizontal wird alles am CENTER + x ausgerichtet, vertikal absolut (also nur x).

Wie geht das? Ich habe mich durch die Referenzen gekämpft, aber es geht anscheinend nur absolute Positionierung Sad
JS und sonstige scripts will ich nicht anwenden, da geht mir die Barrierefreiheit verloren.

Danke und einen schönen Tag wünsche ich euch!!

[Boris]

da geht mir die Barrierefreiheit verloren

Deine Website ist sowieso Null barrierefrei ... und was glaubst du, wieviele User es gibt, die ihr Browserfenster auf 1280x1024 maximiert haben, nur um alles ohne scrollen erkennen zu können?

Du kannst das Bild doch simpel mit CSS zentrieren:

html, body
{
height: 100%;
}

body
{
background: url(deinbild.jpg) 50% 50% no-repeat;
}

So ist es *immer* in der Mitte, egal wie groß das Browserfenster ist. Ich kann dich nur empfehlen, Finger weg von absoluter Positionierung in dieser Art.

[SirNoname]

Ich weiß doch, wie ich ein Bild mittig zentriert ausrichten kann, das ist doch aber nicht mein Problem!
Ich will die Postition Mitte+x , um dort ein Bild zu positionieren. Wenn ich alle Bilder mittig zentriere, hab ich die Buttons "menus" alle untereinander in der Mitte, was ich nicht will.
Und das mit der Barrierefreiheit: Genau das ist es doch!! Ich will den index so gestalten, dass er mit den gängigen Auflösungen einsehbar ist.

[321]

Dann richte ein DIV auf diese Dir bekannte Art centered aus, packe Deine Buttons rein, die mittels Margin den Abstand zueinander haben.

Das Hintergrundbild bindest Du als Hintergrund/Background ein mit repeat-no und mit center.

Für beide eine absolute Positionierung von OBEN ist vertretbar.

So sollte das gehn, fürn Sample bin ich heut zu faul

[SirNoname]

OK ... ich hab`s

Ich hab einfach einen div mittig ausgerichtet, und alle Buttons in diesen Container gepackt, relativ zu ihm (und damit zur Mitte) positioniert.

Genauer beschrieben findet man das hier:

http://www.sirnonamesplace.de/htmls/tutorials.htm


Danke für eure Hilfe!!