zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Divs horizontal anordnen, mit <li>, float?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 26.08.2008, 13:35
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2008
Beiträge: 37
funky^mariechen befindet sich auf einem aufstrebenden Ast
Standard Divs horizontal anordnen, mit <li>, float?

Hallo,

vielleicht kann mir jemand helfen bei meinem Problem.

Ich habe mehrere Divs, die nebeneinander angeordnet werden sollen. Wenn die Seitenbreite nicht ausreicht, soll ein Umbruch stattfinden, so das die Divs schön untereinander angeordnet werden.

auf Testseite ist das Beispiel zu finden.

Ich habe es zu Anfang probiert, die Divs einfach floaten zu lassen. Da die Divs aber unterchiedlich hoch sind, klappt der Umbruch nicht korrekt wie man sieht. Die Spalte mit Dienstag bleibt am höchsten vorherigen Div "kleben", was (wie mir erst später bewußt geworden ist) ja eigentlich auch zu erwarten war.

Danach habe ich nun probiert, die ganzen Divs in eine Liste zu packen und diese horizontal auszurichten. Leider klappt "display: inline" aber irgendwie nicht, und die <li>s werden nur untereinander angeordnet.
Ich hatte erwartet das die <li> sich an dem größten eingeschlossenen Div orientieren, und bei einem Umbruch dann einfach in der nächsten Zeile weiterlaufen. Aber Pustekuchen

Mit diesem Schnippsel
Code:
#alldays ul li{
	display: inline !important;
	margin: 0px;
	float: left;
}
werden sie zwar nebeneinander angeordnet, aber ein Div bleibt wieder kleben.

Weiß jemadn wie ich das Problem beheben kann?
Oder hat jemand einen Vorschlag wie ich die Daten sonst anzeigen lassen soll.


P.S: nicht wundern, die Breite des äußeren Containers habe ich jetzt nur fest auf 900px Breite gesetzt, um einen Umbruch zu erzwingen.
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 26.08.2008, 15:54
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

wenn ich div class="newday" für "Montag" eine Höhe gebe z.B. 1400px dann brechen "Dientag" und "Mittwoch" schön brav um.
D.h. wenn alle die gleiche Höhe (so wie das längste div) haben, bleibt auch nix hängen.

Wie das dann aussieht ist natürlich ne ganz andere Frage.

Vielleicht sollte man das eher wie eine Tabelle (*duck*) anordnen.
Auf der Y-Achse die Tage und auf der X-Achse oben die Uhrzeiten.
Da wären dann auch immer mal leere Stellen, aber es könnte insgesamt kompakter wirken.

Gruß
Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.08.2008, 16:21
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2008
Beiträge: 37
funky^mariechen befindet sich auf einem aufstrebenden Ast
Standard

Das Problem ist, das die Seite dynamisch generiert wird. Von daher sind feste höhen schlecht, genauso wie ich vorher auch nicht die benötigte Breite kenne
Mit Zitat antworten
  #4 (permalink)  
Alt 26.08.2008, 16:37
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

das bei der Erstellung der Seite "Frametechnik" verwendet wurde bringt natürlich praktisch nur Nachteile.

Hast du das mal mit dem tabellenähnlichen Aufbau wie von mir vorgeschlagen probiert?
Der momentane Status mit den unterschiedlich langen vertikalen Spalten sind ja optisch nicht so der "Brüller", wenn ich das anmerken darf.

Gruß
Klaus
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #5 (permalink)  
Alt 26.08.2008, 16:57
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2008
Beiträge: 37
funky^mariechen befindet sich auf einem aufstrebenden Ast
Standard

Optimal ist es nicht, liegt aber auch daran, das der Benutzer sich seinen "Timetable" selber zusammenstellen soll. Wenn viele Sachen ausgewählt werden bzw. zur Auswahl stehen, dann wird die Spalte nunmal länger.

Was meinst Du mit Frametechnik?

Das mit der Tabelle wär eine Möglichkeit, nur leider läßt sich das nicht soeben umsetzen. Das was ich dort auf die Beispielseite kopiert habe ist nur ein kleiner Teil und entspricht nicht der gesamten Seite. Die ist wesentlich umfangreicher, wird dynamisch generiert und ist insgesamt ein Jahrealter Moloch an dem immer weiter rumgefrickelt wurde und jeder hat Angst tiefergreifendere Änderungen durchzuführen

Schön wäre es halt, wenn mit geringfügigen Änderungen ein optisch einigermaßen zufriedenstellendes Ergebnis zu erzielen wäre(was bedeutet das nicht einzelne Spalten irgendwo "kleben" bleiben, sondern ein sauberer Umbruch passiert, und wieder am linken Bildschirmrand mit der Ausgabe gestartet wird)
Mit Zitat antworten
  #6 (permalink)  
Alt 26.08.2008, 17:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Das klingt nach inline-block.
In Kapitel 5 des unten verlinkten Buches (Signatur) wird die browserübergreifende Anwendung erklärt -- dieses Kapitel gibt es als kostenlose Leseprobe beim Verlag.
Mit Zitat antworten
  #7 (permalink)  
Alt 26.08.2008, 17:00
EvT EvT ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 11.09.2006
Ort: Bad Wildungen
Beiträge: 2.223
EvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekanntEvT ist jedem bekannt
Standard

Wenn Divs unterschiedlicher Höhe nebeneinander positioniert werden und bei Bedarf in eine neue Zeile umbrechen sollen, d.h. ohne dass sie an höheren Vorgänger-Divs hängenbleiben, bietet es sich an, das gewünschte Layout und Verhalten über Display: inline-block zu realisieren. Allerdings gibt es hierbei Probleme mit IE und Firefox, die aber lösbar sind: Display: inline-block ist in Firefox 2.x nicht implementiert und IE-Versionen lt 8 wenden per se diese Eigenschaft nur auf Inline-Elemente an.

