Padding-top bezugsgröße?

Curby

Hallo,

ich habe folgenden HTML/CSS Code:

Code

html, body{
    margin:0px;
    padding:0px;
    width:100%;
    height:100%;
    box-sizing: border-box;
    font-family:Lucida Console;
    font-size:14px;
    /*-webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;*/
}


*, *:before, *:after {
  box-sizing: border-box;
}


* {
    margin:0px;
    padding:0px;
}


/*topbar----------------*/
#topbar{
    background-image:url("../img/background.png");
    background-size: 100%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color:#1c1009;
    padding-left:5%;
    padding-top:1%;
    height:28%;
    text-align:left;
    vertical-align:top;
    border-bottom:1px solid #b17b50;
}


#logo{
    height:34%;
}


#canvasholder{
    float:right;
}


#canvasholder canvas{
    background-color:#ff0000;
}
/*topbar----------------*/

Alles anzeigen

HTML

<div id="topbar">
     <img src="img/logo.svg" id="logo">
        <div id="canvasholder">
                <div class="txt_logout"></div>
                <canvas id="onoff" onClick="kr.onoff();" class="topdiagram" width="10" height="10"></canvas>
                <canvas id="logout" onClick="kr.logout();" class="topdiagram"></canvas>
                <canvas id="Zulufttemperatur" class="topdiagram" class="topdiagram"></canvas>
                <canvas id="Produkttemperatur" class="topdiagram" class="topdiagram"></canvas>
                <canvas id="Luefterleistung" class="topdiagram" class="topdiagram"></canvas>
        </div>
    </div>

Alles anzeigen

Meine Frage: Das Padding-leftbezieht sich genau auf die 100% Fensterbreite, da das DIV ja selber 100% Breite hat und diese vomBody erbt (auch 100%).
Das Padding-top - jetzt bei 1% - zerstört jedoch das ganze Layout, da das Padding auf eine Größe gesetzt wird, die ich nicht nachvollziehen kann.
Body hat 100% Höhe, das DIV hat 28% und selbst bei 10% Padding-top wird dieses auf ein Viertel des Bildschirmes gezogen - und das Logo in der Topbar ist nur noch ein paar Pixel groß.

Kann mir da jemand sagen, warum das so ist?

Danke!

MrMurphy

Hallo

Zitat

Kann mir da jemand sagen, warum das so ist?

Ja, das orientiert sich an der Praxis und ist für Anfänger nicht unbedingt nachvollziehbar.

Wenn sich padding-top/-bottom mit Prozentangaben an der Fensterhöhe orientieren würden würde das Layout schnell unansehnlich werden. Deshalb richten sie sich nach der Fensterbreite.

Du kannst das folgendermaßen ausprobieren:

Ändere mal

Code

#topbar{
...
    padding-top:1%;
...
}

auf 10%.

Dann verkleinere und vergrößere mal die Fensterhöhe. Am padding-top wird sich nichts ändern.

Anschließend verkleinere mal die Fensterbreite. Das padding-top wird kleiner werden und bei einer Vergrößerung der Fensterbreite entsprechend größer. Laß dich nicht durch das Umspringen der roten Container irritieren oder lösch testweise mal drei der Container.

Das Verhalten ist so gewollt.

Gruss

MrMurphy

Curby

Zitat von MrMurphy

Wenn sich padding-top/-bottom mit Prozentangaben an der Fensterhöhe orientieren würden würde das Layout schnell unansehnlich werden. Deshalb richten sie sich nach der Fensterbreite.

Das schießt den Vogel ja total ab. Dann soll man ermöglichen, dass man dynamische Zuweisungen macht, wie paddong-top: 5% of width; ....

Aber danke.

Tags