Anzeige

padding-top in Prozent

#1
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>
 
#2
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">
 
#4
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."
 

EuroCent

KlappStuhl 2.0
#6
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? :)
 
#9
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
 

EuroCent

KlappStuhl 2.0
#10
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. :)
 
Anzeige

Neue Beiträge

Anzeige