nicht angemeldet
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