Hallo Community ich bin gerade dabei ein kleines Spiel in Javascript zu programmieren, jedoch habe ich ein wenig Probleme mit dem Menü. Es soll sich der Größe nach anpassen, doch dies funktioniert nicht wie gewollt. Da bräuchte ich wenig Hilfe von ein paar CSS Profis.
Hier einmal wie es ungefähr aussehen sollte:
https://drive.google.com/file/d/0B29jJmhecmhyWmhQUWFKVS1tV00/view
Und hier der bisherige Code:
Hoffe ihr könnt mir weiterhelfen. :)
Hier einmal wie es ungefähr aussehen sollte:
https://drive.google.com/file/d/0B29jJmhecmhyWmhQUWFKVS1tV00/view
Und hier der bisherige Code:
Code:
<html>
<head>
<title>Layout Test</title>
<meta name="viewport" content="width=device-width, height=device-height">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<meta name="viewport" content="target-densitydpi=device-dpi" />
<meta name="mobile-web-app-capable" content="yes">
</head>
<body>
<menu>
<center> <h1>NameDerApp</h1></center>
<button class="Big">1</button>
<button class="CenterSmall">2</button>
<button class="CenterSmall" style="margin-left: 5%;">3</button>
<button class="CenterSmall" style="margin-left: 2%;">4</button> <!--Sollte eigentlich bei 5% sein.-->
<button class="Big" style="margin-top: 5%;">5</button>
<button class="BottomSmall">5</button>
<button class="BottomSmall" style="margin-left: 10%;">5</button>
<button class="BottomSmall" style="margin-left: 10%;">5</button>
<button class="BottomSmall" style="margin-left: 10%;">5</button>
</menu>
</body>
</html>
<style>
*
{
margin:0px;
padding:0px;
overflow: hidden;
border-width: 0px;
}
menu
{
width: 90%;
height: 90%;
margin-left: 5%;
margin-top: 5%;
position: absolute;
}
.Big
{
height: 20%;
width: 100%;
background-color: #A51000;
}
.CenterSmall
{
height: 20%;
width: 30%;
margin-Top: 5%;
background-color: #A51000;
}
.BottomSmall
{
height: 15%;
width: 15%;
border-radius: 100%;
margin-Top: 5%;
background-color: #A51000;
}
</style>Hoffe ihr könnt mir weiterhelfen. :)
