nicht angemeldet
Hallo
Daher auch meine zweite Frage: Wie könnte man das noch ansprechend darstellen? Also so, dass es gut aussieht?
Was sieht für dich gut aus? Was sieht für mich gut aus? Was sieht für deine Besucher gut aus? Keine Ahnung.
Die Skripte, die ich gesehen habe, erfordern immer eine Breitenangabe in (meistens) 250px.
Wo? Solche Angaben helfen niemanden weiter.
Skripte hört sich nach JavaScript an. Warum so kompliziert? Was mit CSS geht sollte mit CSS erledigt werden. Zumal viele User JavaScript blockiert haben, zum Beispiel um nervige Werbung zu blockieren.
man soll aufs Bild klicken und dann zum Reiseziel kommen.
Warum um alles in der Welt willst du dann die a-Container löschen? Die sind doch dann genau richtig.
Allerdings ist Flexbox dafür ungeeignet und entfällt.
Ich würde das mit CSS erledigen und habe mal ein Beispiel basierend auf dem vorigen erstellt. Natürlich können die Bilder auch wie in deinem Beispielbild über die gesamte Fensterbreite in 5 oder 6 Spalten angeordnet werden. Aus deinen Bemerkungen wird leider nicht deutlich, was du im Endeffekt willst.
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout 02</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/*Grundeinstellungen*/
@media all {
/* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
display: block;
}
* {
box-sizing: border-box;
}
html {
font-size: 120%;
}
body {
padding: 0;
}
img {
display: block;
max-width: 100%;
}
}
/*Spezielle Einstellungen*/
@media all {
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
header {
background-color: aquamarine;
height: 100%;
width: 35%;
position: fixed;
}
header h2 {
margin-top: 0;
}
nav {
width: 65%;
margin-left: 35%;
}
nav {
-moz-column-count: 3;
-webkit-column-count: 3;
column-count: 3;
/*column-width = Mindestbreite, nicht fixe Breite*/
-moz-column-width: 100px;
-webkit-column-width: 100px;
column-width: 100px;
-moz-column-rule-with: 0;
-webkit-column-rule-with: 0;
column-rule-with: 0;
-moz-column-rule-style: none;
-webkit-column-rule-style: none;
column-rule-style: none;
-moz-column-rule-color: silver;
-webkit-column-rule-color: silver;
column-rule-color: silver;
-moz-column-gap: 0;
-webkit-column-gap: 0;
column-gap: 0;
}
a {
color: black;
width: 100%;
display: block;
text-decoration: none;
}
}
@media only screen and (max-width: 1500px) {
nav {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width: 1300px) {
nav {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
@media only screen and (max-width: 800px) {
header {
width: 100%;
position: relative;
}
nav {
width: 100%;
margin-left: 0;
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
}
@media only screen and (max-width: 550px) {
nav {
-moz-column-count: 1;
-webkit-column-count: 1;
column-count: 1;
}
}
</style>
</head>
<body>
<header>
<h2>header</h2>
</header>
<nav>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/e/ec/Auto_Union_1000s-02.JPG" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Auto_Union_1000_Sp_Garmisch-Partenkirchen_regne.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/f/f6/Desfile_de_Autos_Clasicos_y_Antiguos%2858%29.JPG" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/de/b/b8/Chemnitz_roter_turm.jpg"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/7/7c/Desfile_de_Autos_Clasicos_y_Antiguos%2865%29.JPG" alt="Beispielbild"></a>
<a href="#"><img src="http://www.torange-de.com/photo/12/16/Alte-Autos-1336984729_99.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/6/6b/'38_Packard_%28Auto_classique_Laval_'11%29.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/2007-06-16_Auto_Union_1000_%28Frontpartie%29.jpg/800px-2007-06-16_Auto_Union_1000_%28Frontpartie%29.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/d/db/'65_Imperial_Ghia_Limo_%28Auto_classique_Laval_'11%29.JPG" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/9/94/Brennan-autos_1906.jpg" alt="Beispielbild"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/a/a1/'52_Hudson_%28Auto_classique_VAQ_Mont_St-Hilaire_'11%29.jpg" alt="Beispielbild"></a>
<a href="#"><img src="http://images.fotocommunity.de/bilder/landschaft/wald/ein-morgen-im-wald-18247546-82ad-4b73-a700-8e8bb74fb471.jpg"></a>
<a href="#"><img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Hamburg-university-2005-05.png"></a>
<a href="#"><img src="http://images.fotocommunity.de/bilder/aufnahme-techniken/langzeitbelichtung/hamburg-hafen-30869a4b-a166-4aaf-abc1-7b74cae08310.jpg" alt="Beispielbild"></a>
</nav>
</body>
</html>
Gruss
MrMurphy
Gunnar Bittersmann
Matthias Scharwies
Matthias Apsel