1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

padding-top in Prozent

Dieses Thema im Forum "CSS" wurde erstellt von javaAnfänger3, 2. Januar 2018.

  1. javaAnfänger3

    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:
    1. <!DOCTYPE html>
    2. <html lang="de">
    3.     <head>
    4.         <meta charset="utf-8">
    5.         <title></title>
    6.         <link rel="stylesheet" type="text/css" href="test.css">
    7.         <style>
    8.             html, body{
    9.                 height:100%;
    10.                 width:100%;
    11.                 margin: 0
    12.             }
    13.             #div1{
    14.                 width: 50%;
    15.                 height: 40%;
    16.                 background-color: orange;
    17.                 color:white;
    18.                 font-size: 20px;
    19.             }
    20.             #div2{
    21.                 width: 60%;
    22.                 height: 30%;
    23.                 background-color: yellow;
    24.                 color:white;
    25.                 font-size: 20px;
    26.                 padding-top: 10%;
    27.             }
    28.         </style>
    29.     </head>
    30.     <body>
    31.             <div id="div1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr
    32.                             <div id="div2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
    33.                         </div>
    34.  
    35.  
    36.     </body>
    37. </html>
     
  2. javaAnfänger3

    javaAnfänger3 Grünschnabel

    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">
     
  3. EuroCent

    EuroCent KlappStuhl 2.0

  4. javaAnfänger3

    javaAnfänger3 Grünschnabel

    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."
     
  5. Sempervivum

    Sempervivum Erfahrenes Mitglied

    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.
     
  6. EuroCent

    EuroCent KlappStuhl 2.0

    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? :)
     
  7. Kalito

    Kalito Erfahrenes Mitglied

    Das Padding ergibt sich aus den 400px.
     
  8. EuroCent

    EuroCent KlappStuhl 2.0

    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?
     
  9. MrMurphy

    MrMurphy Mitglied

    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
     
  10. EuroCent

    EuroCent KlappStuhl 2.0

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

    Kalito Erfahrenes Mitglied

    Naja, laut MDN:
     
Die Seite wird geladen...