MacDef: Partieller Zeilenumbruch

Hey,

Folgendes Problem:

Ich will eine Auflistung bestimmer User anzeigen. Jeder User hat hierbei zum einen sein Avatar und zum anderen seinen Benutzernamen. Diese sollen wie folgt formatiert sein: Oben Avatar, darunter Benutzername.
Da es mehrere User sind wird es in einer For-Schleife eingebettet. Hierbei sollen die "boxen" (Ava+Name) nebeneiander angezeigt werden bis die Zeile voll ist und dann halt die nächste.

<? for($i=0;$i<count($spieler);$i++){  
     ?><span><img src="<?echo($spielerbild[$i]);?>" width="40" alt="" /> <br /> <? echo($spieler[$i]);?></span><?  
   }?>

Wie krieg ich es hin zwar einen Zeilenumbruch innerhalb der "box" hinzukriegen (damit der Name unten drunter steht) und trotzdem die boxen nebeneinander aufzulisten?

Greetz

MacDef

  1. Hallo!

    Wie krieg ich es hin zwar einen Zeilenumbruch innerhalb der "box" hinzukriegen (damit der Name unten drunter steht) und trotzdem die boxen nebeneinander aufzulisten?

    Benutze eine Definitionsliste. Die Arbeit mit <span> ist hier überflüssig.

    <dl>  
      <dt>Avatar</dt>  
      <dd>Name</dd>  
    </dl>
    

    Eine einfache Tabelle käme auch in Frage.

    Grüße, Matze

    1. Hm und wie soll ich das mit der Defintionsliste anstellen?
      Krieg jetzt nur eine Art Baumstruktur

      es soll aber so aussehen:

      halt die user-objekte (die aus bild+name bestehen) nebeneinander auflisten.
      Innerhalb des Objekts: Bild oben, Name unten

      Benutze eine Definitionsliste. Die Arbeit mit <span> ist hier überflüssig.

      <dl>

      <dt>Avatar</dt>
        <dd>Name</dd>
      </dl>

      
      >   
      > Eine einfache Tabelle käme auch in Frage.  
      >   
      > Grüße, Matze
      
    2. Benutze eine Definitionsliste. Die Arbeit mit <span> ist hier überflüssig.

      zonK!
      benutze eine liste, da eine defintionsliste kein gruppierendes element hat, wird ein unterfangen dadurch unnötig schwierig bis unmöglich ...

      <ul>  
        <li>  
          <p>franzi</p>  
          <img src="foo.png" alt="" />  
        </li>  
        <li>  
          <p>joschi</p>  
          <img src="bar.png" alt="" />  
        </li>  
      </ul>
      

      die li-elemente floaten nebeneinander, die dinge innen drinnen machen das was du möchtest

      1. @@suit:

        die li-elemente floaten nebeneinander,

        Nein, geht nicht.

        'float' ist hier untauglich, wenn die Bilder nicht gleich hoch sind oder der Text unter den Bildern unterschiedlich viele Zeilen beansprucht.

        Wenn man weiß, wieviele Bild-mit-Text-Boxen nebeneinanderpassen, kann man jedem n-ten ein 'clear' verpassen, das ist aber unschön. Und den Fehler im IE bekommt man wohl nicht in den Griff.

        Weiß man aber nicht. OP: „Hierbei sollen die "boxen" (Ava+Name) nebeneiander angezeigt werden bis die Zeile voll ist und dann halt die nächste.“

        Das ist mit 'display: inline-block' zu erreichen. Nebst Fixes für IE und Firefox 2. http://forum.de.selfhtml.org/archiv/2008/9/t176789/#m1163914

        Live long and prosper,
        Gunnar

        --
        Das einzige Mittel, den Irrtum zu vermeiden, ist die Unwissenheit. (Jean-Jacques Rousseau)