HTML CSS Problem, Kann wer helfen?
Ich habe vor ein Spiel auf HTML responsiv zu machen. Ich würde es gerne so machen, dass der Button oben links neben dem Canvas angezeigt wird, doch erscheint der unten am Rand. Ich weiß nicht wie ich es ändern kann. Bei der Console habe ich geguckt und das Canvas (width: 320px) nimmt den ganzen Bereich im Feld ein (Im Bild der blaue Bereich). Kann mir wer von euch helfen? Danke im voraus.
Kann mir auch jmd sagen, ob es extra ein deutsches Forum gibt, wo ich fragen wie diese stellen kann?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="icon" href="css/img/galaxsite/galaxsiteIcon.png">
<style>
.gameField {
max-width: 50%;
margin: 25px auto;
background-color: #151618;
box-shadow: 20px 20px 15px black;
padding-top: 2%;
padding-bottom: 2%;
padding-left: 2.5%;
padding-right: auto;
}
canvas {
background-color: #000000;
border: 3px solid #a60cf0;
width: clamp(50px, 50%, 320px);
}
.buttonStart {
background-color: #a60cf0;
}
</style>
</head>
<body>
<div class="gameField">
<canvas class="canvas" width="320px" height="640px </canvas>
<button class="buttonStart">Start</button>
</div>
</body>
<script type="text/javascript" src="js/tetris.js" defer></script>
</html>
1 Antwort
Erweitere den Klassenselektor .gameField um folgende zwei Properties:
display: flex;
align-items: flex-start;
So machst du den Container zu einer Flexbox, in der du die Ausrichtung seiner Kindelemente leicht bestimmen kannst.
In deinem HTML gibt es im Anschluss ebenfalls noch ein paar Änderungen, die vorgenommen werden müssen.
<!-- ... -->
<body>
<div class="gameField">
<button class="buttonStart">Start</button>
<canvas class="canvas" width="320" height="640"></canvas>
</div>
<script src="js/tetris.js" defer></script>
</body>
</html>
Der Starttag deines canvas-Elements ist unvollständig, ebenso wird der Wert für das height-Attribut nicht abgeschlossen. Einheitsangaben (px o.ä.) gehören zudem nicht in den Attributwert. Wenn du mit Einheiten arbeiten möchtest, verwende CSS. In deinem Fall ist das nicht notwendig, die Attribute beziehen sich automatisch auf die Einheit in Pixel.
Damit der Button links neben dem canvas-Element erscheint, wird er in der Reihenfolge vor dieses gerückt.
Der script-Tag gehört des Weiteren in den head- bzw. body-Bereich. Die einzigen für den html-Tag erlaubten Kindelemente sind head und body. Da das type-Attribut auf dem script-Tag redundant ist, würde ich es entfernen.
Kann mir auch jmd sagen, ob es extra ein deutsches Forum gibt, wo ich fragen wie diese stellen kann?
Neben gutefrage: