Layout mit fester breite das sich staucht

[AllesMeins]

Hiho,

ich mache gerade meine ersten Schritte zum Thema barrierefreies Webdesign. Und dazu gehört ja unter anderem auf Tabellen zu verzichten. Ich versuche mich also im Moment ein Layout auf reiner css Basis zu basteln. Mein derzeitiger Aufbau orientiert sich sehr an diesem Beispiel:
http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm

Nun möchte ich auch gerne ein Layout mit fester (maximal) Breite realisieren, allerdings soll sich die Inhaltsspalte stauchen wenn das Fenster kleiner ist als die Breite. Ich werde zwar darauf achten das das Gesmatwerk nicht über die 780 Pixel hinaus geht, aber es kann ja trotzdem immer mal Gründe geben weshalb ein Fenster noch kleiner sein könnte. Und das dann da der Inhalt nicht mehr gelesen werden kann empfinde ich doch als sehr störend.

Dazu habe ich zwar schon die Möglichkeit gefunden dies mit "max-width" zu realisieren, allerdings mag das (wie eigentlich immer) der IE nicht und zeigt die Seite als 100% Breite an. Kann ich irgendwie dem IE beibringen die Seite wie gewünscht zu behandeln (und wenn nicht gibt es eine Lösung die in "richtigen" Browsern die Seite staucht und im IE die Seite zumindest mit fester Grösse angezeigt wird?

Mein erzeitiges CSS:

body {
color: black;
background-color: #ccf;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center;  /* Zentrierung im Internet Explorer */
}

div#Seite {
background-color: #ccf;
text-align: left;
margin: 0 auto;
max-width: 760px;
width: 760px;
padding: 0.5em;
border: none;
}

Grüsse

Marc

[schwarze Piste]

Tachchen!

Max-width ist nach wie vor ein echtes Problem.
Zwar gibt es für IEs sog. "Expressions", in deinem Fall dann

max-width:expression(document.body.clientWidth > 760? "760px": "auto" );

aber gerade diese Expressions sind auch nach wie vor eine Toplösung,
um IEs bisweilen reprodizierbar komplett abzuschießen.
Sie sollten also mit Bedacht und nur ausgiebig getestet eingesetzt werden!

Gruß

Die schwarze Piste

[Auge]

Hallo

body {
color: black;
background-color: #ccf;
font-size: 100.01%;
font-family: Helvetica,Arial,sans-serif;
margin: 0; padding: 1em 0;
text-align: center;  /* Zentrierung im Internet Explorer */
}

div#Seite {
background-color: #ccf;
text-align: left;
margin: 0 auto;
max-width: 760px;
width: 760px;
padding: 0.5em;
border: none;
}

Ich habe das letztens ohne Breitenangabe gelöst. Beispiel:

  
div#Seite {  
margin:1em 5em;  
/*weitere Angaben*/  
}  

Darin alle weiteren Elemente. Das funktioniert (zumindest) mit MSIE 6, Mozilla/FF, Opera 7.x. Damit komme ich auch ohne die Zentrierung für den MSIE (text-align:center) aus, da der zwar kein margin:auto zur Zentrierung versteht, aber mit konkreten Maßangaben durchaus umgehen kann.

Tschö, Auge

[Ingo Turski]

Hi,

Ich habe das letztens ohne Breitenangabe gelöst.

nö. Das ist etwas ganz anderes. Gefragt war eine feste Maximalbreite.

Damit komme ich auch ohne die Zentrierung für den MSIE (text-align:center) aus, da der zwar kein margin:auto zur Zentrierung versteht

Der IE6 im standardkompatiblen Modus kennt das durchaus.

freundliche Grüße
Ingo

[Auge]

Hallo

Ich habe das letztens ohne Breitenangabe gelöst.
nö. Das ist etwas ganz anderes. Gefragt war eine feste Maximalbreite.

nachguck .... stimmt. Wobei ich mir so meine Gedanken mache, wenn der dem Inhalt zur Verfügung gestellte Platz die 760px-Grenze nicht überschreiten soll. Das kann ja floaten und mit der Verwendung einer relativen Maßangabe für die Schriftgröße "barrierefrei" sein, wie es will, bei großer Bildschirmauflösung in Verbindung mit großem Browserfenster werden 760px irgendwann _sehr_ schmal, egal wie groß die Schrift ist.

Und wenn der Inhaltscontainer bei kleinerem Browserfenster schmaler werden soll, warum dann nicht auch breiter, wenn es das Fenster hergibt? Ist ja zumindest eine Überlegung wert, auch wenn die Frage anders lautete.

