Breitenangabe in em

[Onkel Hans]

Hi,

so ganz komme ich mit "em" Breitenangaben nicht klar.

Ich habe eine Seite mit einem zentrierten DIV-Container (mit der id="test"), in dem Text steht. Das dazugehörige Stylesheet lautet :

  
html, body  
{  
font:normal 101% Helvetica, sans-serif;  
width:100%;  
height:100%;  
}  
#test  
{  
width:50em;  
}  

Bei meiner Auflösung von 1024*768 ist jetzt links und rechts vom Container ca.  10% freier Platz, egal, mit welchem Browser ich die Seite ansehe.

Meine Frage:

Wenn sich die Seite jetzt jemand mit höherer Auflösung ansieht, zB mit 1600*1200, hat der dann auch links und rechts ca. 10% leer ... oder mehr?

Wenn sich die Seite jetzt jemand mit niedrigerer Auflösung ansieht, zB mit 800*600, hat der dann auch links und rechts ca. 10% leer ... oder weniger?

Danke für Hilfe und Erklärungen!

Onkel Hans

[Teufelchen]

so ganz komme ich mit "em"-Breitenangaben nicht klar.

em ist keine Breitenangabe, sondern eine Maßeinheit, die sich auf die Schriftgröße bezieht.

Wenn sich die Seite jetzt jemand mit höherer Auflösung ansieht, zB mit 1600*1200, hat der dann auch links und rechts ca. 10% leer ... oder mehr?

Die Schriftgröße hat nichts mit der Bildschirmauflösung zu tun.

[Onkel Hans]

em ist keine Breitenangabe, sondern eine Maßeinheit, die sich auf die Schriftgröße bezieht.

Ich weiß, _was_ em ist. Und wenn ich mit em eine Breitenangabe mache, dann ist das eine "em-Breitenangabe"!

Die Schriftgröße hat nichts mit der Bildschirmauflösung zu tun.

Auch _das_ weiß ich, und die Antwort hat nichts mit meiner Frage zu tun.

[Gunnar Bittersmann]

@@Onkel Hans:

Die Schriftgröße hat nichts mit der Bildschirmauflösung zu tun.

und die Antwort hat nichts mit meiner Frage zu tun.

Aber nur deshalb nicht, weil die Bildschirmauflösung nichts mit deiner Frage zu tun hat.

Live long and prosper,
Gunnar

[Gunnar Bittersmann]

@@Onkel Hans:

Wenn sich die Seite jetzt jemand mit höherer Auflösung ansieht, zB mit 1600*1200,

Die Auflösung ist VÖLLIG IRRELEVANT. <leier alter="alt"/>

hat der dann auch links und rechts ca. 10% leer

Vielleicht.

... oder mehr?

Vielleicht. Vielleicht auch weniger.

em bezieht sich auf dei verwendete Schriftgröße und hat NICHTS mit der Viewportgröße zu tun.

Du magst vielleicht die Breite in % angeben? Samt sinnvollen Angaben von 'min-width' und 'max-width' (DIESE in em).

Live long and prosper,
Gunnar

[Onkel Hans]

@@Gunnar

... hat NICHTS mit der Viewportgröße zu tun.

Hab ja nur mehr auf dieses Stichwort gewartet. *seufz*

Nochmal : Hat jemand bei größerer Auflösung, vorausgesetzt, sein Browserfenster reicht auch wirklich zu 100% vom linken bis zum rechten Bildschirmrand, die gleichen proportionalen Verhältnisse ... ja oder nein?

Du magst vielleicht die Breite in % angeben?

Nein, das mag ich _nicht_, weil sich sonst bei Skalierung der Seite die Länge nicht mitändert, sondern nur die Schrift.

Onkel Hans

[Gunnar Bittersmann]

@@Onkel Hans:

Nochmal : Hat jemand bei größerer Auflösung, vorausgesetzt, sein Browserfenster reicht auch wirklich zu 100% vom linken bis zum rechten Bildschirmrand, die gleichen proportionalen Verhältnisse ... ja oder nein?

