Bilder nebeneinander positionieren will nicht klappen?

[lala0808]

Liebe PSD Community,

ich komme aktuell bei einer Webseite nicht weiter.

Ich habe 8 Bilder. Ich will immer jeweils 2 Bilder nebeneinander machen. Drunter wieder 2 und so weiter.

Ich habe das ganze wie folgt gelöst:

<div class="bild5">
<p style="text-align: center;"><img src="http://www.abload.de/img/amalia1yqe.jpg" alt="" />
<strong> <a href="http://url.de">Diana (23)</a></strong></p></div>

<div class="bild6" style="text-align: center;"><img src="http://www.abload.de/img/amalia1yqe.jpg" alt="" />
<strong> <a href="http://url.de">Diana (25)</a></strong></div>

<div class="bild5">
<p style="text-align: center;"><img src="http://www.abload.de/img/amalia1yqe.jpg" alt="" />
<strong> <a href="http://url.de">Diana (23)</a></strong></p></div>

<div class="bild6" style="text-align: center;"><img src="http://www.abload.de/img/amalia1yqe.jpg" alt="" />
<strong> <a href="http://url.de">Diana (25)</a></strong></div>

Und hier der Code von der CSS Datei:

.bild5{
      float: right;
}

.bild6{
      float: left;
}

Die erste Reihe sieht genauso aus, wie ich es will.

Die zweite Reihe, macht allerdings Probleme. Die zwei Bilder sind nicht nebeneinander wie in der ersten Reihe, sondern verschoben untereinander?

Ich würde mich sehr freuen, wenn mir jemand helfen könnte. Schonmal vielen herzlichen Dank

Mit freundlichen Grüßen
Lala0808

 

[_Hackstog_]

AW: Bilder nebeneinander positionieren will nicht klappen?

Wenn du jede Zeile, also immer 2 Bilder, die nebeneinander stehen sollen in eine Textabsatz einfügst, sollte dein Problem gelöst sein.

Also:

<p>
     <div class="bild5" style="text-align: center;">
          <img src="http://www.abload.de/img/amalia1yge.jpg" alt="" />
          <strong><a href="http://url.de">Bild 1</a></strong>
     </div>

     <div class="bild6" style="text-align: center;">
          <img src="http://www.abload.de/img/amalia1yge.jpg" alt="" />
          <strong><a href="http://url.de">Bild 2</a></strong>
     </div>
</p>

<p>
     <div class="bild5" style="text-align: center;">
          <img src="http://www.abload.de/img/amalia1yge.jpg" alt="" />
          <strong><a href="http://url.de">Bild 3</a></strong>
     </div>

     <div class="bild6" style="text-align: center;">
          <img src="http://www.abload.de/img/amalia1yge.jpg" alt="" />
          <strong><a href="http://url.de">Bild 4</a></strong>
     </div>
</p>

Und in deinem CSS solltest du die zweite Regel entfernen, also nur noch:

.bild5 {
     float: left;
}

Auserdem verwendest du text-align: center zweimal im div-tag und zweimal im p-tag. Auch wenn es für die Funktion nicht wirklich wichtig ist, solltest du das einheitlich im div machen, das macht den Code übersichtlicher und du kannst dir in den bild5-divs den Textabsatz sparen.

 

[Betchy]

AW: Bilder nebeneinander positionieren will nicht klappen?

Ich habe dies so gelöst.

<div id="bild">                    
        <img src="../images/bild_1.jpg" alt="Be a Superstar" width="75" height="75" border="0"></a>
        <img src="../images/bild_2.jpg" alt="Beethoven Remix" width="75" height="75" border="0"></a>
</div>
<div id="bild">                    
        <img src="../images/bild_3.jpg" alt="Be a Superstar" width="75" height="75" border="0"></a>
        <img src="../images/bild_4.jpg" alt="Beethoven Remix" width="75" height="75" border="0"></a>
</div>

dazu folgende CSS-Anweisung

#bild {
 float: left;
 width: 200px; height: 120px; (größe der Box, in der die Bilder liegen)
 padding-left: 25px; (mein Abstand)
}

 

[lala0808]

AW: Bilder nebeneinander positionieren will nicht klappen?

Vielen herzlichen Dank, an euch beide. Habt mir echt sehr gut weitergeholfen. Klappt nun alles perfekt und gelernt habe ich auch was.

Liebe Grüße und euch allen einen schönen Abend!!!