Benjamin Wilfing: Gallerie mit float

Beitrag lesen

Hi Aybee,

<table>
[...]

ich finde, das ist eine schöne Lösung.

ich nicht. Mal ganz abgesehen davon, dass es semantischer Quatsch ist, eine Bildergalerie in einer Tabelle darstellen zu wollen (was hat das mit tabellarischen Daten zu tun?), ist es doch (IMHO) viel hübscher, wenn dem Benutzer eben *nicht* aufgezwängt wird, wieviele Bilder nebeneinander sind, sondern das ganz von der Größe des Fensters abhängig gemacht wird.

Hier mal ein Beispiel aus einem Projekt, an dem ich aktuell am Werkeln bin -- dort gibt es auch eine Fotogalerie. Ich habe den Code einfach mal von dort kopiert und hoffe, nichts vergessen zu haben ;-)

Hier der HTML-Teil...

  
<span class="thumbnail"><a href="bild1.jpg"><img src="bild1-klein.jpg" alt="..." /></a></span>  
  
<span class="thumbnail"><a href="bild2.jpg"><img src="bild2-klein.jpg" alt="..." /></a></span>  
  
<span class="thumbnail"><a href="bild3.jpg"><img src="bild3-klein.jpg" alt="..." /></a></span>  

(usw. usf ...)

... mit folgendem CSS-Code formatiert:

  
.thumbnail {  
 display: block;  
 float: left;  
 margin: 6px 12px 6px 0;  
 width: 126px;  
 height: 126px;  
 text-align: center;  
 }  
  
.thumbnail a {  
 display: block;  
 padding: 6px;  
 }  
  
* html .thumbnail {  
 overflow:auto;  
 }  
  
.thumbnail a:hover {  
 padding: 0;  
 }  
  
.thumbnail img {  
 background-color: #c7c3a9;  
 border: 1px solid #c7c3a9;  
 display: block;  
 margin: 0 auto;  
 }  
  
.thumbnail a:hover img {  
 border: 1px solid #727060;  
 padding: 6px;  
 }  

Der Vorteil gegenüber der Tabellenlösung liegt hier meiner Meinung nach auf der Hand: Ist das Browserfenster zu klein, um 4 (oder X) Bilder nebeneinander darzustellen, rutschen sie durch den Floateffekt einfach automatisch in die nächste Zeile. Ist das Browserfenster sehr breit (es soll ja Leute geben, die mit sehr hohen Auflösungen arbeiten), passen schön viele Bilder nebeneinander. Man kann das ganze Konstrukt ja trotzdem mit einem einfachen min-width und max-width (und entsprechenden IE-Würgarounds) in gewisse Grenzen packen, wenn man das möchte.

Viele Grüße
Benjamin

0 60

Gallerie mit float

Johannes Walther
  • css
  1. 0
    Ole
    1. 0
      Johannes Walther
      1. 0
        Russe
  2. 0
    nag
    1. 0
      Johannes Walther
  3. 0

    "Gallerie" mit float, da floatet mir dieselbige über!

    Gernot Back
    1. 0

      Mir floaten da noch ganz andere Dinge über...

      Benjamin Wilfing
      • menschelei
      1. 0
        Gernot Back
        1. 0
          Jörg Lorenz
          1. 0
            Gernot Back
            1. 0
              Jörg Lorenz
          2. 0
            Alexander Brock
            1. 0
              Benjamin Wilfing
              1. 0
                Gernot Back
              2. 0
                Jörg Lorenz
                1. 0
                  Gernot Back
                  1. 0
                    Benjamin Wilfing
                  2. 0
                    Jörg Lorenz
                    1. 0
                      Gernot Back
                    2. 0
                      WebViper
                      1. 0
                        Jörg Lorenz
                      2. 0
                        at
                  3. 0
                    Orlando
              3. 0
                Alexander Brock
            2. 0
              Jörg Lorenz
              1. 0
                Gernot Back
                1. 0
                  Jörg Lorenz
            3. 0
              Fabian Transchel
              1. 0
                Benjamin Wilfing
      2. 0
        O'Brien
    2. 0
      Johannes Walther
      1. 0
        Gernot Back
        1. 0
          Jörg Lorenz
          1. 0
            Benjamin Wilfing
            1. 0
              Jörg Lorenz
              1. 0
                at
  4. 1

    Galerie mit float

    Gunnar Bittersmann
    1. 0
      Detlef G.
      1. 0
        Detlef G.
      2. 0
        at
        1. 0
          Detlef G.
          1. 0
            at
  5. 0
    Aybee
    1. 0
      Benjamin Wilfing
      1. 0
        Aybee
        1. 0
          Benjamin Wilfing
      2. 0
        Aybee
        1. 0
          Benjamin Wilfing
          1. 0
            Aybee
            1. 0
              Ingo Turski
              1. 0
                Aybee
                1. 0
                  Ingo Turski
            2. 0
              Benjamin Wilfing
              1. 0
                Aybee
    2. 0
      Aybee
  6. 0
    Ingo Turski
    1. 0
      Johannes Walther
      1. 0
        Ingo Turski
  7. 0

    & (JavaScript) Noch ein Lösungsansatz, wenn auch nicht der schönste[tm]

    Ole