www.mikrocontroller.net

Forum: PC-Programmierung CSS mit automatischem Umbruch


Autor: Läubi .. (laeubi) Benutzerseite
Datum:

Bewertung
0 lesenswert
nicht 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:
<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 ;)

Autor: Meister Eder (edson)
Datum:

Bewertung
0 lesenswert
nicht 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:
.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

Autor: Läubi .. (laeubi) Benutzerseite
Datum:

Bewertung
0 lesenswert
nicht 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.

Autor: A. F. (artur-f) Benutzerseite
Datum:

Bewertung
0 lesenswert
nicht lesenswert
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>

Autor: Läubi .. (laeubi) Benutzerseite
Datum:

Bewertung
0 lesenswert
nicht lesenswert
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

Autor: A. F. (artur-f) Benutzerseite
Datum:

Bewertung
0 lesenswert
nicht lesenswert
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.

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.
Hinweis: der ursprüngliche Beitrag ist mehr als 6 Monate alt.
Bitte hier nur auf die ursprüngliche Frage antworten,
für neue Fragen einen neuen Beitrag erstellen.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.