minimalbreite abhängig vom Content

[Detlef G.]

Hallo Jeena Paradies

Super Dankeschön, jetzt geht es wunderbar. Wenn dann in der <h1> Überschrift ein zu großes wort ist dann rutscht das ganze unter die Subnavigation Ist dann zwar etwas ungewohnt, aber dafür kann man alles gut lesen.

Nur, wenn der rechte Margin von main schmaler ist, als subnav breit. Dies tritt genau dann auf, wenn diese bei Schriftvergrößerung verbreitert wird (min-width:8em;). Bei normaler Schriftgröße gehen längere Worte trotzdem über den Rand und eventuell über die subnav. Um dies zu vermeiden muss noch ein min-width für container angegeben werden. Dieser ist in der neuen screen.css nur für die Startseite bemessen, musst du noch für die anderen Seiten anpassen.

Das wäre also (wenn der IE auch mitspielen würde, oder ich es führ ihn irgendwie per JS hack hinbekommen würde) nicht das Argument gegen 800px breite.

Eine Variante dazu ist in der neuen screen.css enthalten, dafür ist die feste Breite entfallen.

Auf diese Überlegungen bin ich auch erst gekommen als ich mit dem (Äm der Name ist mir entfallen aber der hat die Seite Ministryofpropaganda) darüber diskutiert habe. Da hat mein Denkprozess angefangen und ich habe mir überlegt was der User haben will. Um jeden Preis seinen Browserplatz ausfüllen oder lieber doch was fürs Auge, und bessere Lesbarkeit der Texte?

Es geht nicht darum, den Browserplatz vollständig auszufüllen, sondern akzeptable Verhältnise zu schaffen, die bei einem Handtuch von etwa der halben Fensterbreite nicht gegeben sich. Anders verhält es sich, wenn bewusst gestaltend mit Inhalten und Freiräumen gearbeitet wird.

Nun zu den CSS-Änderungen, du hast die geänderte screen.css ja bereits eingebunden.

#container
width:expression(document.body.clientWidth>755?"750px":"auto");
-> max-width für IE
min-width:315px;
-> nur für Startseite, muss für andere noch erhöht werden werden. Gibt die Mindestbreite an, die nötig ist, damit bei der breiteste Inhalt von main nicht über subnav rutscht, solange margin-left von main größer als die Breite von subnav ist.

#mainnav li {
 width: 22%;
-> damit im IE das letzte li nicht auf die nächste Zeile rutscht
 min-width:4.5em;
-> damit diese bei vergrößerter Schrift im Mozilla nicht übereinander rutschen
 padding-left:2%;
-> damit diese wieder zentriert erscheinen und damit bei 4.5em > 22% ein kleiner Zwischenraum bleibt

#subnav {
 border: solid #ffffff;
 border-width: 0 0 10px 10px;
 margin: 0 0 10px 10px;
-> um main und subnav optisch zu trennen, wenn sich die subnav vergrößert

Du hast aber noch ein Problem mit deinem top im Opera 6. Dieser ignoriert dort das overflow: hidden.

MFG
Detlef