• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Float: left - nach Liste aufheben; Text unter Bildern zentrieren?

pit

New member
Hi,

ich habe hier drei Blider nebeneinander mit den Attributen ul und li in Verbindung mit float: left erzeugt!
Unter den Bildern steht noch ein Text.

Meine Fragen:
Wie kann ich den Text unter den Bildern zentrieren (ich habe das mit margin-left für jedes Bild gemacht)!
Geht das eleganter?

Nach den Bildern und dem Text darunter will ich ganz normal links weiterschreiben. Wie hebe ich das float:left nach den Bildern auf? Mit clear oder right - ist mir klar, nur wo schreibe ich das Atrribut hin?
Das stehe ich gerade auf der Leitung!

in der HTML-Datei
Code:
<div class="test">        
<H1>Bilder</H1>
 <ul>
  <li><img src="grafik/bild1.jpg" width="120" height="180" border="1" alt="Bild 1"><br>
   <span style="margin-left: 20px">Bild 1</span></li> 

  <li><img src="grafik/bild2.jpg" width="120" height="180" border="1" alt="Bild 2"><br>
   <span style="margin-left: 25px">Bild 2</span></li> 

  <li><img src="grafik/bild3.jpg" width="120" height="180" border="1" alt="Bild 3"><br>
   <span style="margin-left: 28px">Bild 3</span></li> 
 </ul>

Diese Text soll wieder links unter den Bildern und nicht neben den Bildern stehen!!!!
Wo und wie hebe ich das float: left nach den drei Bildern auf?
</div>

in der CSS-Datei:
Code:
.test {
        margin-top: 30px; margin-right: 15px; margin-bottom: 30px; margin-left: 131px;
        font-family: arial, helvetica, sans-serif;
        font-size: 14px;
        color: #000000;
}

. test ul {
        margin-top: 5px; margin-bottom: 45px;
}

.test li {
        float: left;
        list-style: none;
        font-family: Arial, Helvetica, sans-serif;
        margin-right: 32px; margin-bottom: 20px; margin-left: -20px;
        font-size: 14px;
        color: #000000; 
}

.test li span {
      font-size: 12px; 
}

Gruß,
Pit :confused:
 
Zuletzt bearbeitet von einem Moderator:
Probier's mal so:
Code:
<span style="margin-left: 28px">Bild 3</span></li> 
 </ul>
[B]<br style="clear:both;">[/B]
Diese Text soll wieder links
 
Zurück
Oben