Internetseite komplett mit EM Angaben - Bin verwirrt

Birke

Birke

Aktives Mitglied
Thread Starter
Dabei seit
01.11.2007
Beiträge
4.089
Reaktionspunkte
158
Huhuu!

Meine Internetseite hat eine Breite von 60.5 em, was umgerechnet 968 Pixel sein müssten, da ich auf 1024 optimiert habe. Um alles zu prüfen habe ich einen Screenshot in Photoshop nachgemessen, doch meine 60.5 em betragen laut PS 1016 Pixel. Das sind ja 18 Pixel zu viel. :kopfkratz:

Hier mal ein Beispiel, wie ich die Breite erreichen wollte:

Code: 
width:60.5em; 
margin:0em; 
padding:0em; 
border:0em;

Drücke ich dann Apfel + "-" um eine kleiner Darstellung zu wählen, ist es allerdings viel zu klein: 847 Pixel
Teste ich es unter Windows, passt es, nachdem ich einmal STRG + "-" drücke, sonst beträgt die Breite 1116 Pixel.

Wie kommt denn das, dass es Am Mac gar nicht passt und ich unter Windows erst die Ansicht verkleinern muss?

Ich hätte es halt gerne so, dass beim Aufrufen der Seite, die 968 Pixel angezeigt werden und der Benutzer sich es dann bei großen Monitoren selbst vergrößern kann. Daher habe ich alles mit EM-Werten angegeben und nicht mit Pixeln. Kann man evtl. etwas am Viewport drehen? :confused:

Grüße, Birke
 
Zuletzt bearbeitet:
Birke schrieb:
Meine Internetseite hat eine Breite von 60.5 em, was umgerechnet 968 Pixel sein müssten, da ich auf 1024 optimiert habe. Um alles zu prüfen habe ich einen Screenshot in Photoshop nachgemessen, doch meine 60.5 em betragen laut PS 1016 Pixel. Das sind ja 18 Pixel zu viel. :kopfkratz:
Zum Vergrößern anklicken....

Beachte den Hinweis beim px/em-Umrechner:
Dies ist nur ein Richtwert, da EM eine relative Maßangabe ist, die von der Schriftgröße abhängt.
… sowie die genaueren Hinweise zum umrechnen.



Birke schrieb:
Wie kommt denn das, dass es Am Mac gar nicht passt und ich unter Windows erst die Ansicht verkleinern muss?
Zum Vergrößern anklicken....

Mit welchen Browsern hast Du das getestet?
Welche Einstellungen bzgl. der Schriftart und -größe hast Du da in den Voreinstellungen des Browsers?
Ich komme mit Deinen Beispiel-Werten (60.5em) in Safari, Firefox und iCab jeweils auf genau die 968px, die der Umrechner angibt – in allen drei Browsern habe ich an der Voreinstellung von 16pt Schriftgröße nichts geändert.

Oder beeinflusst vielleicht ein andere Angabe in Deinen CSS vielleicht die Schriftgröße? Ggf. verlinke doch mal ein komplettes Test-Dokument...

Eins muss man auf jeden Fall sagen:
Wenn Du eine ganz bestimmte Breite in Pixeln haben willst (also eben die 968px), ist es schon vom Prinzip her nicht glücklich, die Breite in em anzugeben; weil die Umrechnung eben (s.o.) nur in bestimmten Konstellationen funktioniert.



(Damit kein Missverständnis aufkommt: Im Prinzip finde ich eine Skalierung im em gut und richtig; aber gleichzeitig auf eine bestimmte Pixelbreite zu hoffen, ist meiner Meinung nach eben der falsche Denkansatz.)
 
  • Gefällt mir
Reaktionen: Birke
EM Angaben sind immer relativ zur Schriftgrösse des Elternelements. Wenn Du den body auf 10px Schriftgrösse setzt (-> 62.5%), kannst Du mit EM in den Kinder-DIVs gut arbeiten. Mache ich seit 1.5 Jahren und funktioniert hervorragend und pixelgenau. 10 Pixel entsprechen 1 EM bei diesem Vorgehen (solange die Schriftgrösse nicht im Elternelement, das ja nicht der body sein muss, wieder verändert wird!).

Ich habe die Kaskade mal ausgeschrieben:

CSS

HTML: 
* { margin: 0; padding: 0; }
body { font-size: 62.5%; }
body div#container { margin: 0 auto; width: 96.8em; background-color: orange; }
body div#container p { }

XHTML

HTML: 
...
<body>
<div id="container">
<p>.......</p>
</div>
</body>
...

So sieht es dann aus:

attachment.php


Anmerkung: Messen kann man auch mit der Webdeveloper Toolbar im Firefox - so erspart man sich ne Menge Arbeit mit den Screens und so ;)

2nd
 
Zuletzt bearbeitet:
  • Gefällt mir
Reaktionen: Birke
2nd schrieb:
EM Angaben sind immer relativ zur Schriftgrösse des Elternelements. Wenn Du den body auf 10px Schriftgrösse setzt (-> 62.5%), kannst Du mit EM in den Kinder-DIVs gut arbeiten. Mache ich seit 1.5 Jahren und funktioniert hervorragend und pixelgenau.
Zum Vergrößern anklicken....

Pixelgenau würde das allerdings nur funktionieren, wenn Du den body wirklich auf 10px setzen würdest, was Du (zumindest in dem geposteten Beispiel) aber nicht tust:

2nd schrieb:
HTML: 
	* { margin: 0; padding: 0; }
	body { font-size: 62.5%; }
Zum Vergrößern anklicken....

