"schwebende" DIVs (float) ausrichten

[Julian Becker]

Hallo,

ich möchte bei einem meiner Seiten (skript-generiert) das Design ändern. Momentan generiert das PHP-Skript aus allen Dateien eine Tabelle und zeigt die Dateien und Verzeichnisse mit Symbolen markiert an.

Ein Beispiel seht ihr auf:

http://www.links-hp.de/shots/hpublic/sega/ (nur Beispielbilder, der Inhalt ist nicht von Bedeutung)

im Moment ist dieses Design tabellarisch aufgebaut. Die Hauptanzeige besteht aus einer mehrzeiligen Tabelle (Zeilenzahl abhängig von Dateianzahl) mit jeweils 9 Spalten (5 Hauptzellen mit 19% Breite, zwischen denen jeweils kleine Abstandhalter mit 1% Breite sind - de facto wirken diese viel größer, ist aber nicht schlimm). Dieses Design hat so seinen Nachteil:
-wenn man sein Browserfenster verkleinert, passiert es irgendwann dass der Platz nicht mehr reicht und die ekligen horizontalen Scrollbalken entstehen

Nun überlege ich, die Tabellenzellen durch DIVs zu ersetzen mit dem CSS-Attribut "float:left". In der Praxis klappt das sehr gut, siehe:

http://www.links-hp.de/reppage/ (ganz runter scrollen)

Man sieht 5 Screenshots.. und diese brechen automatisch am Fensterrand um. Sehr schön: So sind die grundsätzlichen Tabellenprobleme gelöst. Erst wenn man das Fenster viel zu klein machen würde gäbe es hier Probleme (de facto schon vorher, das liegt jedoch an anderen zu großen Bildern auf dieser Seite). Ich finde, es wäre richtig diese Variante auch für das Anzeige-Skript umzusetzen... tja, nur habe ich mal wieder so eine Sondervorstellen.

Angenommen, die DIVs die ich erstelle, haben eine Breite von 320px. UNd nun ist am rechten Rand nur noch 319px Platz. Logisch, da wird umgebrochen. Soll ja auch. Nur jetzt sieht alles so linksbündig aus. Viel schöner wäre es, wenn alle DIVs noch von einem weiteren Element umgeben wären welches immer zentriert ist unabhängig von der Fenstergröße. Dieses Element soll immer die Breite aller in einer Zeile angezeigten "schwebender" DIV-Elemente haben.

Ein Ansatz wäre folgender:

CSS:

