Maximalbreite von «p»...«/p» definieren

[Utz]

Hi Forum,

ich brüte seit einigen Tagen über einer Idee, von der ich nicht so recht weiß, wie sie realisierbar sein könnte. Folgendes: auf meiner Site http://www.mandoline.de spielt sich quasi der komplette Inhalt innerhalb von <p>...</p>-Bereichen ab, der über eine externe CSS-Datei formatiert wird. Das tut auch alles zu meiner Zufriedenheit, mit einer Ausnahme: bei Auflösungen größer als 800 x 600 ist der Text - wie auch schon ein paar von Euch bemängelten - sehr breit und nicht mehr so toll zu lesen.
Ich könnte natürlich die Breite der <p>...</p>-Bereiche auf irgend einen Wert festlegen, das will ich aber nicht tun, da dann ja die überflüssigen Scrollbalken erscheinen, wenn das Fenster zu klein ist.
Mein Gedankengang ist nun folgender: Ich könnte die im Fenster zur Verfügung stehende Breite auslesen - kein Problem so weit. Wenn dieser Wert über einer Grenze von vielleicht 800 Pixeln liegt, müsste die Breite der Bereiche festgelegt werden. Da geht's los. Bisher fällt mir dazu nur ein, die <p>s über getElementByTagname anzusprechen - womit ich AFAIK höchstens IE 5.x und Mozilla/NS 6 erreiche. IDs will ich nicht vergeben, da ich damit bei jeder Änderung rasant den Überblick verliere. Layer oder absolute Positionierungen oder ähnliches will ich vermeiden, da die Site möglichst abwärtskompatibel sein sollte. Die CSS-Formatierungen mit document.write zu schreiben geht auch nicht, da die ja in einer externen Datei liegen. Über eine Fensterbreitenabfrage per JS definierte unterschiedliche Stylesheets fallen auch raus, da auch bei ausgeschaltetem JS ein Default-Stylesheet referenziert werden sollte (für IE), und laut HTML 4.01 <noscript>-Bereiche im Head nicht zulässig sind (obwohl es funktionieren würde - bin in der Hinsicht einfach mal penibel).

Und jetzt endlich die Frage: hat jemand von Euch eine Idee wie ich sowas trotz der o.g. Vorgaben auch für IE 4 und NS 4 hinkriegen könnte?

Danke und Grüße,

Utz

[Alexander Kleinjung]

Hallo Utz,

ich seh das Dillemma, aber wieso legst Du die Breite der <p>'s via
CSS-Definition nicht einfach auf x-Pixel fest? IMHO sollte man heute
800x600 als Minimalauflösung annehmen können.

Wenn Du die "kleineren" und auch die ohne JS nicht verprellen willst,
könntest Du Deine Seiten einfach kopieren, diesen eine andere CSS-
Definition zuweisen, doch per JS die Fensterbreite abfragen und im
noscript einen Link zu der Auflösung für 640x480 setzen.

Und wenn Du diese "Spiegelung" in einen neuen Ordner packst, brauchst
Du ja nur die Angaben in der CSS-Datei ändern und alles andere kann
so bleiben wie es ist...?

Oder steh ich jetzt auch im Wald?

<img src="http://home.germany.net/100-80215/alex/images/promo/signet.gif" alt="">

<img src="http://home.germany.net/100-80215/alex/images/promo/akonline.gif" alt="">

http://www.atomic-eggs.com/selfspezial/daten/101.html

[Utz]

Hi Alexander,

(...) Und wenn Du diese "Spiegelung" in einen neuen Ordner packst, brauchst Du ja nur die Angaben in der CSS-Datei ändern und alles andere kann so bleiben wie es ist...?

Oder steh ich jetzt auch im Wald?

Mein Problem ist meine extreme Faulheit - wenn ich bei einer solchen Lösung Inhalte ändern will, muss ich das dann immer in zwei Dateien tun. Da laufe ich Gefahr, dass ich's dann doch mal verpenne und die Versionen auseinander laufen.

Jetzt mag man einwenden, wenn dieser Utz einfach zu faul für ne Auflösungsweiche ist und sich partout an HTML 4.01 halten will und außerdem seine Inhalte aufgrund fehlender Ressourcen nicht aus 'ner Datenbank holen kann, dann muss er halt einfach mit dem jetzigen Stand leben. Na ja, vielleicht ist das auch einfach so.

Grüße,

Utz

[Stefan Muenz]

Hallo Utz

