• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] Zeilen obenbündig

mikdoe

mikdoe

Moderator
Im Projekt Entwicklung horizontaler Endloskalender gibt es folgenden Aufbau: Jeder Tag ist ein <li> Element mit einer enthaltenen <table>. Derzeit sind die einzelnen Zeilen der <table> mittig ausgerichtet. Ich hätte sie aber gern obenbündig.
Wenn ich aus .kalender_liste_item_tab das height:100% entferne habe ich zwar die Ausrichtung wie gewünscht aber der Rahmen umgibt nur die <table> und nicht die ganze <li>. Das sieht so aus:
fehler_kalender2.png

Wenn ich nun weiter das border:1px yellow solid vom .kalender_liste_item_tab in .kalender_liste_item verschiebe zerschießt es den Aufbau, soll heißen die Tage werden nicht mehr allesamt nebeneinander angeordnet sondern teilweise untereinander. Den Effekt sieht man, wenn man overflow-y:hidden aus .kalender_innen vorübergehend entfernt und dann nach unten scrollt. Habe davon auch ein Screenshot gemacht:
fehler_kalender1.png

Nun weiß ich nicht, wie ich die Inhalte der <table>'s obenbündig hinbekomme und gleichzeitig jedes <li> komplett umrahmen kann. Über Google habe ich ein paar Suchen gemacht, konnte aber nirgendwo ein Beispiel finden, das meinem ähnelt. Kann jemand helfen?
Die verlinkte Datei ist lokal ohne weitere Änderungen lauffähig, wenn ganz unten der Schalter offline auf true gesetzt wird.
 
kkapsner schrieb:
zum <td>
Zum Vergrößern anklicken....
Dann sind die Inhalte der <td>'s obenbündig und sieht so aus:
fehler_kalender3.png

Das war aber nicht die Frage. Ich hätte gern die Zeilen selbst obenbündig, nicht nur deren Inhalte. Es soll also so aussehen wie im oberen Bild aus Beitrag #1 außer dem gelben Rand, der soll um den ganzen Tag herum bleiben wie er jetzt ist. Der Rand wäre auch nicht das Problem, den könnte ich ja um das <li> machen. Das Problem ist, dass alles zusammenfällt, wenn ich das height:100% aus der <table> raus nehme.
Daher die selbe Frage anders formuliert: Wie erreiche ich den Effekt, den ich ohne 100% Höhe in der <table> habe ohne dass das ganze Layout zusammen fällt?
 
Zuletzt bearbeitet:
Ein display: inline-block; bei den <li>s und ein white-space: nowrap; bei dem umschließenden Element lösen das Umbruchproblem. Dann kannst du den Rahmen auch um das <li> packen und die <table> braucht keine Höhe.

PS: Ich finde ja, dass die <table> dann komplett überflüssig ist... oder willst du dann noch irgendwelche Spalten einbauen?
 
Eine Kleinigkeit noch: Das white-space:nowrap im CSS .kalender_innen hat jetzt zur Folge, das alle untergeordneten Elemente damit versehen werden. Das bedeutet, immer dann wenn ich einen Zeilenumbruch haben will, wie z.B. bei Feiertagen .kalender_zelle_feiert muss ich dort white-space:normal geben.
Muss ich damit leben oder können wir das auch anders lösen?
 
mit
Code: 
.kalender_innen * {
	white-space: normal;
}
kannst du allen Elementen, die sich darin befinden wieder das normale Verhalten geben.

Das nowrap ist meiner Meinung nach hald die robusteste Methode um so eine "Wurst" zu erzeugen...
 
Hatte das jetzt als zusätzlichen Abschnitt eingefügt, das hebt aber die Formatierung als Wurst auf. Wie genau muss ich das implementieren?
 
Ah... kleiner Fehler. Das <ul> brauchst das nowrap. Also
Code: 
.kalender_innen ul * {
	white-space: normal;
}
 
was bewirkt das * speziell in diesem css?

@mikdoe, du solltest deinen ordner eventuell schützen ^^

das titlealert.js nutze ich auch, finds super :D
 
dertypdernixkan, das ist nur ein Spielwebspace, da brauche ich nichts schützen.
Der Stern dürfte dafür stehen, dass alle <td>'s an der Stelle gemeint sind.
 
@dertypdernixkan: das * macht hier nichts spezielles. Es passt, so wie immer, einfach auf jedes beliebige Element.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben