Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 24.09.2004, 14:41
ulle ulle ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

hier noch ein "work out" zum Thema:

relative Angaben für margin, border, padding

Einfach den CODE kopieren und Anzeigen; Erklärung im Dokument
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>
__________________
</ulle>
Mit Zitat antworten