Nein. Wie begriffstutzig bist du denn?

Du magst vielleicht die Breite in % angeben?

Nein, das mag ich _nicht_, weil sich sonst bei Skalierung der Seite die Länge nicht mitändert, sondern nur die Schrift.

Hä??

Live long and prosper,
Gunnar

[suit]

Nochmal : Hat jemand bei größerer Auflösung, vorausgesetzt, sein Browserfenster reicht auch wirklich zu 100% vom linken bis zum rechten Bildschirmrand, die gleichen proportionalen Verhältnisse ... ja oder nein?

nein hat er nicht
zum thema bildschirmrand: welchen rand welches meiner monitore meinst du damit? ggf ist das fenster auch auf beide monitore verteilt - ich mach davon vielleicht heute abend mal einen screenshot - sieht echt sch* aus ;)

100 em sind bei 10 px schriftgröße 1000 px - bei 1000 px viewportbreite entspricht das 100%

bei 2000 px viewportbreite entsprechen die selben 100 em nur noch 50%

Nein, das mag ich _nicht_, weil sich sonst bei Skalierung der Seite die Länge nicht mitändert, sondern nur die Schrift.

dem kann ich nicht folgen

[Onkel Hans]

Nein, das mag ich _nicht_, weil sich sonst bei Skalierung der Seite die Länge nicht mitändert, sondern nur die Schrift.
dem kann ich nicht folgen

Na dann mach mal ein div mit der Breitenangabe von zB 50em und schreib was rein.

Wenn du jetzt über den Browser die Schriftgröße änderst, ändert sich zwar die Größe der Schriftz, das div bleibt aber völlig gleich groß und somit wedern die Proportionen der Seite verändert. Und das will ich nicht.

[suit]

Na dann mach mal ein div mit der Breitenangabe von zB 50em und schreib was rein.

Wenn du jetzt über den Browser die Schriftgröße änderst, ändert sich zwar die Größe der Schriftz, das div bleibt aber völlig gleich groß und somit wedern die Proportionen der Seite verändert. Und das will ich nicht.

nein, wenn ich einen div 50 em breit mache ist der bei mir 800px gross, wenn ich die schriftgröße vergrößere wird auch das element proportional zur schriftgröße kleiner

[suit]

proportional zur schriftgröße kleiner

größer natürlich ;)

[Onkel Hans]

dem kann ich nicht folgenIch meinte natürlich %, _das_ war ja dein ursprünglicher Vorschlg.

Also wenn ich einem div 60% Breite gebe .. _dann_ bleibt das div gleich groß und die Schrift ändert sich. Und _darum_ will ich das nicht.

[Harlequin]

Yerf!

Nochmal : Hat jemand bei größerer Auflösung, vorausgesetzt, sein Browserfenster reicht auch wirklich zu 100% vom linken bis zum rechten Bildschirmrand, die gleichen proportionalen Verhältnisse ... ja oder nein?

Jein ;-)

Das hängt von der im Browser eingestellten Schriftgröße ab (verstell die doch einfach mal bei dir).

Den Fall mit dem kleineren Fenster kannst du übrigens auch ganz einfach selber testen...

Gruß,

Harlequin

[suit]

Das hängt von der im Browser eingestellten Schriftgröße ab (verstell die doch einfach mal bei dir).

nein, tut es nicht - bei größerer auflösung, viewport oder sonstwas ist ein 1em immer noch die schriftgröße in pixeln, das verhältnis zum viewport hat nix damit zu tun

[Harlequin]

Yerf!

Das hängt von der im Browser eingestellten Schriftgröße ab (verstell die doch einfach mal bei dir).
nein, tut es nicht - bei größerer auflösung, viewport oder sonstwas ist ein 1em immer noch die schriftgröße in pixeln, das verhältnis zum viewport hat nix damit zu tun

a) Natürlich ist 1em immer die Schriftgröße in Pixel, wo hab ich das bezweifelt?

b) dem OP geht es um die Seitenränder, die sich einstellen... diese sind sowohl von der Fensterbreite als auch der Schriftgröße abhängig, oder etwa nicht?