Damit komme ich auch ohne die Zentrierung für den MSIE (text-align:center) aus, da der zwar kein margin:auto zur Zentrierung versteht
Der IE6 im standardkompatiblen Modus kennt das durchaus.

stimmt *grummel* :-)

Tschö, Auge

[Ingo Turski]

Hi,

bei großer Bildschirmauflösung in Verbindung mit großem Browserfenster werden 760px irgendwann _sehr_ schmal, egal wie groß die Schrift ist.

das ist zwar richtig, aber dennoch machen 760px - wenn man überhaupt eine Breite angibt - zumindest für den Ausdruck Sinn. Für den Bildschirm würde eine Breitenangabe in em u.U. sinnvoll sein - in dem Beispiel http://de.selfhtml.org/css/layouts/anzeige/hintergrund.htm schied das aber wegen der Hintergrundgrafik aus.

Und wenn der Inhaltscontainer bei kleinerem Browserfenster schmaler werden soll, warum dann nicht auch breiter, wenn es das Fenster hergibt?

Ein Argument wäre die bessere Lesbarkeit. Bei zu langen Zeilen ist das Finden des nächsten Zeilenanfangs bekanntlich etwas erschwert. Ich überlasse die Zeilenbreite allerdings gerne dem User, der ja sein Browserfenster auch verkleinern kann...

Der IE6 im standardkompatiblen Modus kennt das durchaus.

zu Deiner Folgefrage: natürlich können die Vorgänger das nicht. Allerdings erreichst Du mit bei Deinem Beispiel mit 5em seitlichem margin halt nur 5em Randabstand, nicht aber eine wie auch immer passende Breite des Anzeigebereichs. 5em können in sehr schmalen Fenstern deutlich zuviel sein.

freundliche Grüße
Ingo

[Auge]

Hallo

bei großer Bildschirmauflösung in Verbindung mit großem Browserfenster werden 760px irgendwann _sehr_ schmal, egal wie groß die Schrift ist.
das ist zwar richtig, aber dennoch machen 760px - wenn man überhaupt eine Breite angibt - zumindest für den Ausdruck Sinn.

Dafür würd' ich cm nehmen.

Für den Bildschirm würde eine Breitenangabe in em u.U. sinnvoll sein

Das birgt die Gefahr des "querscrollenmüssen". Eigentlich bleibt nur % übrig da em an die Schriftgröße gebunden ist, % aber an die Größe des Browserfensters (wenn ich nicht irre).

5em können in sehr schmalen Fenstern deutlich zuviel sein.

Stimmt auch wieder, wobei das ja auch nur ein Beispiel war, wie man den Inhalt zentriert. Zusammen mit festen Breitenangaben in em, z. B. für eine Navigation auf der linken Seite des Inhalts, ergibt sich ein insgesamt fließendes Layout. Für den Bildschirm ist, wie ich oben schon schrieb, wohl eine Angabe des Randes in % günstiger. So bleibt die Breite des Inhalts(containers), gesehen auf die Breite des Browserfensters, immer gleich, und der Inhalt als solcher passt sich daran an, egal ob ich dem Browserfenster oder der Schrift eine andere Größe verpasse.

Tschö, Auge

[Ingo Turski]

Hi,

Für den Bildschirm würde eine Breitenangabe in em u.U. sinnvoll sein

Das birgt die Gefahr des "querscrollenmüssen". Eigentlich bleibt nur % übrig da em an die Schriftgröße gebunden ist, % aber an die Größe des Browserfensters (wenn ich nicht irre).

stimmt zwar, aber die einzig sinnvolle Alternative wäre auto. em bietet zumindest die Möglichkeit für den Autor, in etwa die Zeichen/Zeile festzulegen und für den Betrachter, einen passenden Schriftgrad zu wählen. Übrigens bevorzuge ich auch für den Ausdruck auto, da ich nicht wissen kann, wie die Randeinstellungen im Browser sind.

freundliche Grüße
Ingo

[Der Martin]

Tag auch,

das ist zwar richtig, aber dennoch machen 760px - wenn man überhaupt eine Breite angibt - zumindest für den Ausdruck Sinn.

Dafür würd' ich cm nehmen.

Ich nicht. Ich finde, "cm" ist eine doofe Einheit, die mag ich generell nicht. Ist euch schon mal aufgefallen, dass die Vorsilbe "Zenti" fast ausschließlich für Zentimeter verwendet wird? Sie passt einfach nicht richtig ins Schema der Einheiten, die normalerweise in 1000er-Schritten abgestuft sind.
Wenn schon, dann "mm". Und dann finde ich es ätzend, wenn Programme wie z.B. MS Word zwar "cm" als Maßeinheit akzeptieren, aber nicht "mm".
Aber bei Printmedien rechne ich noch lieber in Zoll (in) bei großen Maßen (z.B. Seitengröße) oder Points (pt) bei sehr kleinen Abmessungen (etwa Rahmen- oder Linienstärke).

