5 bilder nebeneinander für jede Bildschirmbreite

[Experiance]

Hallo!

Ich möchte gerne 5 Bilder nebeneinander anordnen. Direkt unter den Bildern soll je ein Text (eingerahmt) mit einem Link stehen.

Auf dem Smartphone werden diese Bilder aufgrund der Größe dann untereinander angezeigt. Auf kleineren Bildschirmen kann es auch vorkommen, dass ein oder zwei Bilder in die nächste Zeile hüpfen.

Wie kann ich diesen Fehler beheben ohne ein Handheld zu gestalten???

hier der Link zur Homepage: http://experiance.heimat.eu/

hier der HTML-Code:

  
<div id="bilderserie">  
<div class="img150">  
<a href="about_us.html"><img src="./images/001.jpg" style="border: thin dotted white"></a><p>  
<div class="dt1"><center><a href="about_us.html" class="popup"><img src="./images/ja.png">&Uuml;BER UNS<img src="./images/ja2.png"></a></center></div>  
</div>  
  
<div class="img150">  
<a href="gallery.html"><img src="./images/002.jpg" style="border: thin dotted white"></a><p>  
<div class="dt2"><center><a href="gallery.html" class="popup"><img src="./images/ja.png">GALLERY<img src="./images/ja2.png"></a></center></div>  
</div>  
  
<div class="img150">  
<a href="kontakt.html"><img src="./images/003.jpg" style="border: thin dotted white"></a><p>  
<div class="dt2"><center><a href="kontakt.html" class="popup"><img src="./images/ja.png">KONTAKT<img src="./images/ja2.png"></a></center></div>  
</div>  
  
<div class="img150">  
<a href="agb.html"><img src="./images/004.jpg" style="border: thin dotted white"></a><p>  
<div class="dt2"><center><a href="agb.html" class="popup"><img src="./images/ja.png">AGB<img src="./images/ja2.png"></a></center></div>  
</div>  
  
<div class="img150">  
<a href="impressum.html"><img src="./images/005.jpg" style="border: thin dotted white"></a><p>  
<div class="dt5"><center><a href="impressum.html" class="popup"><img src="./images/ja.png">IMPRESSUM<img src="./images/ja2.png"></a></center></div>  
</div>  
<br style="clear: both;">  
</div>  

hier der CSS-Code:

  
.img150{  
float: left;  
padding: 0px;  
font-size: 1em;  
display: inline-block;  
}  
  
#bilderserie{  
float: none;  
margin-top: 0px;  
margin-left: 4%;  
margin-right: auto;  
z-index:2;  
max-width: 100%;  
}  
  
  
.dt1{  
height:2.5em;  
  
border-left: 2px solid #ffffff;  
border-bottom: 2px solid #ffffff;  
border-top: 2px solid #ffffff;  
border-radius: 10px;  
padding-bottom: 25px;  
background-image: url(./images/shine.png);  
}  
.dt2{  
height:2.5em;  
  
border-bottom: 2px solid #ffffff;  
border-top: 2px solid #ffffff;  
border-radius: 10px;  
padding-bottom: 25px;  
background-image: url(./images/shine.png);  
}  
  
.dt5{  
height:2.5em;  
  
border-right: 2px solid #ffffff;  
border-bottom: 2px solid #ffffff;  
border-top: 2px solid #ffffff;  
border-radius: 10px;  
padding-bottom: 25px;  
background-image: url(./images/shine.png);  
}  

Ich danke euch herzlich für eure antworten!!!

[1UnitedPower]

Hakuna matata!

Auf dem Smartphone werden diese Bilder aufgrund der Größe dann untereinander angezeigt. Auf kleineren Bildschirmen kann es auch vorkommen, dass ein oder zwei Bilder in die nächste Zeile hüpfen.

Wie kann ich diesen Fehler beheben ohne ein Handheld zu gestalten???

