03.07.2024, 15:11
Hallo Sempervivum,
Danke für Deine Antwort.
Entschuldige, ich habe nicht den ganzen html-code gepostet. Jetzt aber.
Das ganze ist ein Spiel für eine Art sagen wir mal Museum.
Es wird also immer auf dem gleichen PC im gleichen Browser im gleichen Format laufen.
Ich wollte es selber probieren und muss sagen es läuft jetzt echt gut.
Für das Zentrieren in den Buttons habe ich jetzt (so weit ich das nachvollziehen kann) für den Button selbst und für das icon im Button eine klasse erstellt (siehe Html).
Im CSS habe ich das dann um ein paar Zeilen ergänzt und es sieht jetzt super aus.
Deinen Tip mit float werde ich mal versuchen einzuarbeiten.
Vielleicht kannst Du über den code nochmal drüberschauen.
Danke für Deine Antwort.
Entschuldige, ich habe nicht den ganzen html-code gepostet. Jetzt aber.
Das ganze ist ein Spiel für eine Art sagen wir mal Museum.
Es wird also immer auf dem gleichen PC im gleichen Browser im gleichen Format laufen.
Ich wollte es selber probieren und muss sagen es läuft jetzt echt gut.
Für das Zentrieren in den Buttons habe ich jetzt (so weit ich das nachvollziehen kann) für den Button selbst und für das icon im Button eine klasse erstellt (siehe Html).
Im CSS habe ich das dann um ein paar Zeilen ergänzt und es sieht jetzt super aus.
Deinen Tip mit float werde ich mal versuchen einzuarbeiten.
Vielleicht kannst Du über den code nochmal drüberschauen.
Code:
html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Ratespiel</title>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body
id="hgbild" style="background-image:url(hintergrund.jpg)">
<aside>
<button onclick="antwort(this)" class="Viecherbutton" id="viech1"> <img class="icon" src="sumpfschrecke.png" alt="sumpfschrecke">Sumpfschrecke</button>
<button onclick="antwort(this)" class="Viecherbutton" id="viech2"> <img class="icon" src="schmetterling.png" alt="sumpfschrecke">Dukatenfalter</button>
<button onclick="antwort(this)" class="Viecherbutton" id="viech3"> <img class="icon" src="schmetterling.png" alt="sumpfschrecke">Schönbär</button>
<button onclick="antwort(this)" class="Viecherbutton" id="viech4"> <img class="icon" src="libelle.png" alt="sumpfschrecke">Große Moosjungfer</button>
<button onclick="antwort(this)" class="Viecherbutton" id="viech5"> <img class="icon" src="schmetterling.png" alt="sumpfschrecke">Goldener Scheckenfalter</button>
</aside>
<main>
<div class="Hinweise">
<b id="btHinweis0" class="clbtHinweis" style="visibility: hidden;" >Hinweis 1</b>
<b id="btHinweis1" class="clbtHinweis" style="visibility: hidden;" >Hinweis 2</b>
<b id="btHinweis2" class="clbtHinweis" style="visibility: hidden;" >Hinweis 3</b>
<b id="btHinweis3" class="clbtHinweis" style="visibility: hidden;" >Hinweis 4</b>
</div>
</main>
</body>
<footerl>
<b id="idStatustext">Wer lebt in diesem Lebensraum? Auswählen per Fingertipp. Aber: nach drei Fehlern ist Schluss</b>
</footerl>
<footerr>
<button onclick="Start()" class="clnavi" id="clbtStart" style="visibility: inline;"><img class="navicon" src="bhome.jpg" alt="Weiter">Start</button>
<button onclick="nLebensraum()" class="clnavi" id="idnLebensraum" style="visibility: hidden;"><img class="navicon" src="bweiter.jpg" alt="Weiter">näxter Lebensraum</button>
<button onclick="Hinweis()" class="clnavi" id="clbtHinweis" style="visibility: hidden;"><img class="navicon" src="bweiter.jpg" alt="Hinweise">Noch mehr Hinweise? Weiter drücken</button>
</footerr>
</html>Code:
css
body{
display: grid;
gap: 0em;
margin: 0em;
font-family: sans-serif;
background-size:contain;
background-repeat: no-repeat;
}
body{
grid-template-columns: 350px 1150px;
grid-template-rows: 740px 140px;
}
footerl {
grid-column: 1;
float: right;
clear: right;
padding: 0px;
}
footerr {
grid-column: 2;
float: right;
clear: right;
padding: 0px;
justify-content:flex-end;
}
main {
background: transparent;
}
aside {
background: #0f16001c;
justify-self: left;
}
.clbtHinweis{
display: inline-block;
background-color: rgba(5, 58, 5, 0.473);
border: none;
border-radius: 15px;
color: white;
padding: 15px 35px;
text-decoration: none;
font-size: 20px;
cursor: pointer;
margin: 100px;
width: 250px;
}
.Viecherbutton{
background-color: rgba(5, 58, 5, 0.473);
width: 350px;
height: 80px;
border: none;
margin-top: 50px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
color: white;
text-decoration: none;
font-size: 30px;
text-align: left;
align-items: center;
cursor: pointer;
display: flex;
flex-direction: row;
}
.icon{
height: 55px;
display: inline-flexbox;
align-self: center;
padding-right: 10px;
float: right;
}
.navicon{
height: 75px;
display: inline-flexbox;
align-self: center;
float:left;
padding-left: 10px;
}
.clnavi{
background-color: transparent;
border: none;
color: white;
text-decoration: none;
font-size: 15px;
cursor: pointer;
width: 300px;
height: 40px;
margin-right: 75px;
margin-top: 25px;
float: right;
text-align: left;
align-items: center;
display: flex;
flex-direction: row-reverse;
padding: 0 0;
}
#idStatustext{
float: left;
color: white;
margin-top: 25px;
padding: 0px 35px;
width: 280px;
}