.schwebe { float:left; width:320px; background-color:#FF7777; border:solid 2px black; text-align:center; }
.block { display:block; margin:auto; border:solid 2px red; background-color:#77FF77; }

Die farblichen Hervorhebungen und die Rahmen dienen der besseren Ansischt.

HTML-Test:

<div class="block">
 <div class="schwebe">Float 1</div>
 <div class="schwebe">Float 2</div>
 <div class="schwebe">Float 3</div>
 <div class="schwebe">Float 4</div>
 <div class="schwebe">Float 5</div>
 <div class="schwebe">Float 6</div>
 <div class="schwebe">Float 7</div>
 <div class="schwebe">Float 8</div>
 <div class="schwebe">Float 9</div>
 <div class="schwebe">Float 10</div>
</div>

Was dabei leider herauskommt sieht so aus:

http://www.links-hp.de/floatdemo.html

Tja.. was kann ich machen. Kann ich mein Ziel überhaupt erreichen?
Oder muss ich damit leben, dass der Inhalt dann halt linksbündig ist,

Danke,

Julian

[Felix Riesterer]

Lieber Julian,

Nun überlege ich, die Tabellenzellen durch DIVs zu ersetzen mit dem CSS-Attribut "float:left". In der Praxis klappt das sehr gut, siehe:

http://www.links-hp.de/reppage/ (ganz runter scrollen)

da steht dann Folgendes:

<div class="flb cnt"><a href="kn2cr.jpg"><img src="kn2crs.jpg" alt="Knuckles 2 Cream" class="nbd" /><br />Knuckles replaced by Cream.. works very well (1280x960, 322 KB)</a></div>.

Ich finde eine Klasse für Textabsätze hätte das auch getan. Wozu diese DIVs?
Beispiel:
<p class="flb cnt"><a href="kn2cr.jpg"><img src="kn2crs.jpg" alt="Knuckles 2 Cream" class="nbd" /><br />Knuckles replaced by Cream.. works very well (1280x960, 322 KB)</a></p>
Meiner Meinung nach ist dieser HTML-Code semantischer, da er etwas über die Bedeutung des Inhaltes aussagt, was so ein DIV nicht kann.
Jedenfalls habe ich das so bei mir gemacht.

Nur jetzt sieht alles so linksbündig aus. Viel schöner wäre es, wenn alle DIVs noch von einem weiteren Element umgeben wären welches immer zentriert ist unabhängig von der Fenstergröße.

Du kannst Deine Floats nur rechts- oder linksbündig floaten lassen, oder aber als Block-Elemente zentriert ausrichten. Ent oder weder. "Zentriert floaten" ist noch nicht erfunden. Und wenn Du Deine Floats mit einem zentrierten Block umgibst, dann wird der eben maximal breit - je nachdem wieviele Floats nebeneinander Platz finden - und lässt damit ein nicht-zentriertes Float in seiner letzten "Zeile" zu.

Tja.. was kann ich machen. Kann ich mein Ziel überhaupt erreichen?
Oder muss ich damit leben, dass der Inhalt dann halt linksbündig ist,

Meines Wissens nach ja. Zumindest bisher (mit CSS2).

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Julian Becker]

Ich finde eine Klasse für Textabsätze hätte das auch getan. Wozu diese DIVs?
Beispiel:
<p class="flb cnt"><a href="kn2cr.jpg"><img src="kn2crs.jpg" alt="Knuckles 2 Cream" class="nbd" /><br />Knuckles replaced by Cream.. works very well (1280x960, 322 KB)</a></p>
Meiner Meinung nach ist dieser HTML-Code semantischer, da er etwas über die Bedeutung des Inhaltes aussagt, was so ein DIV nicht kann.

Gut, das sehe ich ein. Mit DIV habe ich mich da wohl schon etwas sehr vergriffen. Der typische Beobachter wird es zwar nicht sehen, Quelltext-Analysatoren dagegen sehr wohl ;) .

Du kannst Deine Floats nur rechts- oder linksbündig floaten lassen, oder aber als Block-Elemente zentriert ausrichten. Ent oder weder. "Zentriert floaten" ist noch nicht erfunden. Und wenn Du Deine Floats mit einem zentrierten Block umgibst, dann wird der eben maximal breit - je nachdem wieviele Floats nebeneinander Platz finden - und lässt damit ein nicht-zentriertes Float in seiner letzten "Zeile" zu.

Hm.. leider habe ich mir schon fast sowas gedacht, denn nach vielen vielen Versuchen, kam irgendwie am Ende immer noch nichts raus. Interessant war hier nur zu beobachten wie sich IE und Firefox in der Darstellung gestritten haben. Wobei das halt nicht der Punkt ist. "Zentriert floaten" <-- ein sehr schöner Kunstbegriff

Oder muss ich damit leben, dass der Inhalt dann halt linksbündig ist,
Meines Wissens nach ja. Zumindest bisher (mit CSS2).

