CSS mit automatischem Umbruch

Läubi .. Persönliche Seite #1360679
Lesenswert?
• ▲
▼ 
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:
1
<div id = "bildbox">

2
<img .../>

3
Ein Text unter dem Bild

4
</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 ;)
Beitrag melden Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Markierten Text zitieren Antwort Antwort mit Zitat
Meister E. #1360991
Lesenswert?
• ▲
▼ 
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:

1
.bildbox {

2
   width = 200px;

3
   height= 200px;

4
   float: left;

5
}


Die Zuweisung sieht dann im HTML so aus:

1
<div class="bildbox">

2
   <img.../>

3
   Text unter dem Bild

4
</div>


Grüße,
Edson
Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Läubi .. Persönliche Seite #1361078
Lesenswert?
• ▲
▼ 
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.
Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
A. F. Persönliche Seite #1369745
Lesenswert?
• ▲
▼ 
Hier meine quick and dirty Lösung:
1
<style type="text/css">

2
  div.bildbox {

3
    float: left;

4
  height: 110px;

5
    border: thin silver solid;

6
    padding: 20px;

7
  position:relative;

8
  margin: 5px;

9
  }

10
  div.bildbox p {

11
    font-size: smaller;

12
  text-align: center;

13
  position: absolute;

14
  bottom: 0px;

15
  left: 0px;

16
  width: 100%;

17
  }

18
  img.scaliert {height: 100%}

19
</style>


<div class="bildbox">
    <img class="scaliert" src="dasisteinbild.jpg" alt="ne noch jung">
    <p>Mein Bild</p>
</div>
Beitrag melden Bearbeiten Löschen Markierten Text zitieren Antwort Antwort mit Zitat
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren