Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Elastische Layouts: Mitskalieren von Background-Grafiken möglich?“

prevision

Noch nicht viel geschrieben

Grüß euch,

Wie der Titel schon sagt, hab ich eine wichtige Frage zu elastischen Layouts.
Im Moment arbeite ich mich gerade ein wenig in barrierefreies Webdesign ein. Und dieses Thema umschließt natürlich auch das Erstellen von elastischen Layouts, sodass es dem Benutzer möglich ist, die Seite per Schriftgrad zu vergrößern, ohne dass das eigentliche Design/Layout der Seite dabei zerschossen wird. Wie den meisten bekannt sein dürfte, ist das Maß aller Dinge hierbei wortwörtlich die Angabe von relativen "em"-Werten.

Ich bin gerade am Layouten eines neuen Wordpress-Templates für meinen kommenden Blog. Und diesen würd ich eben gerne elastisch designen. Mir ist klar, dass durch die relative Vergrößerung der Seite über den Schriftgrad seitens des Benutzers die Grafiken verlustbehaftet (durchs Vergrößern) angezeigt werden. Dies ist aber verschmerzbar, in Anbetracht der Tatsache, dass das grundlegende Layout dabei vollständig erhalten bleibt.

Der eigentliche Punkt an der Sache ist jetzt aber folgender: Im Template verwende ich sehr viele Designelemente, die mittels background-image in absoluten und relativen DIVs positioniert sind. Beim Vergrößern des Schriftgrades im Browser "wachsen" alle Container brav und vor allem korrekt mit, die Hintergrundgrafiken in den DIVs bleiben davon aber unangetastet in der Originalgröße. Somit wird das Design wieder "zerschossen".
Also hab ich mich via Google ein wenig schlau gemacht, ob und wie man Hintergrundgrafiken in elastischen Layouts mit der Schriftgröße mitskalieren lassen kann - die gefundenen "Antworten" fielen zu 100% negativ aus: nicht möglich;

Nun meine Frage: Wie geht ihr hier vor? Gibt's vielleicht doch eine Möglichkeit, die Hintergrundgrafiken mitskalieren zu lassen?
Oder in dem Fall eher bei einem fixen Layout bleiben und die Barrierefreiheit außen vor lassen (was aber eigentlich nicht in meinem Sinne ist)?
Schade wär's, weil ich meine neue Seite auf die aktuellsten Standards und eben auch auf Barrierefreiheit anpassen will/wollte.

Bin gespannt auf eure Antworten :D
Danke und beste Grüße
 

d34th

Clan-Designer

AW: Elastische Layouts: Mitskalieren von Background-Grafiken möglich?

Zu meiner Verwunderung hab ich letztens festgestellt, dass zumindest der neue Firefox nahezu alle Webseiten (dieses Forum zählt nun gerade nicht dazu ^^) nahezu ohne Probleme vergrößern kann und dabei auch vor Grafiken nicht halt macht.
Einfach mal ausprobieren z.B.

Frankfurter Rundschau - Nachrichten

Langenscheidt: Wörterbücher, Lehrwerke, Übersetzungssoftware, Selbstlernen
uvm (auch viele Seiten, die sicherlich nicht extra dafür optinmiert worden sind)

Das war vor 2 Jahren noch nicht der Fall, aber das nützt dir natürlich herzlich wenig denn im IE dürfte das Ganze wahrscheinlich ganz anders aussehen :)
 

prevision

Noch nicht viel geschrieben

AW: Elastische Layouts: Mitskalieren von Background-Grafiken möglich?

Danke erstmal für die raschen Antworten :D

backgroundgrafiken in div containern kannst du überdimensionieren. dann platzierst du die mit TOP LEFT und der überstehende teil wird rechts vom div abgeschnitten. wird der div container größer, wird auch mehr von der grafik angezeigt...:)

Wäre eine Möglichkeit ;) Allerdings gibts dann wiederum Grafiken, die jederzeit ein "fixes Aussehen" haben müssen (bspw. ein Rechteck mit abgerundeten Ecken oder das Logo der Seite). Bei Background-Grafiken, die sich wiederholen, wärs hingegen aber kein Problem.

Zu meiner Verwunderung hab ich letztens festgestellt, dass zumindest der neue Firefox nahezu alle Webseiten (dieses Forum zählt nun gerade nicht dazu ^^) nahezu ohne Probleme vergrößern kann und dabei auch vor Grafiken nicht halt macht.

