Seite unlesbar bei vergrößerter Darstellung

[Kalle_B]

Hallöle,

der Firefox hat die wunderbare Möglichkeit, Schrift und Grafiken einfach mit [Strg] [+] fast unendlich zu vergrößern, sodass nur noch einige Buchstaben das Anzeigefenster füllen.

Nur - das ganze Layout geht baden. Besonders, wenn man mit CSS "Spalten" definiert, überlappen die sich (je nach Art der Definition) und verdecken sich gegenseitig. Die Seite ist nicht mehr lesbar.

Grund ist, dass Firefox versucht, das Dokument in der BREITE des Anzeigefensters darzustellen, was überhaupt keinen Sinn macht.

Richtig wäre, auch die BREITE entsprechend zu vergrößern und dann horizontal zu scrollen.

Habe mal dieses CSS versucht:
  body {width:50em}

Und tatsächlich - das Dokument wächst über den rechten Rand der Anzeige hinaus. Habe so etwas jedoch noch nicht woanders gesehen.

Wie macht man das üblicherweise?

Kalle

[Struppi]

Habe mal dieses CSS versucht:
  body {width:50em}

Und tatsächlich - das Dokument wächst über den rechten Rand der Anzeige hinaus. Habe so etwas jedoch noch nicht woanders gesehen.

Wie macht man das üblicherweise?

Wenn du deine Breitenangaben und Schriftgrößen in em machst, dann wächst tatsächlich alles proportional mit. Aber natürlich hat sowas auch seine Grenzen, zumindest in meinem FF werden Grafiken nämlich nicht mitvergrößert.

Trotz allem halte ich em (oder je nach Anwendung %) für die sinnvollsten Einheiten für Größen.

Struppi.

[Kalle_B]

..., zumindest in meinem FF werden Grafiken nämlich nicht mitvergrößert.

Deshalb gebe ich MEINEN Grafiken immer (nein, nicht immer, aber immer öfter) eine Höhe oder Breite in em oder %. Dann wachsen sie.

ÜBRIGENS:
Gibt es eine Möglichkeit, die alert-Anzeige bei Javascript mitzuvergrößern?

Macht keinen Sinn, einem Betriebsblinden (oder wie nennt man die Sehbehinderten?) für ihn unsichtbar mitzuteilen, dass er vergessen hat, ein Feld auszufüllen.

Kalle

[Jonathan]

Gibt es eine Möglichkeit, die alert-Anzeige bei Javascript mitzuvergrößern?

Nein.

Macht keinen Sinn, einem Betriebsblinden (oder wie nennt man die Sehbehinderten?) für ihn unsichtbar mitzuteilen, dass er vergessen hat, ein Feld auszufüllen.

Manche Sehbehinderte lassen sich die Webseiten von Screenreadern vorlesen oder benutzen Textbrowser, die die Seiten z.B. in Blindenschrift ausgeben. Beide Browser können höchstwahrscheinlich kein Javascript und da macht es absolut keinen Sinn, eine alert()-Meldung auszugeben. Weise stattdessen auf der Seite, die erscheint, nachdem man das Formular abgeschickt hat, auf die fehlenden Felder hin.

[Kalle_B]

... Beide Browser können höchstwahrscheinlich kein Javascript und da macht es absolut keinen Sinn, eine alert()-Meldung auszugeben. Weise stattdessen auf der Seite, die erscheint, nachdem man das Formular abgeschickt hat, auf die fehlenden Felder hin.

Mache ich zusätzlich, erfordert aber ja ein neues Laden.

Habe eben festgestellt, dass zwar die Input- Felder, aber (zumindest beim FF) nicht die Radiobuttons mitwachsen.

Wenn ich aber ein großes Radio haben möchte?

input[type='radio'] {
  font-size:        1em;
oder
  height:        1em;
}

hilft nicht.

Kalle

[Kalle_B]

ich experimentiere mit dieser Seite:
http://www.aktivferien.de/v2/af131.php

Konstruktive Kritik willkommen.

Kalle

[Ingo Turski]

Hi,

ich experimentiere mit dieser Seite:
http://www.aktivferien.de/v2/af131.php

Konstruktive Kritik willkommen.

