CSS mit automatischem Umbruch

[Läubi .. (laeubi)]

Ich spiel gerade etwas mit CSS Layouts rum und Würde gerne folgendes 
erreichen:

Die Seite enthält eine Reihe Bilder und zu jedem Bild eine 
Bildunterschrift, also etwa so:

B B B B B B
U U U U U U

Bild+Beschriftung sind in einem div container drinne also so:

<div id = "bildbox">
<img .../>
Ein Text unter dem Bild
</div>

Soweit so gut, nun würde ich es gerne so haben das alle Boxen gleich 
hoch sind ohne das ich explizit die Höhe angeben muß (Text und Bildgröße 
ist loscherweise verschieden, die Box hat aber eine feste Breite) und 
das wenn das Fenster kleiner gemacht wird Bilder ggf. in die zweite 
Zeile rutschen.

Habe das mal mit Float left versucht, Problem ist nur das es einmal 
etwas komisch aussieht wenn die Höhe unterschiedlich ist, und der 
Umbruch auch etwas Eigenwillig sich gestaltet.
Hier mal ein Beispiel:
http://elektronik.laeubi-soft.de/index.php?mid=8&id=26
Ist die Höhe+Text der Bilder etwa gleich Funktioniert es wie gewünscht:
http://elektronik.laeubi-soft.de/index.php?mid=12&id=34

Ich würde es ja einfach über ne unsichtbare Tabelle machen, aber da ist 
ja die Spaltenanzahl fix, ich hätte eben gerne nen Umbruch aber auf die 
Art ist es mommentan nun wirklich nicht so toll ;)

[Meister E. (edson)]

Hallo Läubi,

Da du pro Bild einen DIV-Container benutzt, ist die Verwendung von id="" 
hier falsch. Für diesen Zweck wäre ein class="" geeigneter.

Hier mal (aus dem Gedächtnis, ich mach das nicht so oft) der .CSS Teil 
für eine quadratische Box 200*200px:

.bildbox {
   width = 200px;
   height= 200px;
   float: left;
}

Die Zuweisung sieht dann im HTML so aus:

<div class="bildbox">
   <img.../>
   Text unter dem Bild
</div>

Grüße,
Edson

[Läubi .. (laeubi)]

Meister Eder schrieb:
> Hallo Läubi,
>
> Da du pro Bild einen DIV-Container benutzt, ist die Verwendung von id=""
> hier falsch. Für diesen Zweck wäre ein class="" geeigneter.
Okay also ID nur für "einmalige" Sachen richtig?

> Hier mal (aus dem Gedächtnis, ich mach das nicht so oft) der .CSS Teil
> für eine quadratische Box 200*200px:
Ja das hatte ich auch so das "Problem" dabei ist nur, Text + Bildhöhe 
größer als die höhe der Div Box sind hängt der Text raus oder es 
verschiebt sich wieder alles.
Das Problem ist halt das ich durch den Text nicht genau sagen kann was 
die maximale höhe einer Box sein wird.

[A. F. (artur-f)]

Hier meine quick and dirty Lösung:

<style type="text/css">
  div.bildbox {
    float: left;
  height: 110px;
    border: thin silver solid;
    padding: 20px;
  position:relative;
  margin: 5px;
  }
  div.bildbox p {
    font-size: smaller;
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  }
  img.scaliert {height: 100%}
</style>

<div class="bildbox">
    <img class="scaliert" src="dasisteinbild.jpg" alt="ne noch jung">
    <p>Mein Bild</p>
</div>

[Läubi .. (laeubi)]

Prinzipiell schonmal nicht schlecht, nur leider wird jezt der Text 
völlig wild in der Gegen versschoben: 
http://elektronik.laeubi-soft.de/index.php?mid=2&id=2

[A. F. (artur-f)]

Bei soviel Text musst du entscheiden, was du möchtest.

Vergiss es mit <p> Format, mach ein div fester Breite mit min-height und 
overflow auto.