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----------------*/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>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!
