Text hängt über Tabellenrand heraus

[r-ene]

2. Du solltest Fließtext immer 1em groß machen. Das ist die Einstellung, die jeder Nutzer in seinem Browser als für ihn optimal eingestellt hat. So wird Schrift nie zu groß oder zu klein.

Die Schrift ist mir aber zu groß bei 1em ;) 0.82em ist ja auch erlaubt, das passt schon.

Wenn man bei Dir die Schrift vergrößert, platzt das Layout auseinander. Dem kannst Du entgegen wirken, indem Du Größen Deiner Elemente über die Einheit "em" definierst. em bezieht sich immer auf die aktuelle Schriftgröße.

Das Problem ist jetzt eben, dass ich als Hintergrund ein festes Bild habe.
Gibt es die Möglichkeit die Größe dieses Bildes auch über em zu definieren?

Und wenn wir schon dabei sind, Deine Seite passt sich auch nicht an den verfügbaren Platz im Fenster (= Viewport) an. Außerdem hast Du die Seite falsch horizontal zentriert, macht man das Fenster kleiner, als Deine Seite breit ist, verschwindet alles links aus dem Browser und kann von dort nicht wieder hergeholt werden. Horizontales Zentrieren von Block-Elementen geht mit "margin:0 auto;".

Stimmt, hab ich gelöst.

 

[Maxi]

Nein, ein Bild hat eine feste Größe, die kannst du mit keiner Einheit beeinflussen, es sei denn, es macht nichts, wenn sich das Bild nebeneinander/untereinander wiederholt.

 

[Efchen]

Die Schrift ist mir aber zu groß bei 1em
0.82em ist ja auch erlaubt, das passt schon.

Na, dann musst Du halt die Schrift in Deinem Browser kleiner stellen! Wenn Du Dir im Browser eine zu große Schrift einstellst, warum sollen dann andere darunter leiden? 0.82em ist mir zu klein. 1em ist das, was jeder Nutzer in seinem Browser als optimale Schriftgröße einstellen sollte. Dann klappt es immer.

Gibt es die Möglichkeit die Größe dieses Bildes auch über em zu definieren?

Die Antwort hat Maxi Dir ja schon gegeben. Bezieht sich natürlich nur auf Hintergrundbilder, nicht auf per <img> eingebundene. Ich denke, Dir wird das klar sein, aber ich sags nochmal explizit, damit es jeder versteht.

 

[r-ene]

Ich denk aber, die wenigsten stellen in ihrem Browser die Schriftgröße um, es sei denn sie müssen sie größer stellen. Und als Leser mit durchschnittlichen Augen wird auch 0.82em voll lesbar sein.
Aber das ist ja auch mein Ding.

Okay das mit dem Hintergrundbild muss ich noch anders lösen.
Viele Dank für eure Hilfe! Hat mir sehr weitergeholfen die Tabellen endlich abzulösen. Danke vorallem an dich, Efchen ;)

 

[Maxi]

Ich denk aber, die wenigsten stellen in ihrem Browser die Schriftgröße um, es sei denn sie müssen sie größer stellen. Und als Leser mit durchschnittlichen Augen wird auch 0.82em voll lesbar sein.
Aber das ist ja auch mein Ding.

schon, aber wenn die Besucher dann deine zu kleine Schrift etc. bemängeln?

 

[Efchen]

Ich denk aber, die wenigsten stellen in ihrem Browser die Schriftgröße um

Warum muss man eigentlich immer Rücksicht nehmen auf die, die zu doof sind, ihre Software richtig zu benutzen? Warum werde ich regelmäßig dafür bestraft, dass ich meinen Browser kenne und ausnutze? Das ging erst neulich mit dem Öffnen in einem neuen Tab/Fenster so. Weil ich meine Software so nutze, wie es gedacht ist, darf ich regelmäßig die Schrift in etlichen Seiten größer stellen, weil ich nichts mehr lesen kann, weil ich in meinem Browser die Schrift schön klein gestellt habe.

