nicht angemeldet
Umrechnung von px in em
Hallo
Ich will diesen div: kasten mit höhe und weite nicht in px angeben sondern in em woher weiß ich wieviel em 100px sind
body
{
height: 100%;
width: 100%;
color: black;
background: white;
}
#kasten
{
border: solid 1px blue;
top: 100px;
left: 100px;
height: 100px;
width: 100px;
font-size: 1.9em;
}
<body>
<div id="kasten">Hallo ihr da</div>
-
Hallo Hugo,
Ich will diesen div: kasten mit höhe und weite nicht in px angeben sondern in em woher weiß ich wieviel em 100px sind
Gar nicht. px ist eine absolute Größe (bei ein und demselben Ausgabegerät), und em ist eine relative: http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische
100px bleiben somit immer gleich, 10em zum Beispiel werden mit zunehmender Schriftgröße auch immer breiter. Das liegt an der Definition von em!
Mit anderen Worten: px und em lassen sich wegen ihrer Definition nicht angemessen umrechnen.
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
--
Linux is like a wigwam - no windows, no gates and an Apache inside!
SELFCode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
http://emmanuel.dammerer.at/selfcode.html-
Danke für deine Antwort
aber ich hab dann noch eine problem:
und zwar habe ich zwei navi leisten in denen was drinsteht.
Und diese sind bei normaler Ansicht (also Schriftgröße des Explorers: normal) gleich lang. Wenn ich aber die Schriftgröße größer stelle dann sind sie nicht mehr gleich lang.Hier der Quelltext: (entscheidend sind #navi1 und #navi2)
(einfach rauskopieren und anzeigen lassen, schriftgröße ändern dann wirst du sehen was ich meine)schon mal danke im voraus
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html>
<head>
<title>Testseite</title>
<style>
body
{
background-color: white;
font-family: courier new;
font-size: 0.9em;
color: black;
}
a
{
text-decoration: none;
color: yellow;
}
a:hover
{
text-decoration: none;
color: orange;
}
#mitte
{
position: absolute;
top: 50%;
left: 50%;
height: 100px;
width: 100px;
}
#kasten
{
position: absolute;
top: -180px;
height: 26em;
left: -350px;
width: 48.6em;
background: #0080FF;
}
#navi1
{
position: absolute;
top: -10px;
height: 1em;
left: -350px;
width: 48.6em;
}
#navi2
{
position: absolute;
top: 5px;
height: 1em;
left: -350px;
width: 48.6em;
}
.navi1
{
background: navy;
color: yellow;
}
.navi2
{
background: #0080C0;
color: yellow;
}
.n1
{
color: yellow;
padding: 4px 0px 4px 30px;
}
.n2
{
color: yellow;
padding: 4px 0px 4px 20px;
}
.n3
{
color: yellow;
padding: 4px 0px 4px 40px;
}
.n4
{
color: yellow;
padding: 4px 0px 4px 20px;
}
#banner
{
position: absolute;
top: -180px;
height: 170px;
left: -350px;
width: 700px;
}</style>
</head><body>
<div id="mitte">
<div id="kasten" style="font-size: 1em">
</div>
<div id="navi1" class="navi1" style="font-size: 1em">
<a href="Home.html" title="Homepage - Acceskey a" acceskey="a" tabindex="1">Home</a> <a href="Home.html" class="n2" title="Kontakt - Accesskey b" accesskey="b" tabindex="2">Kontakt</a> <a title="Impressum - Acceskey c" href="Impressum.html" class="n2" accesskey="c" tabindex="3">Impressum</a> <a href="Forum.html" class="n2" title="Forum - Accesskey d" accesskey="d" tabindex="4">Forum</a>
</div>
<div id="navi2" class="navi2">
<a href="News.html" class="n3" title="News - Accesskey z" accesskey="z" tabindex="6">News</a> <a href="Suche.html" class="n4" title="Suche - Accesskey y" accesskey="y" tabindex="7">Suche</a> <a href="ueberuns.html" class="n4" title="über uns - Accesskey - x" accesskey="x" tabindex="8">Über uns</a>
</div>
<div id="banner">
<img src="banner.jpg" height="170" alt="Ein Schneebedeckter Ast einer Winterlandschaft">
</div>
</div></body>
</html>-
Hallo Hugo!
aber ich hab dann noch eine problem:
und zwar habe ich zwei navi leisten in denen was drinsteht.
Und diese sind bei normaler Ansicht (also Schriftgröße des Explorers: normal) gleich lang. Wenn ich aber die Schriftgröße größer stelle dann sind sie nicht mehr gleich lang.Eine direkte Umrechnung ist, wie schon Marc Reichelt hier gepostet hat, schon allein
deshalb nicht möglich, da jeder Besucher deiner Seite eine andere Schriftgröße
voreingestellt haben kann.Wenn du ALLE px - Angaben durch em ersetzt, wird dein Code in etwa funktionieren.
Hinsichtlich des Maßstabs musst du halt experimentieren.Aber: Die absolute Positionierung macht das Ganze im Hinblick auf die verschiedenen
Browser erheblich komplizierter.Im Body Schriftangabe 101%, gewünschte em Angabe dann in einer alle anderen
Boxen umgebenden Box.Grüße
saltun -
Hallo Hugo,
Wenn ich aber die Schriftgröße größer stelle dann sind sie nicht mehr gleich lang.
ich habe alles unwichtige gestrichen. Die entscheidenden Zeilen sind:
body
font-size: 0.9em;<div id="navi1" class="navi1" style="font-size: 1em">
<div id="navi2" class="navi2">navi2 erbt, da keine explizite font-size angegeben wurde, 0.9em vom body. Für navi1 hingegen wurde font-size:1em angegeben.
Daher die Unterschiede.Grüße,
Jochen
-
Hi,
navi2 erbt, da keine explizite font-size angegeben wurde, 0.9em vom body. Für navi1 hingegen wurde font-size:1em angegeben.
Daher die Unterschiede.falsch! die Angabe von 1em ist irrelevant, da sie nichts ändert.
Außerdem erbt auch navi1 die font-size 0.9em von body. Würde man für navi1 z.B. ebenfalls 0.9em angeben, resultierten daraus 0.81em.Tatsächlich ist die Höhe beider Elemente identisch. Die in px angegebenen absoluten Positionierungen sorgen allerdings dafür, daß navi1 teilweise verdeckt wird. Zumindest in standardkonformen Browsern ist dies deutlich zu sehen.
Abhilfe ist einfach: Verzicht auf absolute Positionierung und Ersatz durch margin in em.freundliche Grüße
Ingo-
Hallo,
falsch! die Angabe von 1em ist irrelevant, da sie nichts ändert.
nichts ändert, oder nichts ändern sollte?
warum verhält sich dann (im IE):
<div class="navi1" style="font-size: 1em">
<div class="navi2">anders als:
<div class="navi1" style="font-size: 1em">
<div class="navi2" style="font-size: 1em">Grüße,
Jochen
-
Hi,
falsch! die Angabe von 1em ist irrelevant, da sie nichts ändert.
nichts ändert, oder nichts ändern sollte?
beides. ;-)
warum verhält sich dann (im IE):
<div class="navi1" style="font-size: 1em">
<div class="navi2">anders als:
<div class="navi1" style="font-size: 1em">
<div class="navi2" style="font-size: 1em">weil:
body {font-size:0.9em}
für den nicht IE dasselbe ist wie:
body {font-size:90%}
ändere *das* in dem Beispiel und auch für den IE ändert sich nichts mehr.Du kannst gerne auf meiner in der Signatur verlinkten Seite nachlesen, warum man - dem buggy IE zuliebe - niemals ausschließlich em verwenden sollte.
freundliche Grüße
Ingo
-
-
-
-
-
Hallo Marc,
Gar nicht. px ist eine absolute Größe (bei ein und demselben Ausgabegerät), und em ist eine relative: http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische
ansich gebe ich dir Recht, eine Umrechung erscheint mir nicht möglich. Aber was sagt man dazu:
Relative Einheiten sind:
em : die 'font-size' der betreffenden Schrift
ex : die 'x-height' der betreffenden Schrift.
px : Pixel, relativ zum AnzeigegerätQuelle: Edition W3C.de
Ist das ein Fehler in der Übersetzung? Nö (siehe http://www.w3.org/TR/CSS21/syndata.html#length-units). Was macht man jetzt? Sehe ich das falsch?
Mit freundlichen Grüßen
André
-
Hallo Zeromancer,
ansich gebe ich dir Recht, eine Umrechung erscheint mir nicht möglich. Aber was sagt man dazu:
Relative Einheiten sind:
em : die 'font-size' der betreffenden Schrift
ex : die 'x-height' der betreffenden Schrift.
px : Pixel, relativ zum AnzeigegerätQuelle: Edition W3C.de
Ist das ein Fehler in der Übersetzung? Nö [...]
Ganz einfach, wenn du etwas weiter unten schaust wird es erklärt: 1px ist sehr abhängig vom verwendeten Ausgabegerät, z.B. Bildschirm oder Laserdrucker - mit unterschiedlichen Auflösungen. So soll 1px auf dem Bildschirm mit entsprechender Auflösung durch einen Bildpunkt dargestellt werden, während bei einem Laserdrucker der gleiche Pixel durch z.B. 16 Bildpunkte (4x4) angezeigt wird.
Das macht px zu einer relativen Einheit.Trotzdem wird bei der gleichen Auflösung und unterschiedlichen Schriftgrößen 1px immer gleich angezeigt, nicht aber bei em - das sich mit der Schriftgröße verändert.
Insofern hat SELFHTML es auf seiner Seite auch gut beschrieben: Je nach Betrachtungsart ist die Einheit px relativ oder absolut anzusehen.
Bis dann!
Marc Reichelt || http://www.marcreichelt.de/
--
Linux is like a wigwam - no windows, no gates and an Apache inside!
SELFCode: ie:{ fl:| br:> va:} ls:< fo:} rl:( n4:( ss:) de:> js:| ch:? sh:| mo:) zu:)
http://emmanuel.dammerer.at/selfcode.html-
Moin!
Ganz einfach, wenn du etwas weiter unten schaust wird es erklärt: 1px ist sehr abhängig vom verwendeten Ausgabegerät, z.B. Bildschirm oder Laserdrucker - mit unterschiedlichen Auflösungen. So soll 1px auf dem Bildschirm mit entsprechender Auflösung durch einen Bildpunkt dargestellt werden, während bei einem Laserdrucker der gleiche Pixel durch z.B. 16 Bildpunkte (4x4) angezeigt wird.
Das macht px zu einer relativen Einheit.Es gibt einen ganz simplen Grund, warum Pixel eine relative Einheit ist: Ein Pixel soll dem Betrachter immer gleich groß erscheinen - deshalb ist ein Pixel als sehr kleiner Winkel definiert, den man sieht. In Abhängigkeit von der Entfernung der Anzeigefläche zum Auge muß dementsprechend entweder ein stecknadelkopfgroßer Dünnfilmtransistor im einzelnen Monitor oder ein komplettes Monitorpanel beim zusammengesetzten Riesenmonitor aus 1024 * 768 Monitoren (von dem man natürlich entsprechend weit entfernt steht), obwohl auch dort ganz winzige Pixel möglich wären. Die kann man dann lieber zur Kurzenglättung nutzen.
Die Realität sieht etwas anders aus: Der Bildschirmpunkt als kleinste darstellbare Einheit wird derzeit immer noch als "Pixel" angesprochen, ohne dass es zu irgendeiner Umrechnung und Beeinflussung durch irgendwelche Blickwinkel kommt - was grundsätzlich nicht böse ist, denn das oben konstruierte Szenario bedeutet natürlich auch keine absolut immer gleich große Darstellung des Bildes, weil man sich ja dennoch unterschiedlich weit vom Riesenmonitor entfernen kann. Aus einem Kilometer Entfernung ist auch so eine Darstellung vielleicht etwas klein. Genauso ist derzeit mit den Grafikkartenpixeln auf unterschiedlich großen "Kleinmonitoren" die Lage - je nach persönlicher Präferenz leistet man sich auf seinem 19"-Monitor 800*600 oder auch 1600*1200.
- Sven Rautenberg
-
-
-
-
Hallo Hugo,
woher weiß ich wieviel em 100px sind
1em entspricht ca. 16px. Allerdings ist das nur ein ungefährer Näherungswert, die Gründe dafür wurden bereits genannt.
Grüße,
Roland