Wie diese Display:inline-block-Technik browserübergreifend umgesetzt werden kann, zeigen Claire Campbell [2005/2008] sowie Chao u. Rudel [2008].

Da der Code ziemlich komplex ist, stelle ich zum besseren Verständnis das Beispiel von Campbell komplett ein.


1. Claire Campbell, 2005/2008

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 
<title>Centered Inline-Blocks - Gallery Style Listing</title> 

<style type="text/css" media="screen, projection">

* {
	margin: 0; 
	border: 0 none; 
	padding: 0; 
	} 

body {
	background: lightgrey;
	}

#container { 
	margin: 0 150px;
	padding: 5px; 
	text-align: center; /* IE 5.x center */ 
	background: #fff; 
	} 

.box { 
	margin: 5px; 
	border: 1px solid #000; 
	display: -moz-inline-box; /* For FF<3 */ 
	-moz-box-orient: vertical; /* For FF<3 */ 
	display: inline-block; /* IE <8 needs this tripped back to display: inline; to make it work on block elements - see conditional below */ 
	width: 150px; /*  Optional */ 
	vertical-align: middle; /* explicitly declare your preference as Moz inline-box auto aligns to top */ 
	text-align: left; /* to left align text within divs when container has been set to center */ 
	background: #eee; 
	} 

.box p {
	margin: 0.5em;
	} 
</style> 

<!--[if lt IE 8]> 
<style type="text/css" media="screen"> 
.box {display: inline;} /* this is to make inline-block work on block elements versions <IE8 */ 
</style> 
<![endif]--> 

</head>


<body> 
<div id="container"> 
<div class="box"><p>test</p></div> 
<div class="box"><p>test</p></div> 
<div class="box"><p>test</p></div> 
<div class="box"><p>test.<br />test.<br />test.<br />test.<br />test.</p></div> 
<div class="box"><p>test</p></div> 
<div class="box"><p>test</p></div> 
<div class="box"><p>test</p></div> 
<div class="box"><p>test</p></div> 
<div class="box"> 
<p>Firefox 2.x bricht Textzeilen nicht um, sodass der Text aus der Box herausragt. Daher war es bisher erforderlich, dass Inhalte in einem weiteren Blockelement mit einer Breitenangabe verschachtelt werden müssen, um Zeilenbrüche in FF 2.x zu erreichen. Mit der vorgenommenen Anpassung des Stylesheets ist das nun nicht mehr nötig.</p> 

</div> 
</div> 

</body> 
</html>

2. Chao und Rudel, 2008
In dem soeben erschienenen Buch "Fortgeschrittene CSS-Techniken Inkl. CSS-Debugging" findet sich der Code einer weiteren Umsetzung auf Seite 122 ff. Diese Seiten sind auch in dem onlinestehenden Probekapitel (Download als Pdf über die verlinkte Seite) vorhanden.
Mit Zitat antworten
  #8 (permalink)  
Alt 26.08.2008, 17:11
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2008
Beiträge: 37
funky^mariechen befindet sich auf einem aufstrebenden Ast
Standard

ha, ich werd verrückt!

hab mich gerade schon ein wenig zu früh gefreut, weil es im ff3 genauso aussieht wie ich es mir vorgestellt habe und erst dann die Einschränkungen mit FF<3 und IE < 8 gesehen habe aber da scheint es ja abhilfe zu geben.

Danke schonmal & ich werd mal weiterprobieren!
Mit Zitat antworten
  #9 (permalink)  
Alt 26.08.2008, 17:49
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

Zitat:
Zitat von funky^mariechen Beitrag anzeigen
Was meinst Du mit Frametechnik?
Code:
<frameset rows="*,0" border="0" frameborder="0" style="border: none">
  <frame src="http://web316.server126.star-server.info/test" noresize scrolling="auto">
Das steht im Quelltext der Seite, also Frametechnik.

Zitat:
Zitat von funky^mariechen Beitrag anzeigen
Die ist wesentlich umfangreicher, wird dynamisch generiert und ist insgesamt ein Jahrealter Moloch an dem immer weiter rumgefrickelt wurde und jeder hat Angst tiefergreifendere Änderungen durchzuführen
Jep, denn das hieße im Grunde nochmal von vorn und da drückt man sich verständlicherweise vor solange es geht.
Aber "Corina" und "EvT" haben ja schon glücklicherweise Lösungen für dich aufgezeigt.

Gruß
Klaus

[ot]
Zitat:
Zitat von Corina:
In Kapitel 5 des unten verlinkten Buches (Signatur)
Dirk hats morgen schon, die Niederbayern müssen wohl wieder warten. [/ot]
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 26.08.2008, 17:54
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 26.08.2008
Beiträge: 37
funky^mariechen befindet sich auf einem aufstrebenden Ast
Standard

achsoooo,

ne das mit den frames kommt nur durch die url. das ist nur ne weiterleitung auf den eigentlichen server und die arbeiten da irgendwie mit frames

bin gerade schon verzweifelt wo du in meinem quelltext irgendwelche frame sachen gefunden hast
grüße, axel
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Unbekannte Anzahl Divs in Liste anordnen und horizontal und vertikal zentrieren Alien CSS 17 20.03.2011 10:23
Float-Problem? mischaef CSS 33 20.10.2010 16:20
Mozilla zeigt DIV zu oft an cracki CSS 6 09.03.2008 15:22
IE zeigt gewisse Texte nicht an zitronenbaum CSS 2 16.01.2008 15:25
So langsam bekomme ich die Krise mit den DIVs Thuroc CSS 12 12.11.2007 14:25


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:45 Uhr.