Warum muss i9ch leiden und die DAUs kriegen recht? Und wenn jemand meint, darauf zu antworten, dass die DAUs eben an die Hand genommen werden müssen, warum werden dann so viele Features in einen Browser eingebaut, wenn die Mehrheit der Nutzer sowieso zu doof dazu zu sein scheint, die zu nutzen?

Ich find das echt lästig!

Und als Leser mit durchschnittlichen Augen wird auch 0.82em voll lesbar sein.

Aber nicht, wenn sie - wie ich - die Schrift im Browser kleiner gestellt haben!

Aber das ist ja auch mein Ding.

Ja, und wenn es Dein Ding ist, dann ist es IMHO Deine Aufgabe, Deine Software entsprechend zu parametrieren und nicht die Nutzer Deiner Site mit einem zu kleinen Font zu belästigen.

Oder bin ich hier der einzige, der bzgl. Browser-Einstellungen so denkt???

Viele Dank für eure Hilfe! Hat mir sehr weitergeholfen die Tabellen endlich abzulösen. Danke vorallem an dich, Efchen ;)

Gern geschehen :-)
Wieder ein Erfolg in meinem Kampf für ein besseres WWW. Mit ordentlichem, semantisch sinnvollem Code kommt dann die Barrierefreiheit automatisch!

Viel Erfolg weiterhin,
-Efchen

 

[r-ene]

Jo ich geh mal davon aus, dass die wenigsten in ihrem Browser die Schriftgröße von normal abändern.
Außerdem hat dieses Forum z.B. auch ungefähr die gleiche Schriftgröße und niemanden scheints zu stören.

 

[Efchen]

Jo ich geh mal davon aus, dass die wenigsten in ihrem Browser die Schriftgröße von normal abändern.

Ja, und eben das find ich abartig und seltsam.

 

[r-ene]

Argh... ein nächstes Problem (Neue Seite 1).
Verkleiner mal das Fenster in eurem Browser. Die Fußleiste bleibt immer sichtbar und verdeckt bei kleinem Fenster den Rest.
Außerdem ist alles auf height: 100% eingestellt. Wenn der Inhalt bzw. das Menü jetzt unten weiter geht als die normale Fenstergröße schneidet es die Sachen einfach ab, weil height: 100% nur 100% der Fenstergröße "berechnet" und nicht 100% der kompletten Seite.
Versteht ihr? Was kann ich tun?

 

[neuroleptika]

Ja, und eben das find ich abartig und seltsam.

Das ist nun mal so. Es gibt auch typografische Gründe von 1em abzuweichen.

Warum muss i9ch leiden und die DAUs kriegen recht? Und wenn jemand meint, darauf zu antworten, dass die DAUs eben an die Hand genommen werden müssen, warum werden dann so viele Features in einen Browser eingebaut, wenn die Mehrheit der Nutzer sowieso zu doof dazu zu sein scheint, die zu nutzen?

Als Web-Autor sollte man seine Besucher nie als DAU bezeichnen. Die Denkweise stört in jeder Dienstleistung.

Wer seine Browsereinstellungen nicht auf seine Bedürfnisse anpasst ist nicht gleich doof.

Du musst am wenigsten darunter leiden, da du weißt wie man die Einstellungen ändert.

Es gibt viele Möglichkeiten die Lesbarkeit zu beeinflussen. font-size ist eine davon.

 

[Efchen]

Das ist nun mal so. Es gibt auch typografische Gründe von 1em abzuweichen.

Welche denn, wenn 1em überall unterschiedlich groß ist?

Als Web-Autor sollte man seine Besucher nie als DAU bezeichnen. Die Denkweise stört in jeder Dienstleistung.

Ich habe das in meiner Eigenschaft als verärgerter Nutzer getan, der ständig überall die Schrift größer stellen muss.

Wer seine Browsereinstellungen nicht auf seine Bedürfnisse anpasst ist nicht gleich doof.

Doof ist niemand. Aber er behindert damit andere und eine vernünftige Arbeitsweise.

Du musst am wenigsten darunter leiden, da du weißt wie man die Einstellungen ändert.

Doch. Eben ich leide darunter, WEIL ich meine Einstellung (also die der Schriftgröße) geändert habe.

Naja. Egal.

 

[neuroleptika]