Das war vor 2 Jahren noch nicht der Fall, aber das nützt dir natürlich herzlich wenig denn im IE dürfte das Ganze wahrscheinlich ganz anders aussehen :)

Der neue Firefox vergrößert standardmäßig wie Opera: er zoomt. Allerdings nicht den Schriftgrad, sondern die ganze Seite. Das halte ich für ein gutes Feature, das meiner Meinung nach jeder Browser unterstützen sollte. Da die meisten Browser aber lediglich eine Vergrößerung des Schriftgrades zulassen, muss man, um beim Vergrößern das Layout beibehalten zu können, auf elastische Layouts zurückgreifen ;).

Die Zoomeinstellung bei Firefox (3) kann man übrigens wie folgt auf den Schriftgrad reduzieren: Ansicht/Zoom/Nur Text zoomen :)

Grüße
 

Top_Gun

Aktives Mitglied

AW: Elastische Layouts: Mitskalieren von Background-Grafiken möglich?

Ähm, ich denke einfach mal laut:
mit html und css das ganze elastisch zu bekommen wird schwer, aber du könntest über ein pseudo-formular (auf der website nur ein + und - button) die schrift- und bildgrößen in der css datei verändern...

bzw du könntest die bilder in verschiedenen zoomstufen schon auf dem webspace liegen haben (dazu natürlich auch css dateien) und dann nur über das pseudo-formular die verschieden css dateien einbinden...

du könntest mit PHP das ähnlich gestalten, alternativ könntest du aber auch einen pseudo cache auf dem server anlegen in das die bilder über eine funktion in der passenden größe neu geschrieben werden, das ganze würde ich prozentual abhängig machen und alles nach ner bestimmten zeit wieder löschen...

kA das waren so meine Gedanken...
 

Llynyania

Benutzertitel aberkannt

AW: Elastische Layouts: Mitskalieren von Background-Grafiken möglich?

Bei runden Ecken fällt mir nur ein, die lassen sich auch mit css gestalten, wie sich das dann aber verhält beim "zoomen" weiß ich nicht. Beim Logo der Seite hab ichs immer so gemacht, dass links oder rechts die divs halt unauffällig größer wurden. Keine Ahnung ob das bei Dir klappt, man müßt mal was sehen. ;0)

VG Llyn
 

prevision

Noch nicht viel geschrieben

AW: Elastische Layouts: Mitskalieren von Background-Grafiken möglich?

Bei runden Ecken fällt mir nur ein, die lassen sich auch mit css gestalten, wie sich das dann aber verhält beim "zoomen" weiß ich nicht. Beim Logo der Seite hab ichs immer so gemacht, dass links oder rechts die divs halt unauffällig größer wurden. Keine Ahnung ob das bei Dir klappt, man müßt mal was sehen. ;0)

VG Llyn

Hast recht :) Abgerundete Ecken wären tatsächlich möglich...war ein schlecht gewähltes Beispiel^^
Naja, mein Designentwurf ist bei weitem noch nicht fertig, ich hab erstmal theoretisch nachgeforscht und hier nachgefragt wie im Fall des Falles zu verfahren wäre :D
Jedenfalls wird das endgültige Design aber viele grafische Elemente aufweisen, wodurch das Layout durchaus etwas komplexer werden dürfte.

Da "normal" platzierte Grafiken schön mitskalieren und ich über den meisten Designelemente eh keinen weiteren Layer drüber haben werden, werd ich erstmal ein paar Versuche starten, einige Grafiken direkt zu platzieren (mittels <img>-Tag), auch wenn ich weiß, dass das Ganze nicht ideal ist. Aber ist eben erstmal versuchsweise.