Das sind dann 62,5% der Größe, die in den Voreinstellungen des Browsers definiert sind – das heißt, wenn der User daran rumgedreht hat, ist das eben kein pixelgenaues Layout mehr.

Das soll nicht heißen, dass ich Deine Lösung schlecht finde (pixelgenaues Layout wird IMO sowieso maßlos überschätzt), aber pixelgenau ist sie eben nur, so lange die Browser-Voreinstellungen nicht geändert wurden.
 
@Atarimaster: Da hast Du wohl Recht, in allen beiden Punkten.

1. Schriftgrösseneinstellungen: Bei 16px Schriftgrösse als Standard sind 62.5% schon 10px Grösse. Schenkt man den Studien der Usability-Experten Glauben, so kennen 97% aller Internetnutzer die Möglichkeit der Schriftgrössenänderung gar nicht. Wenn ich das mit meinen eigenen Erfahrungen des unbeholfenen Bewegens im Netz bei Kunden und Freunde vergleiche, glaube ich das sofort und ungeprüft ;)

2. Pixelgenaue Layouts: Sehe ich genau so wie Du - der Begriff ist überstrapaziert und vor allem überholt. Heutzutage müssen Layouts nicht mehr in allen Broswern gleich und "pixelgenau" aussehen, zumal das eh nicht der Natur des Mediums "Internet" bzw. der Browser entspricht.

Allerdings führt diese Diskussion hier wohl zu weit und ich habe mich pragmatisch auf die Ausgangsfrage bezogen. Unter der Voraussetzung, dass Punkt 1 zutrifft, ist mein Vorschlag wohl die nahe liegenste Lösung für den/die Birke.

Mal noch ein Einwurf im Kontext dieser Skalierungsgeschichte: Sollte ein Layout nur in der Höhe oder auch in der Breite skalieren? Skaliere ich (bzw. der User) auf beiden Achsen, gibt es horizontale Scrollbalken und damit verliere ich wieder etwas von der Benutzbarkeit. Skaliere ich nur auf der Y-Achse, bleibt der horizontale Scrollbalken weg, aber die Schrift ist trotzdem besser lesbar...

:D

2nd
 
Hinzu kommt bei fehlender "Mutter-PX-Größe" das Problem, dass man sich noch an den 72dpi-Displays aufhängt. Das ist aber heutzutage nicht mehr der Fall. Nicht mal annähernd alle Displays haben heute noch 72dpi, sondern oftmals mehr. Und dann passen auch solche Sachen nicht mehr 1:1.
 
Erst Mal vielen Dank für eure ausführlichen Antworten! Ich hatte gar keine Mail-Benachrichtigung bekommen, dass es Antworten gibt. :kopfkratz:

Atarimaster schrieb:
Im Prinzip finde ich eine Skalierung im em gut und richtig; aber gleichzeitig auf eine bestimmte Pixelbreite zu hoffen, ist meiner Meinung nach eben der falsche Denkansatz.)
Zum Vergrößern anklicken....

Ich hatte nur die Befürchtung, dass es per default zu klein gerendert wird und der Anwender erst Apfel + drücken muss um sie in der "richtigen" Größe zu sehen. Die 968 Pixel sind ja im Prinzip nur mein "gedachter Defaultwert".

2nd schrieb:
EM Angaben sind immer relativ zur Schriftgrösse des Elternelements.
Zum Vergrößern anklicken....

Aha! :shame:

2nd schrieb:
Messen kann man auch mit der Webdeveloper Toolbar im Firefox - so erspart man sich ne Menge Arbeit mit den Screens
Zum Vergrößern anklicken....

Gleich mal installiert und für genial befunden. Danke für den Tipp! :)
Kann man mit diesem Tool auch ein horizontales Raster mit eigenen Abständen anzeigen?

Atarimaster schrieb:
pixelgenau ist sie eben nur, so lange die Browser-Voreinstellungen nicht geändert wurden.
Zum Vergrößern anklicken....

Das war eigentlich Kern meines Verständnisproblems: Ich kann ja bei jeder Seite mit Apfel +/- den Text vergrößern / verkleinern. Bei manchen Seiten wächst aber die gesamte Seite proportional mit. Zum Beispiel bei Heise. Finde ich persönlich am Besten und angenehmsten.

2nd schrieb:
2. Pixelgenaue Layouts: Sehe ich genau so wie Du - der Begriff ist überstrapaziert und vor allem überholt. Heutzutage müssen Layouts nicht mehr in allen Broswern gleich und "pixelgenau" aussehen, zumal das eh nicht der Natur des Mediums "Internet" bzw. der Browser entspricht.
Zum Vergrößern anklicken....

Sehe ich auch so, doch sollten die Elemente der Seite ja auch bei unterschiedlichen Größen richtig zusammenpassen. ;)

2nd schrieb:
Schenkt man den Studien der Usability-Experten Glauben, so kennen 97% aller Internetnutzer die Möglichkeit der Schriftgrössenänderung gar nicht. Wenn ich das mit meinen eigenen Erfahrungen des unbeholfenen Bewegens im Netz bei Kunden und Freunde vergleiche, glaube ich das sofort und ungeprüft
Zum Vergrößern anklicken....

Ich habe auch den Eindruck, dass das die wenigsten kennen und anwenden. Daher meine Sorge, dass die Seite zu klein gerendert wird.

Nochmals wegen der pixelgenauen Realisierung: Darum geht es mir im Prinzip gar nicht. Ich möchte nur nicht, dass es per default zu klein gerendert wird.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten