Balken mit Bildern

[Auch Frankenstein]

Ich habe da was in einem meiner Lieblings Büchern gefunden. Vielen dank an Corina Rudel und Ingo Chao. Die Lösung heißt Blocksatz. Eine Menge "div's" und ein "spam" bilden die Wörter in diesem Satz. Das erste und letzte "div" sind nur ein Pixel breit und sollen unsichtbar bleiben. Sie haben nur die Aufgabe für den gleichen Abstand links und rechts, wie zwischen den Bildern zu sorgen. Das "spam" hat eine Breite von 100% und löst den Blocksatz aus. Denn einen Blocksatz mit einer Zeile gibt es nicht. Die anderen "div's" bekommen nun Hintergrundbilder und deren Größe.

Das @media und was da drin steht, blendet Bilder ein und aus, je nach Auflösung. An einer Browserweiche kommt man nicht vorbei. Da der IE die Sache mit dem @media nicht versteht. Die die ihn verwenden, bekommen dann ein super breites Bild zu sehen oder eine feste Anzahl Bilder.

Hier mal das wichtigste CSS und HTML.

Gruß Frankenstein

#Bilderbalken { background: #828282 0 0 no-repeat;  
                width:      100%;  
                height:     180px;  
                text-align: justify;  
              }  
  
#Bilderbalken div { display: inline-block;  
                    height:  100%;  
                    vertical-align: middle;  
                  }  
  
#Bilderbalken span { display:      inline-block;  
                     padding-left: 100%;  
                   }  
  
#Bild01 { background: #111111 url(../gif/deckerBild01.gif) 0 0 no-repeat;}  
#Bild02 { background: #111111 url(../gif/deckerBild02.gif) 0 0 no-repeat;}  
#Bild03 { background: #111111 url(../gif/deckerBild03.gif) 0 0 no-repeat;}  
#Bild04 { background: #111111 url(../gif/deckerBild04.gif) 0 0 no-repeat;}  
#Bild05 { background: #111111 url(../gif/deckerBild05.gif) 0 0 no-repeat;}  
#Bild06 { background: #111111 url(../gif/deckerBild06.gif) 0 0 no-repeat;}  
#Bild07 { background: #111111 url(../gif/deckerBild07.gif) 0 0 no-repeat;}  
#Bild08 { background: #111111 url(../gif/deckerBild08.gif) 0 0 no-repeat;}  
#Bild09 { background: #111111 url(../gif/deckerBild09.gif) 0 0 no-repeat;}  
#Bild10 { background: #111111 url(../gif/deckerBild10.gif) 0 0 no-repeat;}  
  
@media all and (min-width: 280px)  
{ #BildStandard,  
  #Bild02,  
  #Bild03,  
  #Bild04,  
  #Bild05,  
  #Bild06,  
  #Bild07,  
  #Bild08,  
  #Bild09,  
  #Bild10 { position: absolute;  
            width:    0;  
          }  
  
  #LinieL,  
  #LinieR { background: #828282;  
            width: 1px;  
          }  
  
  #Bild01 { width: 180px;}  
}  
  
@media all and (min-width: 510px)  
{ #Bild02 { position: static;  
            width:    180px;  
          }  
}  
  
@media all and (min-width: 740px)  
{ #Bild03 { position: static;  
            width:    180px;  
          }  
}  
  
@media all and (min-width: 970px)  
{ #Bild04 { position: static;  
            width:    180px;  
          }  
}  
  
@media all and (min-width: 1200px)  
{ #Bild05 { position: static;  
            width:    180px;  
          }  
}  
  
@media all and (min-width: 1430px)  
{ #Bild06 { position: static;  
            width:    180px;  
          }  
}  
  
@media all and (min-width: 1660px)  
{ #Bild07 { position: static;  
            width:    180px;  
          }  
}  
  
@media all and (min-width: 1890px)  
{ #Bild08 { position: static;  
            width:    180px;  
          }  
}  
  
@media all and (min-width: 2120px)  
{ #Bild09 { position: static;  
            width:    180px;  
          }  
}  
  
@media all and (min-width: 2350px)  
{ #Bild10 { position: static;  
            width:    180px;  
          }  
}  
  

    <div id="Bilderbalken">  
      <div id="BildStandard"></div>  
      <div id="LinieL"></div>  
      <div id="Bild01"></div>  
      <div id="Bild02"></div>  
      <div id="Bild03"></div>  
      <div id="Bild04"></div>  
      <div id="Bild05"></div>  
      <div id="Bild06"></div>  
      <div id="Bild07"></div>  
      <div id="Bild08"></div>  
      <div id="Bild09"></div>  
      <div id="Bild10"></div>  
      <div id="LinieR"></div>  
      <span><!----></span>  
    </div>