Wenn dann endlich mal CSS3 fertig definiert wäre und die Browser beginnen würden, das Ganze auch noch zu unterstützen, wird wohl diese Eigenschaft recht interessant und hilfreich :D:
CSS3 module: Backgrounds
Damit dürfte mein Problem dann wohl gelöst sein...allerdings werden bis dahin wohl noch ein paar Jährchen ins Land ziehen..., leider :( :D
 

LarsVern

Noch nicht viel geschrieben

AW: Elastische Layouts: Mitskalieren von Background-Grafiken möglich?

Hi,

die Größenangabe mit 'em' bedeutet nur, dass ausgehend von der Systemeinstellung eine Größe bestimmt wird.

Beispielsweise Schrift: In jedem Browser kann man bestimmen wie groß die eigene Schrift sein soll. Dass man im System auch noch große Schriftarten auswählen kann lasse ich mal aussen vor.

Nun ist es aber so, dass Bildschirme und Systeme unterschiedliche Grundvoraussetzungen mitbringen. Ein Linux System arbeitet mit anderen Auflösungen als Windows, ganz anders nochmal MAC. So dass die Schriften mal 11 und mal 16 Pixel als Mindestgröße in der Browserdarstellung mitbringen.

Mit 'em' wird nun ein Wert relativ zu diesen Angaben eine Schrift dargestellt. Das ist vom Prinzip her die elasitsche Lösung die du im Auge hast.

Die Angabe 'em' birgt im CSS aber Probleme mit, vererbt sich z.B. durch Verschachtelung von DIVs ein 'em'-Wert, so verändern sich die Schrift erneut, also bei Listen (gerne für Navigation mit mehreren Ebenen verwendet) kann es dazu führen, dass die Unterpunkte 'unkontrolliert' schrumpfen oder wachsen.

Eine weitere Falle ist die Verwendung mit extremeren Werten, das könnte dazu führen, dass Inhalte gar nicht mehr lesbar sind.

Und als ich mit FireFox neulich auf ZDF.de - Startseite unterwegs war wurde mir alles super klein angezeigt, es überlappte sich teilweise. Es lag daran, dass beim ZDF eben genau em verwendet wurde und ich eine sehr kleine Schriftart als kleinste Schriftart im Firefox eingestellt hatte.

Mittlerweile haben die meisten - wenn nicht sogar alle - Browser über Strg. '+' oder Apfel '+' bzw. Strg. '-' oder Apfel '-' die Möglichkeit die Inhalte insgesamt zu zoomen. Eine Funktion die z.B. bei Opera schon seit Jahren möglich ist.

Ich würde sagen Barierrefreiheit nicht mit Idealismus verwechseln.

Gruss

Lars
 

prevision

Noch nicht viel geschrieben

AW: Elastische Layouts: Mitskalieren von Background-Grafiken möglich?

Hi,

die Größenangabe mit 'em' bedeutet nur, dass ausgehend von der Systemeinstellung eine Größe bestimmt wird.

Beispielsweise Schrift: In jedem Browser kann man bestimmen wie groß die eigene Schrift sein soll. Dass man im System auch noch große Schriftarten auswählen kann lasse ich mal aussen vor.

Nun ist es aber so, dass Bildschirme und Systeme unterschiedliche Grundvoraussetzungen mitbringen. Ein Linux System arbeitet mit anderen Auflösungen als Windows, ganz anders nochmal MAC. So dass die Schriften mal 11 und mal 16 Pixel als Mindestgröße in der Browserdarstellung mitbringen.
Die Angabe 'em' birgt im CSS aber Probleme mit, vererbt sich z.B. durch Verschachtelung von DIVs ein 'em'-Wert, so verändern sich die Schrift erneut, also bei Listen (gerne für Navigation mit mehreren Ebenen verwendet) kann es dazu führen, dass die Unterpunkte 'unkontrolliert' schrumpfen oder wachsen.

Da geb ich dir vollkommen recht. Die unterschiedlichen Systeme sind durchaus ein Problem, leider. Die Windowsbrowser haben, so durfte ich lesen, mittlerweile alle als Standard 16px im Schriftgrad. Wenn ich im CSS-Body also font-size: 0.625em; festlege (entspricht bei 16px dann 10px Standard-Schriftgrad, kann man damit schön rechnen ;)
Und ein Kindelement erbt den Schriftgrad immer von seinem Elternelement - daher find' ich das Ganze auch recht simpel zu realisieren :D

Mittlerweile haben die meisten - wenn nicht sogar alle - Browser über Strg. '+' oder Apfel '+' bzw. Strg. '-' oder Apfel '-' die Möglichkeit die Inhalte insgesamt zu zoomen. Eine Funktion die z.B. bei Opera schon seit Jahren möglich ist.


Wäre traumhaft, wenn das alle aktuellen Browser schön könnten, dann bräucht ich mir jetzt nicht soviele Gedanken darum machen.
Ich werds jetzt aber wohl mit fixen Größen realisieren und biete dann eben mehrere Schriftgradoptionen an ;)

beste Grüße
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.224
Neuestes Mitglied
Aliyah79
Oben