Aber das ist natürlich Ansichtssache.

So long,

Martin

[Auge]

Hallo

Ich finde, "cm" ist eine doofe Einheit, die mag ich generell nicht.

Ich find' auch, dass rot eine doofe Farbe ist. Trotzdem bleibe ich an einer roten Ampel steh'n. *scnr*

Ist euch schon mal aufgefallen, dass die Vorsilbe "Zenti" fast ausschließlich für Zentimeter verwendet wird?

Nö. Sie wird auch bei anderen Einheiten benutzt, um darzustellen, dass es sich um Hundertstel einer Basiseinheit handelt (in unserem Fall Meter).

Sie passt einfach nicht richtig ins Schema der Einheiten, die normalerweise in 1000er-Schritten abgestuft sind.

Im metrischen System gibt es Abstufungen nicht nur in 1000-er Schritten. Ich sehe auch keine Dominanz dieser Abstufung.

Aber wie du schon so schön schriebst:

... das ist natürlich Ansichtssache.

Tschö, Auge

[Der Martin]

Hi,

Ich find' auch, dass rot eine doofe Farbe ist. Trotzdem bleibe ich an einer roten Ampel steh'n. *scnr*

Ist vielleicht auch besser so...  ;)
Ich weiß auch, wieviel ein Zentimeter ist und kann mir Maßangaben entsprechend vorstellen. Trotzdem würde _ich_ diese Einheit in den meisten Fällen nicht benutzen.

Nö. Sie wird auch bei anderen Einheiten benutzt, um darzustellen, dass es sich um Hundertstel einer Basiseinheit handelt (in unserem Fall Meter).

Hast du ein Beispiel? Eines, das auch im wirklichen Leben verwendet wird? Ich habe keins gefunden. Egal ob Gramm, Volt, Newton, Sekunde, Watt... mir fällt da nichts ein.

Im metrischen System gibt es Abstufungen nicht nur in 1000-er Schritten. Ich sehe auch keine Dominanz dieser Abstufung.

Zwischen "kilo" und "milli" gibt es diese Abstufungen in 10er-Schritten, stimmt. Eine Dominanz der 1000er-Stufung sehe ich allerdings trotzdem.

So long,

Martin

[Ashura]

Hallo Der.

Hast du ein Beispiel? Eines, das auch im wirklichen Leben verwendet wird? Ich habe keins gefunden. Egal ob Gramm, Volt, Newton, Sekunde, Watt... mir fällt da nichts ein.

Zentiliter?

Gruß, Ashura

[Auge]

Hallo

Hast du ein Beispiel? Eines, das auch im wirklichen Leben verwendet wird? Ich habe keins gefunden. Egal ob Gramm, Volt, Newton, Sekunde, Watt... mir fällt da nichts ein.

Zentiliter?

Ich habe ja auch schon nach alltagstauglichen Anwendungen gesucht, aber gerade Zentiliter ist mir partout nicht eingefallen.

darauf: PROST! Ach nee, hatt' ich ja heute bzw. gestern abend schon hinter mir. ;-)

Tschö, Auge

[Ashura]

Hallo Auge.

darauf: PROST! Ach nee, hatt' ich ja heute bzw. gestern abend schon hinter mir. ;-)

Aber hoffentlich nicht zentiliterweise. ;)

Gruß, Ashura

[Auge]

Hallo

darauf: PROST! Ach nee, hatt' ich ja heute bzw. gestern abend schon hinter mir. ;-)

Aber hoffentlich nicht zentiliterweise. ;)

Naja, wenn's den was hochprozentiges sein soll, ist Zentiliter wohl die beste Wahl. Schon allein wegen der Mäßigung. An dem Abend (vorgestern) was es aber lecker Schwarzbier, das dann doch in (halb)Liter gemessen und genossen wird. :-)

Tschö, Auge

[Auge]

Hallo

Damit komme ich auch ohne die Zentrierung für den MSIE (text-align:center) aus, da der zwar kein margin:auto zur Zentrierung versteht
Der IE6 im standardkompatiblen Modus kennt das durchaus.

Nun schrieb ich eben zwar "stimmt ...", aber die anderen MSIE's (also die Vorgänger) darf ich ja wohl mit "meiner" Methode versorgen, egal was der 6-er kann, oder?

Tschö, Auge