Skalierung bei relativer Breitenangebe eines divs

[Gustav Gans]

Hallo!

Ich habe auf einer Testseite mit 4 verschiedenen Möglichkeiten einen div-Container samt darin befindlichem Absatz so mittels CSS formatiert, daß er zentriert in der Seitenmitte liegt.

Wenn man nun den Schriftgrad des Browsers verändert ( zB. im Firefox mehrmals hintereinander Strg und " + " bzw  Strg und " - " ), dann ändert sich natürlich durch die Nichtverwendung absoluter Größenangeben auch die Breite und Höhe der div-Container.

Der einzige Container, der sich dabei so verhält, wie ich es möchte, ist dabei der erste. Bei _jeder_ Schriftgradveränderung wird er entsprechend größer oder kleiner. Der vierte Container bleibt bei der Größe manchmal gleich bzw. verändert sich nicht so linear wie der erste.

Die beiden mittleren Container werden bei Verkleinerung größer bzw. bleiben fast gleich groß, bei Vergrößerung werden sie immer kleiner. Also genau das Gegenteil vom erwünschten Effekt ( so wie beim ersten Beispiel ).

Das Problem ist nur, daß ich eine em-Breitenangabe nicht verwenden kann, wenn ich will, daß _jeder_ Besucher links und rechts den Abstand sieht, da ich ja nicht weiß, mit welcher Bildschirmauflösung der Besucher arbeitet.

Bleibt nur die Angabe mit Prozenten. Das wiederum führt zu oben genanntem "Problem".

Meine Frage : Kann ich einen div-Container so mittels CSS formatieren, daß bei _jeder_ Bildschirmauflösung links und rechts ein Abstand ist, sich der div-Container bei einer Schriftgrößenänderung _logisch_ mitändert, also bei _jeder_ Schriftgrößenveränderung direkt proportional zur Schrift kleiner oder größer wird?

Danke für Eure Hilfe!

Mit freundlichen Grüßen

Gustav Gans

[Susanne07]

Hallo Gustav,

Meine Frage : Kann ich einen div-Container so mittels CSS formatieren, daß bei _jeder_ Bildschirmauflösung links und rechts ein Abstand ist, sich der div-Container bei einer Schriftgrößenänderung _logisch_ mitändert, also bei _jeder_ Schriftgrößenveränderung direkt proportional zur Schrift kleiner oder größer wird?

Ich habe deine Seite in Firefox 1.5.0.11 getestet, mit verschiedenen Vergrößerungen und High Contrast View. Das von dir gewünschte Ergebnis erhälst du bei den CSS-Angaben div: width:80%; margin:0px auto; und  div: margin:0 5% 0 5%; also deine beiden mittleren Container.

Im IE7 funktionieren alle deine Container wie gewünscht.

Gruß, Susanne

[Gustav Gans]

Hi Súsanne,

Ich habe deine Seite in Firefox 1.5.0.11 getestet, mit verschiedenen Vergrößerungen und High Contrast View. Das von dir gewünschte Ergebnis erhälst du bei den CSS-Angaben div: width:80%; margin:0px auto; und  div: margin:0 5% 0 5%; also deine beiden mittleren Container.

Genau das tut er leider _nicht_.

So sieht die Seite in der mittleren Standard-Schriftgröße aus:

Und so nach mehrmaligem Verkleinern:

Wie man sieht, wird der erste div kleiner, die beiden mittlernen werden leicht größer bzw. bleiben gleich groß. Also nicht das, was ich möchte. Das einzig _logische_ Verhalten zeigt Beispiel 1, was ich ja wiederum nicht verwenden möchte.

mfG

Gustav Gans

[wahsaga]

hi,

Wie man sieht, wird der erste div kleiner,

Natürlich - dessen Breite hast du ja von der Schriftgröße abhängig gemacht -

die beiden mittlernen werden leicht größer bzw. bleiben gleich groß.

• deren Breiten aber nicht.

gruß,
wahsaga

[Gustav Gans]

Hi wahsaga,

Natürlich - dessen Breite hast du ja von der Schriftgröße abhängig gemacht -

_warum_ das so ist, ist mir schon klar! :-)

Die einzige Möglichkeit, die Garantie eines zentrierten divs zu haben, auch bei Verwendung einer kleinen Bildschirmauflösung, ist die Angabe mit Prozent.

Nur erreiche ich dann nicht, daß auch der div-Container Größenänderungen mitmacht. Wie gesagt, wenn man überlegt, was %-Angaben bedeuten, ist es völlig klar, warum das so ist.

Meine Frage war vielmehr so gemeint, ob es eine Möglichkeit gibt, das gewünschte Ergebnis ( also so wie die deivs auf der Beispielseite ) zu erreichen, wo auch die Skalierung richtig funktioniert.

mfG

Gustav Gans

