Balken mit Bildern

[Frankenstein]

Hallo,
ich habe ein Problem mit einem Balken mit Bildern. Vier Bilder sind horizontal über einem blauen Balken angeordnet. Alle Bilder haben eine feste Größe. Wie mache ich die Ränder und Zwischenräume überall gleich groß?

Vielen Dank schon mal im Voraus.

[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>  

[suit]

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.

padding und margin sind Fremdwörter für dich oder?

Das gemeinsame Elternelement bekommt links und oben einen entsprechenden Abstand, alle Kind-Elemente rechts und unten. Problem gelöst - jedes Bild hat in alle Richtungen exakt denselben Abstand.

Wenn die Elemente gleich groß sind kann man float verwenden, ansonsten ist inline-block geeigneter.