Beiträge von Curby

Hallo,

ich habe das Problem, dass die Skalierung meiner Bilder irgendwann stoppt.

Wenn ich den Browser immer kleiner mache, hört die Skalierung der Bilder einfach irgendwann auf. Warum kist das so?

Danke, ihr habtmr hier schon sehr geholfen

Der CSS Code dazu:

#menuholder{
    float:left;
    width:20%;
    background-color:#1c1009;
    height:58%;
    padding-left:5%;
    display: block;
} 


#menu{
    display: none;
    vertical-align: middle;
    width:100%;
    height:100%;
    padding-top:30px;
}


#img_hand{
    position:relative;
    left:-5px;*/
}


#img_settings{
    position:relative;
    left:-2px;
}


.menubutton{
    width:100%;
    height:20%;
    padding-top:0px;
    cursor:pointer;
}


.menubutton img{
    height:50%;
}

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.

Hallo,

ich habe grade Probleme mit dem skalieren eines Canvas.

Ein Canvas scheint eine default Höhe, sowie Breite zu haben, ungefähr 300x150px.

Ich füge nun ein Canvas auf meiner Seite ein, und gebe diesem einen prozentualen Höhenwert mit CSS. Nun bleibt jedoch das Seitenverhältnis gleich - ich hätte aber gerne, dass die Breite den gleichen ABSOLUTEN Wert hat.

HTML-Code:
<style>
#beispiel{
height:50%;
}
</style>
<canvas id="beispiel"></canvas> 
Wenn ich per JavaScript die Höhe auslese und der Breite zuordner habe ich zwar ein quadratisches Canvas - jedoch wenn ich dieses anschließend mit JavaScript bemale bezieht sich das Javascript immernoch auf das ursprüngliche Seitenverhältnis. D.H. canvas.width != canvas.height, canvas.width = canvas.height*2.

Ein runder Kreis wird dann zur Elipse.

Kann mir da jemand helfen?

Danke!

Hallo,

ich habe folgenden HTML/CSS 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----------------*/

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