Welche denn, wenn 1em überall unterschiedlich groß ist?

Das kommt auf die Schrift, Zeilenhöhe und den Wortabstand an.
Ich verwende gerne eine etwas luftige Zeilenhöhe. Damit wirkt die Schrift etwas größer und ist leserlicher.
Der meiste Fließtext im Internet wird bei üblicher Voreinstellung mit ca 12px angezeigt. Das entspricht meistens, etwa 0.75em.

 

[r-ene]

Also ich hab jetzt das mit height: 100% weggelassen.
Ein kleines Problem ist noch da:
Schaut euch die Seite an: Neue Seite 1.
Im Firefox hat das Logo unten zusätzlich einen weißen Balken (also einen größeren als die eingestellten 5px), wieso das?

 

[neuroleptika]

img
  {
    border: 0;
[COLOR=DarkRed] display: block;[/COLOR]
  }

siehe (geschrieben von prm):
Lücke am unteren Bildrand
oder (von mir geschrieben):
css | Spalten :: css-störende Abstände

 

[r-ene]

Huch, das versteh ich nicht. Was bedeutet denn das?
(Aber es klappt, danke! ;) )

 

[neuroleptika]

Huch, das versteh ich nicht. Was bedeutet denn das?

Seht auf den verlinkten Seiten.

prm geht in seiner Beschreibung vom Almost Standards Mode aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

Du hast diesen Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Mit diesem Doctype sollte die Lücke im Firefox und im Internet Explorer erscheinen.

 

[Efchen]

Der meiste Fließtext im Internet wird bei üblicher Voreinstellung mit ca 12px angezeigt. Das entspricht meistens, etwa 0.75em.

Was ich auch nicht verstehe ist, dass alle Welt von flexiblen Layouts spricht, dass ja jeder Nutzer einen unterschiedlich großen Viewport hat, dass immer gesagt wird, man dürfe keine Menüs oder andere essenziellen Dinge einer Website mit JavaScript oder Flash machen, aber wenn es um die genauso variable Einstellung der Schriftgröße geht, heißt es plötzlich wieder "Der meiste ... bei üblicher Voreinstellung ...".

Warum?
Ich seh da einfach keinen Unterschied.

Grüße,
-Efchen

 

[r-ene]

Ist zwar schon einige Tage her, aber es gibt immer noch ein Problem.
Guckt euch mal z.B. die Seite Geburtstagsrechner > Lustige Spiele an.
Sieht bei euch sicher schön und toll aus. Wenn ich aber verschiedene Browser-Screenshots (über IE NetRenderer - Browser Compatibility Check -) mache, dann sehe ich, dass im IE 5.5 und IE 6 der Inhaltteil verschoben wird und zwar komplett unter das Navigationsmenü. Woran kann das liegen?

 

[neuroleptika]

Woran kann das liegen?

Wenn die gefloateteten Boxen nicht neben einander passen werden sie untereinander dargestelt.
Für den IE6 reicht eine Korrektur von border-left für #inhalt:

* html #inhalt {
border-left:2px solid #ffffff;
}

Wo genau der IE6 die zusätzlichen px nimmt habe ich nicht untersucht.
Einzelne px-Werte mit Hacks auszugleichen würde ich jedoch meiden.

Ich würde dir raten kein horizontales border, padding oder margin im Grundgerüst, für Elemente mit width, zu verwenden.
Zum einen musst du bei jeder border-width-Änderung auch width anpassen
und zum anderen interpretiert der IE 5.x das Boxmodell fehlerhaft.

Denkbar währe z.B sowas:

<div id="inhalt_float_und_widht">
 <div id="inhalt_border_und_padding">
  Blockelemente
 </div>
</div>

 

[r-ene]

Ich würde dir raten kein horizontales border, padding oder margin im Grundgerüst, für Elemente mit width, zu verwenden.

Du meinst vertikal oder?

Ich habs jetzt irgendwie hinbekommen, dass es in allen Browsern einigermaßen gut aussieht. :)
Das einzige Problem ist jetzt noch, dass der IE 5.5 das margin 0 auto nicht interpretiert und die Seite nicht zentriert, aber das ist nicht so schlimm.
Danke!