Hallo,
für ich ist das Thema CSS noch recht neu und ich beschäftige mich gerade sehr intensiv damit.
Trotzdem komme ich bei einen Problem gerade nicht weiter:
Es sollen Buttons in einer Art Matrix angezeigt werden.
Die Größe der Buttons sollen sich je nach Fenstergröße ändern und zwischen den Buttons sollte ein minimaler Abstand bestehen.
Das ist zur Zeit mein Ansatz:
HTML
<!doctype html>
<html lang="de">
<head>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.matrix {
width: 100%;
height: 100%;
}
.columnBtn {
display: inline-block;
float: left;
width: 8%;
margin-left: 2%;
}
.menubuttons {
float: left;
height: 9%;
margin-top: 2%;
border: 1px solid #aaa; /* Rahmen */
border-radius: 5px; /* Abgerundete Ecken */
background: #eee; /* Hintergundfarbe für ältere Browser */
display: block; /* Für horizontale Darstellung: display: inline-block; */
text-align: center; /* Horizontale Text-Ausrichtung */
padding-top: 5px; /* OPTIONAL: Vertikale Text-Ausrichtung */
text-decoration: none; /* Links nicht unterstrichen */
color: #333; /* Textfarbe */
}
.menubuttons:hover {
background: #ccc; /* Alternative Hintergrundfarbe beim Überfahren */
}
</style>
</head>
<body>
<div class="matrix">
<div class="columnBtn">
<button class="menubuttons" href="#Link1">1-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">2-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">3-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">4-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">5-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">6-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">7-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">8-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">9-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
<div class="columnBtn">
<button class="menubuttons" href="#Link1">10-Text</button>
<button class="menubuttons" href="#Link2">Button-Text</button>
<button class="menubuttons" href="#Link3">Button-Text</button>
<button class="menubuttons" href="#Link4">Button-Text</button>
<button class="menubuttons" href="#Link5">Button-Text</button>
<button class="menubuttons" href="#Link6">Button-Text</button>
<button class="menubuttons" href="#Link7">Button-Text</button>
<button class="menubuttons" href="#Link8">Button-Text</button>
</div>
</div>
</body>
</html>
Alles anzeigen
Hat jemand eine Idee?
Vielen Dank