zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Frage zu relativen Angaben (em)

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 15.12.2004, 11:29
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 15.12.2004, 13:25
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.038
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 15.12.2004, 13:53
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 15.12.2004
Beiträge: 83
mikey befindet sich auf einem aufstrebenden Ast
Standard 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
Mit Zitat antworten
  #4 (permalink)  
Alt 15.12.2004, 14:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

Aus diesem Grunde haben wir ja auch relevante Diskussionen in der Knowledge Base gesammelt.

http://www.xhtmlforum.de/viewforum.php?f=11
__________________
</ulle>
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQuery - Frage zu Selektoren blade_runner Javascript & Ajax 3 05.09.2011 13:46
Frage zu einem Gedanken (DIV positionieren) charlie CSS 1 06.09.2008 11:36
Wie verhalten sich überlappende padding und margin Angaben: (Plus, Min oder Max) braindead CSS 10 21.09.2007 19:37
CSS und Browser feste Angaben |SONY| CSS 1 20.01.2006 20:46
Frage zu <head> Angaben Laiwan (X)HTML 5 31.08.2005 12:33


Alle Zeitangaben in WEZ +2. Es ist jetzt 06:45 Uhr.