zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > Knowledge Base
Seite neu laden 85 + 15 = 110?!

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 04.08.2004, 12:28
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.06.2004
Beiträge: 172
beeviz befindet sich auf einem aufstrebenden Ast
Standard 85 + 15 = 110?!

hab mir gerade mal aus spaß was gebastelt. und war soll am linken rand n container sein der 15% abstand nach oben hat, und 85% hoch ist.

mein Code sieht so aus
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html><head>
<title>test</title>
<style type="text/css">
html, body {height: 100%; margin: 0 0 0 0; }
#left {width: 150px; 
	margin-top: 15%;
	height: 85%;
	background: #c3ffff;
	float: left;
}
</style>
<body>
<div id="left"></div>
</body>
</html>
Im Firefox sowie im Internet Explorer hab ich nun nen vertikalen scrollbalken von ca. 1,5cm höhe (1280x1024).
Wie kommt das? hat doch bestimmt wieder irgendwas mitm Viewport u tun, oder?
Oder wieso sind bei hier 85%+15% mehr als die 100 sichtbaren % ?

Wenn ich das floating weglass dann hab ich sogar UNTEN DRUNTER nen Abstand von 15%, obwohl ich margin-bottom: 0; hatte
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 04.08.2004, 15:16
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 02.06.2003
Beiträge: 2.441
ulle befindet sich auf einem aufstrebenden Ast
Standard

moin,

height und width beziehen sich bei relativen (%) Angaben auf das Elternelement.

<edit>
margin, padding beziehen sich bei relativen (%) Angaben auf die Breite des Elternelement.

margin, border, padding beziehen sich bei relativen (em) Angaben auf die Schriftgröße im Element.

weitere Info weiter unten
</edit>
__________________
</ulle>
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 04.08.2004, 15:28
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 26.06.2004
Beiträge: 172
beeviz befindet sich auf einem aufstrebenden Ast
Standard

ah ok. danke. das war mir neu
Mit Zitat antworten
  #4 (permalink)  
Alt 24.09.2004, 15:41
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
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



Alle Zeitangaben in WEZ +2. Es ist jetzt 13:43 Uhr.