Formatierung von mehreren Boxen (Boxenliste in zwei Spalten)

Status
Nicht offen für weitere Antworten.
E

elix

Grünschnabel
Hi,

habe folgendes Problem. Ich hoffe, dass es hier im richtigen Topic drin steht. Es hat auf jeden Fall auch was mit css zu tun, muss aber möglicherweise anders gelöst werden.


Auf meiner Site habe ich zwei Spalten. Eine links und eine rechts. Die habe ich nicht mit tables sondern css-boxen dargestellt. Auf jeder Seite sind jetzt mehrere Boxen untereinander angebracht, sozusagen eine Liste von Boxen.
Die Boxen sind jeweils mit Text gefüllt, der aus einer Datenbank bezogen wird und werden je nach Text unterschiedlich groß.

Ich möchte jetzt die Textboxen so anordnen, dass auf der linken Seite Boxen angezeigt werden und sobald diese nicht mehr auf die linke Seite passen, auf der rechten Seite die restlichen dargestellt werden. Man könnte aber auch links und rechts die Boxen gleichmäßig verteilt anordnen, so dass aber die unterste Box links und rechts auf gleicher Höhe abschließen.

Das Problem ist jetzt, ich weiß nicht im voraus wie viele Boxen angezeigt werden sollen (könnte man aber mit php vorher abfragen) und was eigentlich noch viel schwieriger ist, ich weiß nicht, wie groß die Boxen sind, da die Größe ja von der Textlänge abhängt.

Ich habe im Moment noch keine Idee, wie ich da jetzt rangehen soll. Habt ihr zufälligerweise ne Idee?

Mein erster Gedanke war ne Max-Height der Boxen zu definieren, so dass wenn der Text nicht mehr reinpasst, automatisch der Text in der Box gescrollt werden muss. Aber zum einen habe ich auf dem Display auf dem die Site angezeigt werden soll keine Maus oder sonstiges zur Verfügung und zum anderen unterstützt der IE die Max-Height nicht.


Danke für eure Hilfe und Ideen

Felix
 
Ich befürchte, mit CSS-Mitteln lässt sich dein Problem nicht lösen.
Ich könnte mir höchstens eine JS-Lösung vorstellen, da könntest du die Grösse der Boxen ermitteln und diese auf die Spalten verteilen.
 
Gibt es eine Code dazu?
Wie lange sind die Texte und warum gibt es innerhalb der Spalten keinen Zeilenumbruch?
Warum muss der Text aus der linken in die rechte Spalte, wenn beide Spalten möglicherweise gleich angeordnet sind?

Zur Lösung des Textes:
Mit PHP kann man die Anzahl der Zeichen auslesen. Wird diese um die Zahl x Erhöht, kommt der Text eben in die rechte oder sonstige Spalte.
Das ganze zuvor in ein Array einlesen und die Arrays den jeweiligen Spalten zuordnen.

Tipp: max-height funktioniert bei IE nicht.
 
Hallo,

Javascript würde ich auch nehmen. Ich habe da schon rumhantiert mit so automatisch scrollenden boxen und habe gedacht, dass man, wenn der Text zu lange ist, den Text durchscrollen lassen könnte. Dazu bräuchte ich aber auch wieder zuerst die Anzahl der Umbrüche im Text.

Kann ich bei Javascript nicht erst die Größe der Box ermitteln, nachdem sie angezeigt worden ist?

Text steht beispielsweise folgender in der Box:

"
Check-In am Flughafen Frankfurt-Hahn seit 1Monat

Check-In spätestens um 8:55 Uhr Flugbestätigungsnummer: HV2QCD Wichtig: Gültiger Lichtbildausweis (Reisepass, Personalausweis, Führerschein) Freigepäckgrenze von 15 kg pro Person. Hnadgepäck 10 kg pro Person. http://www.hahn-airport.de/
"

Klar Umbrüche habe ich, das ist ja das Problem, da dadurch die Boxen größer werden. Das Zählen der Zeichen habe ich auch schon in Betracht gezogen, ist aber eher die Notlösung falls nix anderes gibt, weil je nach Schriftart nicht die Zahl der Zeichen zuständig ist für die Umbrüche. Zudem habe ich ja auch eine Restzeitanzeige die in der Box rechts gefloatet ist und sich auch je nach Restzeit in der Größe verändert...

Code gibts, kann ich nachher noch eintragen.

Grüße

Felix
 
Weist ihr den Boxen keine Breite zu? Die verschieben sich nicht einfach so, wenn eine Breitenangabe da ist.
 
Geht es auch darum, dass der Text:

"Check-In spätestens um 8:55 Uhr Flugbestätigungsnummer: HV2QCD Wichtig: Gültiger Lichtbildausweis (Reisepass,"

verschwindet?
 
entweder hätte ich gerne, dass alle Boxen die selbe Höhe haben und falls der Text nicht ganz reinpasst automatisch in der Box gescrollt wird oder aber, dass die Textboxen unterschiedlich groß sind, ich aber die Größe der Boxen herausbekomme um die Boxen besser verteilen zu können. Die erste Methode wäre mir die liebere. Insbesondere muss die Site vor allem im IE laufen.

Grüße

Felix

hier noch ein Stückchen code:
Man sieht im Moment breche ich den Code von der linken auf die rechte Site nach einer festen Anzahl Boxen um. Sorry für die schlechte Formatierung. Irgendwie krieg ich die Tabulatoren nit so hin hier im Forum.

PHP: 
$licount= 1;
$lsreturn.='<div id="links">';
		
while (list($key,$value) =each($lasorted))
{
			
	    $show_string = $lataskids[$key];
if($licount<$umbruch)
	    {
		$lsreturn.='<div class="task">
                <div    class="description">'.$show_string->show_remain().$show_string->get_description().'</div>'.(($show_string->get_notice()=="")?(''):('<p class="notice">'.$show_string->get_notice().'</p>')).'</div>';
            }
                
            if ($licount==$umbruch)
	    {
		$lsreturn.='</div>';
		$lsreturn.='<div id="rechts">';
	    }
                
	    if ($licount>=$umbruch)
	    {
                $lsreturn.='<div class="task">
                <div class="description">'.$show_string->show_remain().$show_string->get_description().'</div>'.(($show_string->get_notice()=="")?(''):('<p class="notice">'.$show_string->get_notice().'</p>')).'</div>';
	    }
				
	    $licount++;
}

$lsreturn.='</div>';
 
Mmh...es ist irgendwie nicht optimal, dass die Spalten nicht gleich breit sind :(
Warum: Wenn man den Inhalt anhand der Höhe der einzelnen Boxen verteilen will, setzt dies vorraus, dass Breite gleichbleibend ist...andernfalls ändert sich ja wieder die Höhe.
 
@Sven,
so gehts mir auch......

@elix,

mit CSS overflow:auto; wird in einer Box beim überlauf automatisch ein Scrollmöglichkeit angeboten.

Nochmal zur Breite. Wenn du doch eine feste Breite vorgeben kannst, kannst du doch besser den Text dieser Breite anpassen als die Breite dem Text.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück