HTML/CSS HexagonBilder als Muster platzieren

Finux · 30. Januar 2019

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

L3v14than · 30. Januar 2019

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. ?

LG

Bearbeitet 30. Januar 2019 von L3v14than

L3v14than · 30. Januar 2019

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>

hexagon.html

Bearbeitet 31. Januar 2019 von L3v14than

Anmelden

HTML/CSS HexagonBilder als Muster platzieren

Frage

Finux

Link zu diesem Kommentar

Auf anderen Seiten teilen

2 Antworten auf diese Frage

Empfohlene Beiträge

L3v14than

Link zu diesem Kommentar

Auf anderen Seiten teilen

L3v14than

Link zu diesem Kommentar

Auf anderen Seiten teilen

Dein Kommentar

Fachinformatiker Jobs

Fachinformatiker.de, 2024 by SE Internet Services

Links

Fachinformatiker.de App

Kontakt

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

Umsehen

Aktivitäten

Stellenanzeigen

Blog

Über Fachinformatiker.de