HTML/CSS HexagonBilder als Muster platzieren

Veröffentlicht 30. Januar 20196 j

Hallo!

Ich schreibe gerade an meiner ersten eigenen HP. Nutze bewusst ausschließlich Html/Css.
Für meine Hobbys habe ich Hexagonbilder erstellt. Soweit alles gut. Aber ich möchte sie nicht einfach "in den Raum werfen". Mir kam also die Idee, etwa 5 Hexagonbilder einfach mittig zu platzieren. Habt ihr ne Idee, wie ich das am einfachsten umgesetzt bekomme? Ich hab mir das etwa so vorgestellt, wie unten im Bild zu sehen.

LG FIN

30. Januar 20196 j

Hi!

Erzähl mal 'was genauer: Lass uns das Webbrowser-Fenster als "Canvas" bezeichnen.

Was soll nun wie (vertikal/horizontal) zentriert werden?
Soll es relativ zur Canvasgröße mittig oder absolut positioniert werden?

Aber du kannst die Hexagone als transparente PNGs realisieren und als <img> einbinden. Diese packst du pro Zeile in einen <div> mit horizontaler Flussrichtung und Zentrierung der Inhalte. Diese "Zeilen-<div>s packst du dann einen weiteren <div> mit vertikaler Flussrichtunglegen, jeder 2. Zeile gibst du aber 1 <img> weniger. Schließlich musst du die <div>s noch überlappen lassen, da habe ich nur grad keinen Plan wie das geht. ?

Bearbeitet 30. Januar 20196 j von L3v14than

30. Januar 20196 j

Hier ein Codebeispiel basierend auf FlexBox um die Zentrierung vertikal zu realisieren. Das Überlappen wurde mit einem negativen Margin der Zeilen-<div>s umgesetzt. Je nach konkreter Verwendung könnte man auch noch auf absolute Positionierung ausweichen, außerdem ist vielleicht bei mehreren Zeilen eine kleine Schleife in einer Script-Sprache deiner Wahl empfehlenswert.

FlexBox habe ich gewählt, weil es vielseitig einsetzbar ist, eine Schlüsseltechnik zu responsivem Design darstellt und darum meiner Einschätzung nach auch schon dem Anfänger alsbald in Fleisch und Blut übergehen sollte.

https://www.w3schools.com/css/css3_flexbox.asp

Auch wenn nicht von dir angefragt, vielleicht doch ein guter Tipp:

https://www.oreilly.de/buecher/13285/9783960090915-css-–-kurz-%26-gut.html

Das benötigte Bild und die html-Datei finden sich auch anbei.

<!DOCTYPE html>
<html>
	<head>
		<style>
			* {
				padding: 0px;
				margin: 0px;
			}
			
			html, body{
				width: 100%;
				height: 100%;
				background-color: black;
			}
			
			#website{
				background-color: black;
				width: 100%;
				height: 100%;
			}
			
			#hex_container{
				height: 100%;
				width: 100%;
				margin-top: -62px;
				display: flex;
				flex-direction: column;
				justify-content: center;
			}
			
			
			.hex_row{
				text-align: center;
				border: 2px solid red;
				margin-bottom: -62px;
			}
			
			img{
				padding-left: 10px;
			}
		</style>
	</head>
	<body>
		<div id="website">
				<div id="hex_container">
					<div class="hex_row">
						<img src="hex.png"><img src="hex.png">
					</div>
					<div class="hex_row">
						<img src="hex.png">
					</div>
					<div class="hex_row">
						<img src="hex.png"><img src="hex.png">
					</div>
				</div>
		</div>
	</body>
</html>