was soll "Das Layout dieser Seite ist barrierefrei. Auch bei stärkster Vergrößerung beginnen die Eingabefelder am linken Fensterrand."?
Die Seite ist weder barrierefrei noch ist es diesbezüglich von Bedeutung, wo die Eingabefelder "beginnen".
Nur mal auf die Schnelle eine automatisierte Prüfung:

http://www.w3.org/TR/WAI-WEBCONTENT/#tech-text-equivalent:

Failure - INPUT Element, of Type RADIO, found at Line: 179, Column: 3

Failure - INPUT Element, of Type RADIO, found at Line: 180, Column: 3

Failure - INPUT Element, of Type TEXT, found at Line: 187, Column: 15

Failure - INPUT Element, of Type TEXT, found at Line: 191, Column: 3

Failure - INPUT Element, of Type TEXT, found at Line: 192, Column: 3

Failure - INPUT Element, of Type TEXT, found at Line: 196, Column: 15

Failure - INPUT Element, of Type PASSWORD, found at Line: 203, Column: 3

http://www.w3.org/TR/WAI-WEBCONTENT/#tech-avoid-deprecated:

Failure - Document uses one or more deprecated elements or attributes. The document contains the element: img with the deprecated attribute: border

http://www.w3.org/TR/WAI-WEBCONTENT/#tech-associate-labels:
    * Failure - INPUT Element, of Type TEXT, at Line: 143, Column: 3 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 144, Column: 3 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 157, Column: 3 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 158, Column: 3 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 163, Column: 15 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 166, Column: 15 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 170, Column: 15 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 174, Column: 15 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type RADIO, at Line: 179, Column: 3 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type RADIO, at Line: 180, Column: 3 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 187, Column: 15 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 191, Column: 3 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 192, Column: 3 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type TEXT, at Line: 196, Column: 15 in FORM Element at Line: 127, Column: 1
    * Failure - INPUT Element, of Type PASSWORD, at Line: 203, Column: 3 in FORM Element at Line: 127, Column: 1

* Failure - TEXTAREA Element at Line: 183, Column: 15 in FORM Element at Line: 127, Column: 1

http://www.w3.org/TR/WAI-WEBCONTENT/#tech-identify-lang:

Failure - The HTML (Root) element does not use the 'lang' attribute.

Hinzu kommt bei manuellem Test:

• das Fehlen von Angaben zur Schrift- und Hintergrundfarbe,
• * Pflichtfelder   * Sollfelder sind ohne CSS nicht zu unterscheiden
• was soll die "50" bzw. "20" oder "100" ? Die Eingabelänge kannst Du auch direkt visualisieren.
• was soll die Vorbelegung "[uhr_"?
• Was soll "Dieser Satz wurde gelöscht / Dieser Satz ist nicht (mehr) vorhanden"?
• Was sollen "anderer Ort" und "anderer Veranstalter"?

Im IE forderst Du darüber hinaus einen Bug bei der Schriftgradänderung heraus und läßt "Termin" durchstreichen.

freundliche Grüße
Ingo

[Jonathan]

Radios kannst du im Firefox nur relativ eingeschränkt vergrößern.

Beispiel-CSS:

input[type="radio"] {
  -moz-appearance: none!important;
  width: 2em!important;
  height: 2em!important;
  margin: 0 !important;
  padding: 0 !important;
  -moz-border-top-colors:transparent;
  -moz-border-left-colors:transparent;
  -moz-border-right-colors:transparent;
  -moz-border-bottom-colors:transparent;
  -moz-outline:2px solid #0033EE;
  -moz-outline-radius:100%;
}

*|*::-moz-radio {
  width: 0.8em;
  height: 0.8em;
  -moz-border-radius: 0.4em;
  color:green !important;
}

[Kalle_B]

Radios kannst du im Firefox nur relativ eingeschränkt vergrößern.

Ich meinte ja auch: Lauter stellen ;-)
Größer machen = vergrößern
Lauter machen = verlautern, verläutern, ...?

Beispiel-CSS:

input[type="radio"] {
  -moz-appearance: none!important;
  width: 2em!important;
  height: 2em!important;
  margin: 0 !important;
  padding: 0 !important;
  -moz-border-top-colors:transparent;
  -moz-border-left-colors:transparent;
  -moz-border-right-colors:transparent;
  -moz-border-bottom-colors:transparent;
  -moz-outline:2px solid #0033EE;
  -moz-outline-radius:100%;
}

