|
|||
Frage zu relativen Angaben (em)
Moin !
mein Problem, ich habe identische relative Breitenangaben für 2 Elemente, aber sie werden verschieden breit dargestellt die Breite wird dabei offenbar in Abhängigkeit der font-size Angabe jedes mal neu berechnet kleines Code-Schnippsel * { padding: 0; margin: 0; } body { text-align: center; background-color: #ececec; font-family: Arial, arial, sans-serif; font-size: 100.01%; } div.test { width: 20em; height: 2em; background-color: red; } h1 { font-size: 1.6em; font-weight: normal; letter-spacing: 0.9em; width: 20em; text-align: left; background-color: #ddddff; } im HTML code dann <h1>Test</h1> <div class="test"></div> (selbst komplett OHNE Inhalt, sind die Breiten verschieden, hat also nichts mit overflow zu tun) und zumindest bei mir (IE 6.0.2) sind h1 und div verschieden breit wenn ich nun die Schriftgröße des H1 auf 1em runtersetze, sind beide Elemente gleichbreit, setze ich sie auf 0.8em wird das H1 Element tatsächlich kleiner als das DIV (das offenbar 1em als Initialwert besitzt?) meine Fragen Ist das vom Browser so korrekt dargestellt ? Warum ist das so ? (CSS Vererbung ..eigentlich hier ja nicht?) Wie kann man das verhindern ohne zusätzliche DIVs/Spans zu benutzen ? MfG Micha |
Sponsored Links |
|
|||
Ich poste mal den Code, den Ulle hier mal zur Verdeutlichung dieses Themas gepostet hat. Darin wirds sehr gut dargestellt:
Einfach ein html-file draus machen, anschauen und probieren. Grüsse andir Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>xxxx</title> <style type="text/css"> /*<![CDATA[*/ html,body { margin: 0; padding: 3px; background-color: #FFCC33; color: #000000; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 100.01%; } div.em { margin: 1em; /* beeinflusst durch font-size */ border: 1em solid #000000; /* beeinflusst durch font-size */ padding: 1em; /* beeinflusst durch font-size */ } div.prozent { margin: 1%; border: 1px solid #000000; /* prozentuale Angaben nicht erlaubt */ padding: 1%; font-size: 0.8em; /* beeinflusst nicht die prozentualen Angaben von margin,padding */ } div.inhalt { /* diese Klasse ist nur zum sichtbar machen des verbleibenden Inhalts */ margin: 0; border: 0; padding: 0; color: #663300; background-color: #FFEECC; } p { margin: 2em; color: #0033DD; font-size: 0.8em; } hr { margin: 2em 2em 0; } /*]]>*/ </style> </head><body> Folgende Container enthalten relative Angaben [em] für margin, boder und padding - hier wird deutlich das diese Angaben in Abhängigkeit zu der im Container benutzten Schriftgröße steht. </p> <div class="em"> <div class="inhalt"> margin: 1em; border: 1em; padding: 1em; / font-size: 1em (geerbt von BODY -> font-size: 100.01%); </div> </div> <div class="em" style="font-size: 0.7em"> <div class="inhalt"> margin: 1em; border: 1em; padding: 1em; / font-size: 0.7em; </div> </div> <div class="em" style="font-size: 1.5em"> <div class="inhalt"> margin: 1em; border: 1em; padding: 1em; / font-size: 1.5em; </div> </div> <div class="em" style="font-size: 5px"> <div class="inhalt"> margin: 1em; border: 1em; padding: 1em; / font-size: 5px; </div> </div> <hr /> Folgende Container enthalten relative Angaben [%] für margin und padding , für border nicht erlaubt deshalb 1px - hier wird deutlich das diese Angaben in Abhängigkeit zur Inhalts-Breite, nicht Höhe, des Eltern-Elements steht. </p> <div class="prozent" style="width: 500px;"> <div class="inhalt"> margin: 1%; padding: 1%; / width: 500px; </div> </div> <div class="prozent" style="width: 50em;"> <div class="inhalt"> margin: 1%; padding: 1%; / width: 50em; </div> </div> <div class="prozent" style="width: 95%;"> <div class="inhalt"> margin: 1%; padding: 1%; / width: 95%; </div> </div> </body></html>
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
|
|||
Problem gelöst
Frage wurde zwischenzeitlich beantwortet, der Code ist trotzdem sehr interessant
leider ist die Beschreibung von w3c.org hierzu nicht sonderlich verständlich http://www.w3.org/TR/REC-CSS2/syndat...lue-def-length MfG Micha |
|
|||
Aus diesem Grunde haben wir ja auch relevante Diskussionen in der Knowledge Base gesammelt.
http://www.xhtmlforum.de/viewforum.php?f=11
__________________
</ulle> |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Welche Angaben für mod-headers in der .htaccess? | Sabine1 | Serveradministration und serverseitige Scripte | 0 | 20.11.2017 15:29 |
Frage zu einem Gedanken (DIV positionieren) | charlie | CSS | 1 | 06.09.2008 12:36 |
Wie verhalten sich überlappende padding und margin Angaben: (Plus, Min oder Max) | braindead | CSS | 10 | 21.09.2007 20:37 |
CSS und Browser feste Angaben | |SONY| | CSS | 1 | 20.01.2006 21:46 |
Frage zu <head> Angaben | Laiwan | (X)HTML | 5 | 31.08.2005 13:33 |