[wahsaga]

hi,

Die einzige Möglichkeit, die Garantie eines zentrierten divs zu haben, auch bei Verwendung einer kleinen Bildschirmauflösung, ist die Angabe mit Prozent.

Nur erreiche ich dann nicht, daß auch der div-Container Größenänderungen mitmacht. Wie gesagt, wenn man überlegt, was %-Angaben bedeuten, ist es völlig klar, warum das so ist.

Meine Frage war vielmehr so gemeint, ob es eine Möglichkeit gibt, das gewünschte Ergebnis ( also so wie die deivs auf der Beispielseite ) zu erreichen, wo auch die Skalierung richtig funktioniert.

Na ja, es sind zwei Arten der Formatierung - bei der einen die Breite abhängig von der Schriftgröße, bei der anderen vom verfügbaren Platz - die einander ein wenig "zuwiderlaufen".

Dass es nichts mehr zu zentrieren gibt, wenn bei schriftgrößenabhängiger Breite die verfügbare Breite errreicht oder überschritten wird, ist klar - also müsste für diesen Fall erst mal definiert werden, wie man sich dann das Ergebnis vorstellt. Soll "abgeschnitten" werden, soll es an der Seite aus dem Container "herauslaufen", sollen Scrollbalken erscheinen, ...

gruß,
wahsaga

[Gustav Gans]

Hallo wahsaga,

Dass es nichts mehr zu zentrieren gibt, wenn bei schriftgrößenabhängiger Breite die verfügbare Breite errreicht oder überschritten wird, ist klar - also müsste für diesen Fall erst mal definiert werden, wie man sich dann das Ergebnis vorstellt. Soll "abgeschnitten" werden, soll es an der Seite aus dem Container "herauslaufen", sollen Scrollbalken erscheinen, ...

Also was ich als Ergebnis gerne _hätte_, ist das Verhalten vom allerersten div auf der Beispielseite.

Das heißt, ich will, daß der div-Container, so wie auch der Absatz und die Schrift darin, mit größer bzw. mit kleiner wird, wenn man die Schriftgröße im Browser vergrößert bzw. verkleinert. Genauso eben wie es das erste div macht.

Aber wie gesagt, eine width-Angabe mit em möchte ich nicht machen, weil das dann vielleicht auf einem großen Bildschirm gut aussieht, arbeitet aber jemand mit 1024*768 oder weniger, muß er scrollen. Und das will ich nicht.

Was mich wiederum zu den Prozenten bringt und zum ursprünglichen Problem.

Aber ich nehme langsam an, daß das, was ich will, gar nicht geht.

mfG

Gustav Gans

[Gunnar Bittersmann]

Hello out there!

Aber wie gesagt, eine width-Angabe mit em möchte ich nicht machen, weil das dann vielleicht auf einem großen Bildschirm gut aussieht, arbeitet aber jemand mit 1024*768 oder weniger, muß er scrollen.

1024×768 ist klein?? O tempora, o mores.

Was mich wiederum zu den Prozenten bringt

Oder doch zu 'max-width'.

See ya up the road,
Gunnar

[wahsaga]

hi,

Aber wie gesagt, eine width-Angabe mit em möchte ich nicht machen, weil das dann vielleicht auf einem großen Bildschirm gut aussieht, arbeitet aber jemand mit 1024*768 oder weniger, muß er scrollen. Und das will ich nicht.

Dann bliebe ja höchstens noch entweder display:inline bzw. inline-block - oder Kombination aus einer width in em und max-width in Prozent.

gruß,
wahsaga

[Gustav Gans]

Hi wahsaga,

Dann bliebe ja höchstens noch entweder display:inline bzw. inline-block - oder Kombination aus einer width in em und max-width in Prozent.

Du meinst also, den Container _so_ zu bedienen? =>

  
.einedivklasse  
{  
width:60em;  
max-width:80%;  
margin:0px auto;  
}  

Habe ich Dich da richtig verstanden? Das bedeutet, daß _jeder_ (?) Browser so lange 60em als Breite nimmt, solange dies unter 80% des Viewports liegt? Und wie verhält sich da unser good old friend IE dabei?

mfG

Gustav Gans

[Steel]

Da muss ich Dich enttaeuschen. mein IE 6 macht da nen fetten zentrierten Block, der sich zwar so verhaelt wie du es magst, aber leider zu gross ist. Das heisst der ist immer gleich gross, unabhaengig vom Viewport. (das gleiche wie dein DIV 1)

Und so wie ich dich verstehe moechtest du ja, dass zuerstmal der Block immer eine bestimmte Groesse im Verhaeltnis des Viewports hat. Erst dann soll er ja auf Schriftgroessenaenderungen reagieren.

