Barierefreies Webdesign

[whatever]

Hii Leute,

Ok mein erster Beitrag hier,
ich will mich heute meinem Problem witmen das ich schon wochenlang vor mir herschiebe,
und zwar,
Ich habe meine Design ohne Tabelle gestaltet also nur mit CSS und mit einer Auflösung von 1280*1024
aber da gibt es diverse Problemchen,
und zwar,
Wenn ich die Auflösung änder z.B auf 1024*768 dann wird das gesamte Design verzehrt dargestellt,
der Text überlagert sich und so weiter.
Genau das gleiche passiert auch wenn ich im Browser hinzoome also die Ansicht von 100% auf 150% oder 250% und so weiter änder.
Und wenn ich das Fenster alos das Browserfenster irgendwie nicht im Vollbild anzeige sondern verkleinert.
Ich weisch schon das typische Problem gibts bei Google auch hunderte Beiträge,
aber ich möchte das ohne Tabellen haben,
Bis jetzt hab ich das immer so gemacht.

Code: Alles auswählen

a.xyz {
            position: absolute;
            left: 20%;
            top: 20%;
            width: xy%;
            height: xy%;
}

Ja ich weiß bis jetzt schon mal,
das ich das position ganz hätte draußen lassen sollen,
aber dann wird alles ja praktisch untereinander angezeigt.
Bitte um freundliche Hilfe.
Danke

[sejuma]

Mit deiner Vermutung bist du auf dem richtigen Weg:
Lass alle absoluten Positionierungen weg (die heißen so, weil sie meist absolut unnötig sind).
Elemente kannst du nebeneinander anordnen, indem du ihnen die Eigenschaft "float: left;" oder "float: right;" gibst.
Für Abstände verwendest du margin-Angaben und schon ist dein Problem gelöst.

[ThomaZ]

Auf positionierung zu verzichten ist zwar eine Möglichkeit, aber nicht die Lösung aller Probleme.
Um eine Webseite Barrierefrei zu gestalten solltest du dich erstmal von angaben in Pixeln und Prozent lösen.

Stattdessen musst du lernen mit em umzugehen. (z.b. width: 10em; )
em kann man am besten so erklären:

1em ist genau soo breit ----> M

Klingt komisch ^^ Ich weiß.

em bezieht sich auf die Schriftgröße die am Browser eingestellt ist und auch auf die dpi-Zahl.
Hier mal ein kleines Beispiel:

Code: Alles auswählen


body {
font-size: 10pt;
}
div[id="test"] {
width: 25em;
}


Dort ist jetzt als Basisschriftgröße 10pt festgelegt. Alles im Body hat nun diese Schriftgröße. Auch wird diese in sämtliche Ebenen vererbt(!) <<--- wichtig, wenn man irgendwo eine andere Größe will!
Durch die Basisschriftgröße ist der Container mit der id 'test' genau so breit wie 25 M's von der Schriftgröße 10pt.

also so breit:
MMMMMMMMMMMMMMMMMMMMMMMMM <--- Das sind 25em

Wenn jetzt aber jemand mit einer sehschwäche kommt und die schriftgröße auf 20pt umstellt, wird die seite ganz genau so angezeigt wie bei dir und mir... nur größer. Die Seite Skaliert sich also mit der schriftgröße, und das überall.

Das wichtigste ist dann, das man sich nicht überwindet eine Mischform zu machen.
Wenn man einmal mit em arbeitet, sollte man dies auf der ganzen Seite bei JEDEM Element machen. Ansonsten wachsen alle Pixelangaben nicht mit, da ein Pixel auch bei größerer Schrift immer noch ein Pixel bleibt!

Ich hoffe ich konnte dir in etwa das vermitteln was du erhofft hattest. Es ist komplex, das gebe ich zu. Ausserdem wirst du auf viele weitere Probleme stoßen wenn du mit em arbeitest. Aber ich versichere dir das es für fast alle Probleme die dir unterkommen eine vernünftige UND konforme Lösung gibt.

Dann mal viel Spaß beim ausprobieren.

MfG

ThomaZ