padding-top in Prozent

javaAnfänger3

Grünschnabel
Hallo,
kann mir einer erklären, was mit dieser Aussage gemeint ist?
Ich verstehe enfach nicht, was gemeint ist.
Selbst mit Code verstehe ich nicht die Aussage.

"Wenn man padding-top in Prozent angibt, dann bezieht sich diese Prozentangabe nicht etwa auf die Höhe der Seite, sondern auf die Breite. D.h. mit padding-top in Prozent haben wir plötzlich etwas, das eine Höhe erzeugt.
Diese Höhe aber in Abhängigkeit von der Breite erzeugt. => Wir haben eine skalierbare Höhe."

HTML:
<!DOCTYPE html>
<html lang="de">
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="test.css">
        <style>
            html, body{
                height:100%;
                width:100%;
                margin: 0
            }
            #div1{
                width: 50%;
                height: 40%;
                background-color: orange;
                color:white;
                font-size: 20px;
            }
            #div2{
                width: 60%;
                height: 30%;
                background-color: yellow;
                color:white;
                font-size: 20px;
                padding-top: 10%;
            }
        </style>
    </head>
    <body>
            <div id="div1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr
                            <div id="div2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
                        </div>


    </body>
</html>
 
Und noch eine Frage.
Wozu wird diese Zeile verwendet? Das hat wahrscheinlich irgendwas mit Mobile Webdesign zu tun aber ich weiß nicht genau wozu man diese Zeile braucht.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
Ich weiß aber immer noch nicht, was mit der Aussage gemeint ist?

"Wenn man padding-top in Prozent angibt, dann bezieht sich diese Prozentangabe nicht etwa auf die Höhe der Seite, sondern auf die Breite. D.h. mit padding-top in Prozent haben wir plötzlich etwas, das eine Höhe erzeugt.
Diese Höhe aber in Abhängigkeit von der Breite erzeugt. => Wir haben eine skalierbare Höhe."
 
Beispiel:
Breite 400px
Höhe 200px
padding-top: 10%
Es ergibt sich ein Wert von 40px und nicht 20px wie man eigentlich erwarten würde.
 
Beispiel:
Breite 400px
Höhe 200px
padding-top: 10%
Es ergibt sich ein Wert von 40px und nicht 20px wie man eigentlich erwarten würde.

Rechnerisch müsste es aber 20px von 200px sein.
Wie kommt die 20px Differenz zu stande?

Er rechnet ja nicht mal 2 sondern er weiß ja schon vorweg das er nur den Abstand der Höhe berechnen muss.

Wie also kommt da die Differenz zustande? :)
 
Das Padding ergibt sich aus den 400px.
Das versteh Ich nicht, wieso die Abhängigkeit der Breite?

Wenn er TOP Berechnet, berechnet er doch nicht die Breite.
Das ergibt für mich keinen Sinn oO
Für was dann padding-left, padding-right wenn es bei top schon die Breite nimmt.

Gibt es dafür eine Logisch und Plausible Erklärung?
 
Hallo

Gibt es dafür eine Logisch und Plausible Erklärung?

Ja, das erleichtert das Erstellen von Webseiten.

Wer das padding wirklich von der Fensterhöhe abhängig machen will kann zu der Einheit vh greifen. Die funktioniert ähnlich wie Prozent, 100vh sind die aktuelle Fensterhöhe.

Gruss

MrMurphy
 
Hallo



Ja, das erleichtert das Erstellen von Webseiten.

Wer das padding wirklich von der Fensterhöhe abhängig machen will kann zu der Einheit vh greifen. Die funktioniert ähnlich wie Prozent, 100vh sind die aktuelle Fensterhöhe.

Gruss

MrMurphy

Das ist mir schon bewusst.
Das erklärt aber nicht warum er die Breite als Berechnung einbezieht, statt der Höhe. :)
 
Zurück