Meiner Meinung nach ist genau das das Problem und deshalb nicht loesbar. Du moechtest einen auf % basierenden Container der auf em reagiert. Max-width ist wohl eine Loesung - fuer Browser die damit umgehen koennen...

[Gunnar Bittersmann]

Hello out there!

Das Problem ist nur, daß ich eine em-Breitenangabe nicht verwenden kann, wenn ich will, daß _jeder_ Besucher links und rechts den Abstand sieht, da ich ja nicht weiß, mit welcher Bildschirmauflösung der Besucher arbeitet.

<leier alter="alt">Die Bildschirmauflösung ist irrelevant.</leier>

Und was genau willst du erreichen? Dass der Rand mit größer werdender Schrifgröße breiter wird oder dass der Container mit größer werdender Schrifgröße breiter wird?

Außerdem solltest du für den Container keine Breite, sondern eine Maximalbreite angeben (http://forum.de.selfhtml.org/archiv/2007/3/t147421/#m956364).

Für IE (aber nur für den!) dennoch mit der Eigenschaft 'width', da er diese wie 'max-width' interpretiert. (Weiß gerade nicht, ob der 7er diesen Fehler immer noch hat.)

See ya up the road,
Gunnar

[Gustav Gans]

Hallo Gunnar,

Und was genau willst du erreichen? Dass der Rand mit größer werdender Schrifgröße breiter wird oder dass der Container mit größer werdender Schrifgröße breiter wird?

Natürlich soll, wenn ich die Schriftgröße verkleinere, auch das div kleiner werden. ( Und umgekehrt bei Vergrößerung. ) Wenn ich ( in realitas ) vor einem Plakat stehe und mich davon wegbewege, wird für mich ja auch nicht nur die Schrift kleiner, sondern auch das Plakat als Ganzes. :-)

Außerdem solltest du für den Container keine Breite, sondern eine Maximalbreite angeben (http://forum.de.selfhtml.org/archiv/2007/3/t147421/#m956364).

Für IE (aber nur für den!) dennoch mit der Eigenschaft 'width', da er diese wie 'max-width' interpretiert. (Weiß gerade nicht, ob der 7er diesen Fehler immer noch hat.)

Da sehe ich derzeit keinen Zusammenhang mit meiner Fragestellung. Worum es mir prinzipiell geht, ist der Entwurf eines typischen weblog-Designs mit einem Contentbereich in der Mitte und etwas leerem Raum links und rechts davon.

Das ist wie gesagt mit einer prozentuellen Angabe eh schön zu erreichen. Auch ein User mit kleinerer Auflösung bzw. mit kleinerem Viewport hat dann etwas Abstand links und rechts vom Content.

Mir geht es _nur_ darum, ob man das selbe Ergebnis auch mit einer _logischen_ Skalierung des content-divas machen kann, und wenn ja, wie.

mfG

Gustav Gans

[Gunnar Bittersmann]

Hello out there!

( Und umgekehrt bei Vergrößerung. ) Wenn ich ( in realitas )

BTW, du plenkst.

Außerdem solltest du für den Container keine Breite, sondern eine Maximalbreite angeben (http://forum.de.selfhtml.org/archiv/2007/3/t147421/#m956364).

Für IE (aber nur für den!) dennoch mit der Eigenschaft 'width', da er diese wie 'max-width' interpretiert. (Weiß gerade nicht, ob der 7er diesen Fehler immer noch hat.)

Da sehe ich derzeit keinen Zusammenhang mit meiner Fragestellung.

Ich schon: „eine width-Angabe mit em möchte ich nicht machen, weil das dann vielleicht auf einem großen Bildschirm gut aussieht, arbeitet aber jemand mit 1024*768 oder weniger, muß er scrollen.“

Das horizontale Scrollen vermeidest du doch gerade, wenn du keine Breite, sondern eine Maximalbreite angibst.

(Zu Auflösung vs. Viewportgröße hatte ich mich schon geäußert.)

Auch ein User mit kleinerer Auflösung bzw. mit kleinerem Viewport hat dann etwas Abstand links und rechts vom Content.

Bei großer Schriftgröße hat der Container eben keinen Außenabstand mehr. Allerdings kann 'body' auch 'padding' haben ...

Mir geht es _nur_ darum, ob man das selbe Ergebnis auch mit einer _logischen_ Skalierung des content-divas machen kann, und wenn ja, wie.

<style type="text/css">  
[code lang=css]body  
{  
 padding-left: 10%;  
 padding-right: 10%;  
}  
  
div  
{  
 background-color:rgb(200,200,220);  
 margin: auto;  
 max-width: 50em;  
}

</style>

<!--[if lt IE 7]>

<style type="text/css">  
div  
{  
 text-align: center;  
 width: 50em;  
}  
  
div *  
{  
 text-align: left;  
}

</style>
<![endif]-->[/code]

See ya up the road,
Gunnar