Na gut.. man kann nicht alles haben ;) Vielleicht wird ja CSS 3 oder CSS 4 da was anbieten. Aber man kann ja bei weitem nicht alles haben und daher ist es wohl am besten, einfach mit den Handwerkzeugen zu arbeiten die man hat. Klar habe ich hier schon testweise die Blöcke oder DIVs oder Ps (ist ja egal, kommt aufs Prinzip an) in eine 3-spaltige Tabelle gepackt, bei der die Breite der beiden Außenspalten durch ein JavaScript gesetzt wird (in der zentralen Spalte sind dann die DIVs/Ps/was auch immer). Nur ist das etwas am Ziel vorbei, da JavaScript erstens häufig deaktiviert ist und irgendwie hab ich dann ein Tabellenproblem mit einer Tabelle gelöst, obwohl ich diese gerade los werden wollte. NIcht so der Bringer.

Liebe Grüße aus Ellwangen,

Felix Riesterer.

Grüße aus Oppenheim ;),

trotzdem danke,

Julian

[Felix Riesterer]

Lieber Julian,

"Zentriert floaten" <-- ein sehr schöner Kunstbegriff

da kommt mir eine Idee. Stelle Dir vor, Du definierst per CSS eine Klasse, die Bildern großzügige Ränder spendiert, so dass die Bilder in einem Absatz fortlaufend notiert, in ebenmäßigen Abständen zueinander stehen. Diesen Absatz formatierst Du zentriert.

Durch den zentrierten Textabsatz haben die Bilderzeilen rechts und links denselben Abstand zum Rand. Bei n Bildern immer. Auch wenn in der letzten Zeile nicht mehr n Bilder angezeigt werden, so werden doch die vorhandenen Bilder quasi mittig ausgerichtet!

Skizze:
 +----------------------------+
 |           Seite            |
 |   +--+  +--+  +--+  +--+   | Die Bilder haben per margin
 |   |  |  |  |  |  |  |  |   | zwischen einander sinnvolle
 |   +--+  +--+  +--+  +--+   | Abstände.
 |   +--+  +--+  +--+  +--+   |
 |   |  |  |  |  |  |  |  |   | Die Bilder-Zeilen sind zentriert ausgerichtet.
 |   +--+  +--+  +--+  +--+   |
 |      +--+  +--+  +--+      | Daher stehen die Bilder der letzten Zeile
 |      |  |  |  |  |  |      | auch "zentriert", obwohl es weniger sind.
 |      +--+  +--+  +--+      | Übrigens alles ohne float!
 +----------------------------+

Wenn Du zu den Bildern gerne noch Bildunter- oder -überschriften haben möchtest, dann kannst Du ja kleine Tabellen notieren, in deren zwei Zeilen Bild und zugehöriger Text stehen. <table> mit display: inline verhält sich in einem großen <div> ähnlich, wie <img>s in einem <p>.

Wäre das etwas für Dich?

Liebe Grüße aus Ellwangen,

Felix Riesterer.

[Axel Richter]

Hallo,

Skizze:
+----------------------------+
|           Seite            |
|   +--+  +--+  +--+  +--+   | Die Bilder haben per margin
|   |  |  |  |  |  |  |  |   | zwischen einander sinnvolle
|   +--+  +--+  +--+  +--+   | Abstände.
|   +--+  +--+  +--+  +--+   |
|   |  |  |  |  |  |  |  |   | Die Bilder-Zeilen sind zentriert ausgerichtet.
|   +--+  +--+  +--+  +--+   |
|      +--+  +--+  +--+      | Daher stehen die Bilder der letzten Zeile
|      |  |  |  |  |  |      | auch "zentriert", obwohl es weniger sind.
|      +--+  +--+  +--+      | Übrigens alles ohne float!
+----------------------------+

Ja, das funktioniert.

Wenn Du zu den Bildern gerne noch Bildunter- oder -überschriften haben möchtest, dann kannst Du ja kleine Tabellen notieren, in deren zwei Zeilen Bild und zugehöriger Text stehen. <table> mit display: inline verhält sich in einem großen <div> ähnlich, wie <img>s in einem <p>.