Gruß,

Harlequin

[suit]

b) dem OP geht es um die Seitenränder, die sich einstellen... diese sind sowohl von der Fensterbreite als auch der Schriftgröße abhängig, oder etwa nicht?

natürlich, aber der OP wollte wissen, ob bei einer anderen auflösung (gemeint war wohl der viewport des browsers) die proportionen automatisch stimmen

[Harlequin]

Yerf!

natürlich, aber der OP wollte wissen, ob bei einer anderen auflösung (gemeint war wohl der viewport des browsers) die proportionen automatisch stimmen

In seiner Frage war auch von einem anderen User die Rede, dessen Browser kann natürlich andere Einstellungen haben...

Gruß,

Harlequin

[Teufelchen]

... hat NICHTS mit der Viewportgröße zu tun.

Hab ja nur mehr auf dieses Stichwort gewartet. *seufz*

Jaja, Hochmut kommt vor dem Fall.

[Kai345]

[latex]Mae  govannen![/latex]

so ganz komme ich mit "em" Breitenangaben nicht klar.

width:50em;

Bei meiner Auflösung von 1024*768 ist jetzt links und rechts vom Container ca.  10% freier Platz, egal, mit welchem Browser ich die Seite ansehe.

Meine Frage:

Wenn sich die Seite jetzt jemand mit höherer Auflösung ansieht, zB mit 1600*1200, hat der dann auch links und rechts ca. 10% leer ... oder mehr?

Wenn sich die Seite jetzt jemand mit niedrigerer Auflösung ansieht, zB mit 800*600, hat der dann auch links und rechts ca. 10% leer ... oder weniger?

Danke für Hilfe und Erklärungen!

em ist zwar eine relative Angabe (bezogen auf die Schriftgröße, die ja jeder individuell setzen kann), aber der Wert des vom Browser tatsächlich gerenderte Ergebnisses ist unabhängig von der Viewportgröße absolut.

Beispiel mit fiktiven Werten:
Bei einer bestimmten *bei dir* eingestellten Schriftgröße wird das Element, dem du width: 50em gegeben hast, tatsächlich auf dem Bildschirm vom Browser mit einer Breite von 600px gerendert.
Bei *einem anderen User* wird dieses Element, weil er eine andere Schriftgröße benutzt, mit 700px dargestellt.

Wenn du nun den Viewport auf beliebige Werte vergrößerst/verkleinerst, bleibt dieses Element trotzdem 600px(bei dem anderen User 700px) breit (da sich die Angabe em ja auf die Schriftgröße bezieht, die sich dabei nicht ändert), das heißt der Restbereich (dein "Abstand") vergrößert oder verkleinert sich. Ist dein Viewport gleich oder gar kleiner als das gerenderte Element, ist der Restabstand sogar 0, ist er größer ist es immer "Viewportbreite minus Elementbreite".

Cü,

Kai

[Cheatah]

Hi,

Bei meiner [Viewport-Größe] von 1024*768 ist jetzt links und rechts vom Container ca.  10% freier Platz, egal, mit welchem Browser ich die Seite ansehe.

*seufz* die Einheit "em" richtet sich nach einer Schriftgröße, nicht nach verfügbarem Platz oder Abständen. Genausogut könntest Du von dem Umstand, dass Du (z.B.) 75kg wiegst, Schlussfolgerungen zu ziehen versuchen, wie viel drei andere Personen wiegen mögen. Antwort: Das können 225kg sein, aber auch ohne weiteres irgendwo anders zwischen 15kg und 480kg liegen. Oder auch außerhalb davon.

Meine Frage:

... geht von einer Vielzahl völlig falscher und sowohl zueinander als auch zur Realität inkompatibler Annahmen aus. "Wie viel ist grün multipliziert mit Hausschuh?"

Cheatah

[Christoph]

Moin.

"Wie viel ist grün multipliziert mit Hausschuh?"

Laut erstem Googletreffer würde ich vermuten '100ml Zimtcreme für die Füße'.

Chistoph