Welchen Fehler? Ist doch gut, dass die Bilder auf kleinen Bildschirmen untereinander angezeigt werden, so muss der Nutzer nicht horizontal scrollen und trotzdem können die Bilder in einer vernünftigen Größe angezeigt werden.

Ein Fehler wäre es, das bewusst zu unterdrücken und so entweder das eine (horizontales Scrollen) oder das andere (winzige Bilder) zu provozieren.

Gibt es auf deiner Seite einen Zusammenhang zwischen Bilder und Navigationspunkten? Mir wird er nicht deutlich. Ich würde unter einem Bild einen Titel oder eine Beschreibung des Bildes erwarten. Über einem Menüpunkt würde ich ein Bild mit symbolifschen Charakter erwarten. Beide Erwartungen werden zur Zeit nicht erfüllt, das ist schlecht für die User-Experience und solltest du ändern.

[Experiance]

Danke für deine rasche Antwort!

Ja, es ist eine Navigation. Aus diesem Grunde soll sie auch in einer Reihe sein und nicht Teile davon eine Zeile darunter...

Danke auch für den Tipp mit dem Aufbau. Mir persönlich gefällt der Aufbau auch nicht 100%ig aber mein Onkel (für den ich die Seite mache) möchte das so haben...

Hilfe!

[1UnitedPower]

Hakuna matata!

Ja, es ist eine Navigation. Aus diesem Grunde soll sie auch in einer Reihe sein und nicht Teile davon eine Zeile darunter...

Auf kleinen Bildschirmen ist es üblich die Navigationspunkte untereinander anzuzeigen, in der Waagerechten ist einfach kein Platz dafür. Ich würde dem Muster folgen und die Bilder für kleine Bildschirme sogar ganz streichen, damit die Navigtion möglichst mit einem Blick eingefagen werden kann.

Danke auch für den Tipp mit dem Aufbau. Mir persönlich gefällt der Aufbau auch nicht 100%ig aber mein Onkel (für den ich die Seite mache) möchte das so haben...

Dann erkläre deinem Onkel doch die Nachteile. Besucher lassen sich nicht gerne nerven, der Geduldsfaden ist kurz, die Konkurrenz ist nur einen Klick entfernt und wenn die ihre Nutzer nur halb so sehr nervt…

[Matthias Apsel]

Om nah hoo pez nyeetz, Experiance!

Ich möchte gerne 5 Bilder nebeneinander anordnen. Direkt unter den Bildern soll je ein Text (eingerahmt) mit einem Link stehen.

Auf dem Smartphone werden diese Bilder aufgrund der Größe dann untereinander angezeigt. Auf kleineren Bildschirmen kann es auch vorkommen, dass ein oder zwei Bilder in die nächste Zeile hüpfen.

Wie kann ich diesen Fehler beheben ohne ein Handheld zu gestalten???

Ich würde sagen, das ist kein Fehler.

Zunächst: Verwende semantisch passende Elemente, in deinem Fall figure und figcaption.

Wenn du tatsächlich möchtest, dass die Bilder ggf. bis zur Unkenntlichkeit verkleinert werden oder nur noch ein Ausschnitt zu sehen ist, verwende folgendes CSS.

