XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   Knowledge Base (http://xhtmlforum.de/forumdisplay.php?f=79)
-   -   85 + 15 = 110?! (http://xhtmlforum.de/showthread.php?t=32926)

beeviz 04.08.2004 11:28

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? :roll:
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 :?:

ulle 04.08.2004 14:16

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>

beeviz 04.08.2004 14:28

ah ok. danke. das war mir neu :)

ulle 24.09.2004 14:41

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>



Alle Zeitangaben in WEZ +2. Es ist jetzt 01:23 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019