Mein Gedankengang ist nun folgender: Ich könnte die im Fenster zur Verfügung stehende Breite auslesen - kein Problem so weit. Wenn dieser Wert über einer Grenze von vielleicht 800 Pixeln liegt, müsste die Breite der Bereiche festgelegt werden. Da geht's los.

Einfachster Weg: du notierst zwei verschiedene externe CSS-Dateien, die sich nur in bestimmten Werten unterscheiden. In der einen ("smallscreen.css") steht z.B.:
p { width:700px }
und in der anderen ("bigscreen.css"):
p { width:900px }

In der HTML-Datei fragst du mit JavaScript im <head> die Breite ab und schreibst davon abhaengige die Einbindung der jeweiligen CSS-Datei:

<script language="JavaScript">
if(screen.width < 800)
document.writeln('<link rel=stylesheet href="smallscreen.css" type="text/css">');
else
document.writeln('<link rel=stylesheet href="bigscreen.css" type ="text/css">');
</script>

Mehr zu diesen Themen findest du auch in http://www.teamone.de/selfaktuell/artikel/dyncss.htm

viele Gruesse
  Stefan Muenz

[Utz]

Hi Stefan,

danke erstmal. Vielleicht hatte ich mich ein wenig unklar ausgedrückt, mein bisher prakitkabelster Stand ist:

<script type="text/javascript">
if(screen.width < 800)
document.writeln('<link rel=stylesheet href="smallscreen.css" type="text/css">');
else
document.writeln('<link rel=stylesheet href="bigscreen.css" type ="text/css">');
</script>
<noscript>
<link rel=stylesheet href="smallscreen.css" type="text/css">
</noscript>

Denn ich will ja auch Leuten mit abgeschaltetem JS ein Stylesheet bereithalten (sofern der Browser das dann macht ;-)
Das funzt auch, allerdings mahnt mir der Vallidator an, dass <noscript> im Head nicht erlaubt sei, und da ich mich erstmal nicht drauf verlassen will, dass da alle Browser immer mitspielen (und auch keine Not habe, die Idee schnell umsetzen zu müssen), lasse ich diese Lösung erst mal außen vor.

Trotzdem danke nochmal.

Grüße,

Utz

[Carsten]

Hallo Utz,

Vielleicht geht folgendes:

Binde zuerst dein normales style-sheet ein(smallscreen.css). (Fest)
Wenn dann ein User mit grossem Bildschirm und Javascript kommt, wird
dynamisch ein weiters Stylesheet eingebunden. Das braucht eigentlich nur
noch die Grössenangaben für das <p> ergänzen.

Also nicht:
<script type="text/javascript">
  if(screen.width < 800)
    document.writeln('<link rel=stylesheet href="smallscreen.css" type="text/css">');
  else
    document.writeln('<link rel=stylesheet href="bigscreen.css" type ="text/css">');
</script>

sondern:

<link rel=stylesheet href="smallscreen.css" type="text/css">

<script>
    if(screen.width >= 800)
      document.writeln('<link rel=stylesheet href="bigscreen.css" type ="text/css">');
  </script>

Sozusagen nicht
  p {font-family:sans-serif; width:70%;}  // bigscreen.css
sondern
  p {font-family:sans-serif; }  //smallscreen.css
  p {width:70%;}  // Ergänzung aus bigscreen.css

So richtig legal bleibt das aber leider nur wenn du keine Werte _um_definieren
must.

Also wenn da sowas bei rauskommen würde:
  p {font-family:sans-serif; width:70%;}
  p {width:50%;}  // Ergänzung durch bigscreen.css

spuckt der Valigator doch wieder 'ne Warnung aus. (Kein Fehler, die 50% gelten.)

Gruss,
Carsten

[Utz]

Hi Carsten,

Du wirst lachen, aber genau diese Idee kam mir heute auf dem Nachhauseweg auch. Mir fiel aber gleichzeitig auch ein, dass mir vor einiger Zeit berichtet wurde, dass Netscape zu Abstürzen neigt, wenn ihm mehr als ein externes Stylesheet präsentiert wird. Kann aber gut sein, dass mein Gewährsmann genau diese Warnung:

So richtig legal bleibt das aber leider nur wenn du keine Werte _um_definieren must.

nicht beachtet hat (bzw. nicht kannte). Ist aber auch denkbar, dass das laut Specs zwar gültig ist, der Netscape aber trotzdem aus der Kurve fliegt. Ich werd auf jeden Fall mal nen Testlauf nach meinem Kurzurlaub (Jippie!) machen und dann berichten - sofern es von Interesse für jemanden ist.

Danke + Grüße,

Utz