figure {  
  [link:http://wiki.selfhtml.org/wiki/Box-sizing@title=box-sizing: border-box];  
  margin: 0;  
  width: [link:http://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Ma%C3%9Fe_und_Ma%C3%9Feinheiten#Relative_L.C3.A4ngenma.C3.9Fe@title=20vw];  
}

die Bilder bekommen eine maximale Breite von 100%.

Matthias

[Gunnar Bittersmann]

@@Experiance:

nuqneH

Wie kann ich diesen Fehler beheben ohne ein Handheld zu gestalten???

Es wäre ein Fehler, die Ansicht für schmamle Bildschirme nicht zu gestalten.

Die könnte auch so aussehen, dass die Bilder (vielleicht auch nicht alle 5, sondern bspw. nur 3) klein nebeneinander sind und die Menüpunkte untereinander.

hier der HTML-Code:

Für ein Menü wäre wohl das nav-Element angebracht.

<div id="bilderserie">
<div class="img150">

div-Suppe. Ein Menü ist eine Liste ul oder ol, Menüpunkte sind li.

<a href="about_us.html"><img src="./images/001.jpg" style="border: thin dotted white"></a><p>

Den Bildern fehlt der Alternativtext. Bei Bildern, die der Ausschmückung dienen, darf das alt-Attribut auch einen Leerstring als Wert haben. Allerdings wären die Bilder in dem Fall besser Hintergrundbilder per CSS.

Gib sämtliche Darstellung im Stylesheet an, nicht inline in style-Attributen!

Was soll das <p>-Tag dort? Zumal das p-Element mit dem darauffolgenden <div>-Tag sofort wieder geschlossen wird:

<div class="dt1"><center><a href="about_us.html" class="popup"><img src="./images/ja.png">&Uuml;BER UNS<img src="./images/ja2.png"></a></center></div>

Verwende keine missbilligten HTML-Elemente oder -Attribute zum Stylen! Vergiss, dass es sowas wie center je gab, verwende CSS.

Es ist nicht sinnvoll, Umlaute zu verst&uuml;mmeln. Schreibe „Über uns“.

Genau so, nicht in Großbuchstaben. Das ist Sache von CSS.

Qapla'

[Experiance]

Dankeschön für eure Antworten!

Habe mich nun mit figure und figcapture versucht. Aaaaaber:

1. ich möchte KEINEN Abstand zwischen den Bildern...das funktioniert nicht mit margin/padding...es bleibt trotzdem ein Abstand...
2. ich möchte gerne einen Ramen legen..."Über uns" sollte links, oben und unten einen Rahmen haben und "Impressum" rechts, oben und unten...alle übrigen nur oben und unten...ich komm einfach nicht dahinter...
   Zudem ist die Ansicht am Smartphone weiterhin Mist...Hier nochmal meine Codes:

  
<figure class="gesamt">  
      <figure class="einzel">  
           <a href="about_us.html"><img src="./images/001.jpg" alt="" /></a><p>  
           <figcaption><a href="about_us.html" class="popup"><img src="./images/ja.png">über uns<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
      <figure class="einzel">  
           <a href="gallery.html"><img src="./images/002.jpg" alt="" /></a><p>  
           <figcaption><a href="gallery.html" class="popup"><img src="./images/ja.png">gallery<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
      <figure class="einzel">  
            <a href="kontakt.html"><img src="./images/003.jpg" alt="" /></a><p>  
           <figcaption><a href="kontakt.html" class="popup"><img src="./images/ja.png">kontakt<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
	  <figure class="einzel">  
            <a href="agb.html"><img src="./images/004.jpg" alt="" /></a><p>  
           <figcaption><a href="agb.html" class="popup"><img src="./images/ja.png">agb<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
	  <figure class="einzel">  
            <a href="impressum.html"><img src="./images/005.jpg" alt="" /></a><p>  
			<figcaption><a href="impressum.html" class="popup"><img src="./images/ja.png">impressum<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
  
   </figure>  

figure{
margin: 0;
padding: 0;
}

figure img {
  border: thin dotted white;
  padding: 0;
}
figure.einzel {
  display: inline-block;
  padding: 0;
  width: 19%;
}

figure.einzel {
  display: inline-block;
  padding: 0;
  width: 19%;
}

figure figcaption {
text-align: center;
vertical-align: middle;
text-transform: uppercase;
height:2.5em;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
border-top: 2px solid #ffffff;
border-radius: 10px;
padding-bottom: 25px;
background-image: url(./images/shine.png);
}

@media only screen and (max-width:800px) {
  body{
    width: 100%;
    margin: 2% 0;
    padding: 1%;
  }
  figure.einzel {
    width: 48%;
  }
}

@media only screen and (max-width:600px) {
  figure.einzel {
    width: 96%;
  }
}
``

bitte inständig um Hilfe...Danke