Hm, nein. TABLE mit display:inline verhält sich äußerst chaotisch. Üblich wäre hierfür display:inline-table. Das wird aber bisher nur von Opera8.5 umgesetzt. Im folgenden Beispiel kannst Du das mal ausprobieren. Das größte Problem ist hier leider der FireFox, der vertical-align:top allzu strict umsetzt. Für IE kann man ja CCs einsetzen. Im Opera8.5 wird es, wie gesagt nach Standard umgesetzt. Ich will es mir aber lieber nicht in früheren Operas oder im Safari oder im ...;-)) ansehen.

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">  
<head>  
<title>Thumbnails</title>  
<meta http-equiv="content-type" content="text/html; charset=utf-8" />  
<style type="text/css">  
<!--  
.container { border:solid 2px green; background-color:#77FF77; text-align:center; }  
.thumbnail { display:inline; display:inline-table; margin:5px; border:solid 2px red; background-color:#FF7777; } /*Fuer Opera8.5 wird display:inline-table definiert.*/  
/*.thumbnail { vertical-align:top; }*//*Das mag FireFox nicht*/  
.thumbnail td { width:120px; text-align:center; padding:5px; border:solid 2px blue; background-color:#7777FF; }  
.thumbnail img { display:block; }  
/* -->  
</style>  
<!--[if IE]>  
<style type="text/css">  
.thumbnail { display:inline; vertical-align:top; }  
</style>  
<![endif]-->  
</head>  
<body>  
<div class="container">  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschreibung</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschreibung viel laenger als ueblicherweise</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschr.</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschreibung</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschreibung viel laenger als ueblicherweise</td></tr>  
 </table>  
 <table class="thumbnail">  
  <tr><td><img src="Beispiel.jpg" width="120" height="120" alt="Thumbnail" /></td></tr>  
  <tr><td>Bildbeschr.</td></tr>  
 </table>  
</div>  
</body>  
</html>  

viele Grüße

Axel

[Axel Richter]

Hallo,

Angenommen, die DIVs die ich erstelle, haben eine Breite von 320px. UNd nun ist am rechten Rand nur noch 319px Platz. Logisch, da wird umgebrochen. Soll ja auch. Nur jetzt sieht alles so linksbündig aus. Viel schöner wäre es, wenn alle DIVs noch von einem weiteren Element umgeben wären welches immer zentriert ist unabhängig von der Fenstergröße.

Ja, ein Blockelement mit Breite n*(320px+2px+2px) bietet Platz für n Deiner DIVs, wenn diese margin:0; padding:0 haben.

.block { display:block; width:972px; margin:auto; border:solid 2px red; background-color:#77FF77; }

In Fenstern, deren Viewport breiter als 972px ist, wird das dann zentriert. Kleinere Fenster müssen natürlich horizontal gescrollt werden.

Dieses Element soll immer die Breite aller in einer Zeile angezeigten "schwebender" DIV-Elemente haben.

Ähm, wieviele sollen das sein? So viele, wie in die Breite des Browserfensters passen, also n? Wie schon gesagt wurde, gibt es eine solche Einstellung mit CSS bisher noch nicht. Du kannst in CSS2-fähigen Browsern nur festlegen, dass _mindestens_ 1 und aber _maximal_ 3 Elemente nebeneinander passen. Dazu benötigst Du min-width und max-width. Bsp.:

.block { min-width:324px; max-width:972px; margin:auto; border:solid 2px red; background-color:#77FF77; }

Mit JavaScript könntest Du die Darstellung erreichen. Die Nachteile von JavaScript sind aber einschlägig bekannt. Hierfür wäre es allerdings möglich, weil es sich ja nur um ein zusätzliches Merkmal handelt, welches die Funktionalität nicht beeinträchtigt.

Ansatz:
Das Browserfenster hat die Breite y. Mit y/(320px+2px+2px) lässt sich n ermitten. Der gemittelte linke Rand wäre dann (y-n*(320px+2px+2px))/2.

viele Grüße

Axel