*|*::-moz-radio {
  width: 0.8em;
  height: 0.8em;
  -moz-border-radius: 0.4em;
  color:green !important;
}

Danke für die detaillierte Bastelanleitung. -moz- steht wohl für Mozilla? Gibt es noch mehr solcher Tipps?

Kann mich erinnern, ganz früher mit IE allerlei getrieben zu haben, etwa einlesen einer Textdatei mit Adressen und dann -vorwärts und rückwärts zur nächsten Adresse- Werbebriefe gedruckt.

Aber irgendwie ist IE nur noch mein zweitbester Freund, seit FF bei mir wohnt.

Kalle

[Jonathan]

Danke für die detaillierte Bastelanleitung. -moz- steht wohl für Mozilla? Gibt es noch mehr solcher Tipps?

-moz- steht wohl für mozilla, ja. Es gibt ne ganze Menge Mozilla-Spezifische befehle, mit denen man erweiterte Funktionen und sehr nette Sachen machen kann.

Listen gibt es hier:
http://www.css4you.de/mozproperty.html
http://wikidev.net/Moz-css
http://www.blooberry.com/indexdot/css/properties/extensions/nsextensions.htm

Du kannst auch in die CSS-Dateien im firefox/res/ gucken, da stehen die ganzen Standard-CSS-Regeln drin, die die HTML-Elemente kriegen. Darin siehtst du dann z.B., wie das Standardmäßige Aussehen von Buttons, textfeldern oder Links gemacht wurde.

[B-ellanna]

Deshalb gebe ich MEINEN Grafiken immer (nein, nicht immer, aber immer öfter) eine Höhe oder Breite in em oder %. Dann wachsen sie.

Hallo Kalle,
Ich hab das grad mal ausprobiert
<img src="test.gif" width="14em" height="22em"/>
und das Bild lässt sich im FF nicht mit resizen wenn man strg+ drückt.
wie machst du das denn das es mit wächst?

Dankeschön,
B-ellanna

[Kalle_B]

Ich hab das grad mal ausprobiert
<img src="test.gif" width="14em" height="22em"/>
und das Bild lässt sich im FF nicht mit resizen wenn man strg+ drückt.
wie machst du das denn das es mit wächst?

style='width:14em;height:22em'

Kalle

[B-ellanna]

style='width:14em;height:22em'

Kalle

Hi Kalle,

Super, das funktioniert wenn man es direkt ins <img> mit reinschreibt.
Kann man das auch ich ein Css einbauen?
ich habs hier versucht, leider erfolglos:

ul#Navigation a {background:
                #fcde9c
                url(./Parchment_off.gif)
                width:14em
                height:22em
                no-repeat
                center;}
Hast du da eine Idee??
Wäre echt toll, denn so wie es jetzt ist sieht es noch ziemlich blöd aus wenn man die größe verändert.

B-ellanna

[Struppi]

ul#Navigation a {background:
                #fcde9c
                url(./Parchment_off.gif)
                width:14em
                height:22em
                no-repeat
                center;}
Hast du da eine Idee??
Wäre echt toll, denn so wie es jetzt ist sieht es noch ziemlich blöd aus wenn man die größe verändert.

Wenn du damit die Größe der Hintergrundgrafik meinst, das geht nicht.

Struppi.

[Ingo Turski]

Hi,

Richtig wäre, auch die BREITE entsprechend zu vergrößern und dann horizontal zu scrollen.

Nein, das wäre vielleicht manchmal sinnvoll, aber "richtig" bestimmt nicht. Zu schnell sind dann nämlich Texte nur noch sehr mühsam lesbar, wenn man in jeder Zeile horizontal scrollen muss und dazu dann hin und wieder auch noch vertikal.
Richtig ist vielmehr, durch geeignete Formatierungen Überlappungen zu vermeiden.

Andererseits sind Breitenangaben in em in vielen Fällen vorteilhaft - wenn man diese sinnvoll angibt und eben möglichst _keine_ Querscrollbalken bei Schriftvergrößerung damit forciert.
Schau Dir mal meinen Layoutentwurf css-layout.de an: hier wächst die Breite auch mit dem Schriftgrad (im IE nur onload über Javascript), aber nur soweit es im Fenster möglich ist und erst bei sehr extremer Schriftvergrößerung kommt es hier zum Querscrollen und Überlagerungen.

freundliche Grüße
Ingo