nicht angemeldet
Textbox vertikal an benachbarten Elementen ausrichten
Hallo allerseits!
Ich hätte da ein Problem und wüsste gern, ob das, was ich mir da gedacht habe mit einfachem CSS zu bewerkstelligen ist.
Und zwar:
Innerhalb einer größeren Box habe ich drei kleine Textboxen mit einem sichtbaren Rahmen.
Zwei davon (in meinem Falle die obere und die untere) sollen in ihrer Höhe ganz normal durch ihren Inhalt bestimmt werden. Die dritte (in meinem Falle die mittlere) soll den restlichen vertikalen Platz einnehmen (mit etwas Abstand zur unteren Box) - unabhängig davon wie wenig Text sie in sich trägt. Also irgendetwas mit "min-height" nach meiner Erkenntnis.
Mit anderen Worten: eine Box orientiert sich oben, eine unten (deshalb hier "position:absolute;") und eine mittlere sollte sich praktisch oben _und_ unten orientieren.
Um das hinzukriegen müsste die mittlere Box ja irgendwie die Höhe der unteren Box abfragen können - mal so ganz grundsätzlich gedacht.
Denke ich da falsch?
Falls nein: geht das überhaupt mit CSS?
Mit JavaScript würde ich das schon irgendwie hinkriegen, frage mich nur, ob das auch ohne geht...
Hier ein Beispiel zum beschriebenen Problem:
<body>
<div id="inhalt01" class="inhalt" style="top: 100px;">
<div id="links1" class="rahmen_links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lectus arcu, et euismod purus. Vivamus lobortis nunc vitae quam aliquet tincidunt.
</div>
<div id="links2" class="rahmen_links" style="min-height:100px; top:20px;"> <!-- "min-height" provisorisch, dieser kasten sollte sich (mit etwas abstand) am unteren _und_ oberen kasten ausrichten! -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div id="links3" class="rahmen_links" style="position:absolute; bottom:0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lectus arcu, et euismod purus. Vivamus lobortis nunc vitae quam aliquet tincidunt. Nunc consequat nulla ut mauris fermentum facilisis.
</div>
</div>
</body>
Dazu die Style Sheets:
.rahmen_links {
width: 300px;
padding: 4px;
position: relative;
border: solid 1px;
left: 0px;
}
.inhalt {
position: relative;
margin-left:auto;
margin-right: auto;
width: 900px;
height: 500px;
padding: 0px;
border: solid 1px #0000FF;
}
Yep, bin mal gespannt, was ihr zu sagen habt, vielen Dank schonmal fürs Reinlesen!
chris
-
Hallo Chris!
Yep, bin mal gespannt, was ihr zu sagen habt, vielen Dank schonmal fürs Reinlesen!
Also ..., dann will ich zumindest mal anfangen.
Sieht aber nach einer größeren "Baustelle" aus ... ;-)Und zwar:
Innerhalb einer größeren Box habe ich drei kleine Textboxen mit einem sichtbaren Rahmen.
Zwei davon (in meinem Falle die obere und die untere) sollen in ihrer Höhe ganz normal durch ihren Inhalt bestimmt werden. Die dritte (in meinem Falle die mittlere) soll den restlichen vertikalen Platz einnehmen (mit etwas Abstand zur unteren Box) - unabhängig davon wie wenig Text sie in sich trägt. Also irgendetwas mit "min-height" nach meiner Erkenntnis.Mit anderen Worten: eine Box orientiert sich oben, eine unten (deshalb hier "position:absolute;") und eine mittlere sollte sich praktisch oben _und_ unten orientieren.
Um das hinzukriegen müsste die mittlere Box ja irgendwie die Höhe der unteren Box abfragen können - mal so ganz grundsätzlich gedacht.
Denke ich da falsch?
Falls nein: geht das überhaupt mit CSS?Um es mal mit Radio Eriwan zu sagen: Theoretisch ja!
Praktisch sieht die Sache schon etwas anders aus, aber dazu komme ich später.Du solltest dir erstmal das Kapitel Der normale Elementfluss angucken. Und das Wörtchen "Fluss" verdeutlicht hier schon, dass CSS quasi nur in eine Richtung (halt mit dem Strom/ Fluss), nämlich abwärts "funktioniert".
Sobald du also Elemente aus dem normalen Fluss heraus nimmst (bspw. durch absolute Positionierung), können sich diese nicht mehr (gegenseitig) beeinflussen, wodurch dein Vorhaben so nicht mehr zu realisieren ist (per CSS).
Mit JavaScript würde ich das schon irgendwie hinkriegen, frage mich nur, ob das auch ohne geht...
Es geht. Die Frage ist aber, ob es Sinn macht.
Hier ein Beispiel zum beschriebenen Problem:
<body>
<div id="inhalt01" class="inhalt" style="top: 100px;"><div id="links1" class="rahmen_links">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lectus arcu, et euismod purus. Vivamus lobortis nunc vitae quam aliquet tincidunt.
</div><div id="links2" class="rahmen_links" style="min-height:100px; top:20px;"> <!-- "min-height" provisorisch, dieser kasten sollte sich (mit etwas abstand) am unteren und oberen kasten ausrichten! -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div><div id="links3" class="rahmen_links" style="position:absolute; bottom:0px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae lectus arcu, et euismod purus. Vivamus lobortis nunc vitae quam aliquet tincidunt. Nunc consequat nulla ut mauris fermentum facilisis.
</div>
</div>
</body>> > > Dazu die Style Sheets: > ~~~css > .rahmen_links { > width: 300px; > padding: 4px; > position: relative; > border: solid 1px; > left: 0px; > } > > .inhalt { > position: relative; > margin-left:auto; > margin-right: auto; > width: 900px; > height: 500px; > padding: 0px; > border: solid 1px #0000FF; > } > >Ich habe deinen Code mal stehen lassen, weil er imho zeigt, dass da noch ein gewisser "Nachholbedarf" besteht.
Das fängt z.B. damit an, dass du inline-styles verwendest. Auch die Vergabe von IDs und Klassen, sowie deren Benennung scheint mir verbesserungsfähig. Außenabstände erreicht man üblicherweise durch Margins (und nicht relative Positionierung).Ich fasse deine Ausgangssituation nochmal zusammen:
Du hast ein Container-Element (#inhalt01) welches eine vorgegebene Höhe und Breite hat (height: 500px; width: 900px;). In diesem Container-Element befinden sich nun 3 Kind-Elemente vertikal angeordnet, wobei sich die Höhe des oberen und des unteren Elements nach ihrem jeweiligen Inhalt richten soll, und das mittlere Element die verbleibende Höhe ausfüllen soll.
Soweit richtig?
Erste Frage, die sich aufdrängt ist: Was ist, wenn die Höhe der 3 "Boxen" höher ist, als die des umschließenden Containers?Aber davon jetzt mal abgesehen ..., sind mir 2 Möglichkeiten bekannt, das mit CSS zu realisieren.
Möglichkeit 1:
Verwende die Display Table EigenschaftenMöglichkeit 2:
Verwende das Flexbox Modul
Demo: http://flexiejs.com/playground/Wenn, dann würde ich dir in diesem Fall zu Möglichkeit 1 raten.
So oder so hast du aber sicher erstmal eine Menge "Lese-/ Lernstoff" vor dir, um die jeweiligen CSS Eigenschaften und ihre Wirkungsweise zu verstehen. Letzteres ist elementar ...!
Bei (Verständnis)Fragen wird dir hier natürlich jederzeit gerne weitergeholfen.
Gruß Gunther
-
Hallo Gunther, vielen heißen Dank!
Sieht aber nach einer größeren "Baustelle" aus ... ;-)
WOW - da hab ich wohl wirklich ins Wespennest gestochen...
Dann gleich mal ein paar Fragen hintendran:
Du solltest dir erstmal das Kapitel Der normale Elementfluss angucken. Und das Wörtchen "Fluss" verdeutlicht hier schon, dass CSS quasi nur in eine Richtung (halt mit dem Strom/ Fluss), nämlich abwärts "funktioniert".
Genau. Eine Vermutung in die Richtung hatte ich ja schon formuliert.
Mit JavaScript würde ich das schon irgendwie hinkriegen, frage mich nur, ob das auch ohne geht...
Es geht. Die Frage ist aber, ob es Sinn macht.Soll was genau heißen? Es ist fraglich, ob das Layout Sinn ergibt oder das Weglassen von JavaScript???
Ich habe deinen Code mal stehen lassen, weil er imho zeigt, dass da noch ein gewisser "Nachholbedarf" besteht.
Das mag durchaus sein. Ich mach das hobbymäßig, denke daran gemessen ist's sicher weit besser als der Durchschnitt. ;-)
Das fängt z.B. damit an, dass du inline-styles verwendest. Auch die Vergabe von IDs und Klassen, sowie deren Benennung scheint mir verbesserungsfähig.
Hättest Du Lust, Dir die Mühe zu machen und mir ein Gegenbeispiel aufzuschreiben? Dann könnte ich mir mehr darunter vorstellen.
Außenabstände erreicht man üblicherweise durch Margins (und nicht relative Positionierung).
Stimmt. Werde ich ändern.
Ich fasse deine Ausgangssituation nochmal zusammen:
[...]
Soweit richtig?
Soweit richtig!
Erste Frage, die sich aufdrängt ist: Was ist, wenn die Höhe der 3 "Boxen" höher ist, als die des umschließenden Containers?
Naja, das wird in meinem Fall kaum passieren, es sei denn jemand benutzt ein Fenster mit weniger als ca. 500 Pixeln Höhe. Und für den Fall könnte man noch ein "overflow:auto;" in der flexiblen (oder einer anderen) Box installieren.
Aber davon jetzt mal abgesehen ..., sind mir 2 Möglichkeiten bekannt, das mit CSS zu realisieren.
Möglichkeit 1:
Verwende die Display Table EigenschaftenFür was genau gibt es display:table? Bzw. was ist der Unterschied zu einer normalen Tabelle? Doch wohl nicht nur, dass man das Konstrukt dann formal nicht Tabelle(-nlayout) nennen muss... ;-)
Das das Problem mit nem Tabllen-"layout" leicht zu meistern wäre, ist mir schon klar.Möglichkeit 2:
Verwende das Flexbox Modul
Demo: http://flexiejs.com/playground/Interessant! Ist mir völlig neu. Warum finde ich dazu nichts auf Selfhtml?
Wenn, dann würde ich dir in diesem Fall zu Möglichkeit 1 raten.
Ok... Gibt's ne Begründung für diese Tendenz?
So oder so hast du aber sicher erstmal eine Menge "Lese-/ Lernstoff" vor dir, um die jeweiligen CSS Eigenschaften und ihre Wirkungsweise zu verstehen. Letzteres ist elementar ...!
Allerdings.
Herzlichen Dank nochmal! Damit werde ich sicher irgendwie weiter kommen. (Würde mich natürlich trotzdem freuen, wenn Du mir meine nachhakenden Fragen noch beantworten könntest! ;-) )Chris
-
Hallo Chris!
Mit JavaScript würde ich das schon irgendwie hinkriegen, frage mich nur, ob das auch ohne geht...
Es geht. Die Frage ist aber, ob es Sinn macht.Soll was genau heißen? Es ist fraglich, ob das Layout Sinn ergibt oder das Weglassen von JavaScript???
Ich halte es prinzipiell gerne so, dass (m)ein Layout rein durch CSS "ordentlich" dargestellt wird. Und dann, falls gewünscht, kann man noch irgendwelche Dinge per JS "tunen" oder ändern.
Hättest Du Lust, Dir die Mühe zu machen und mir ein Gegenbeispiel aufzuschreiben? Dann könnte ich mir mehr darunter vorstellen.
Ich habe mal ein Fiddle erstellt (hoffe klappt auch - ist mein Erstes) ;-)
Wenn, dann würde ich dir in diesem Fall zu Möglichkeit 1 raten.
Ok... Gibt's ne Begründung für diese Tendenz?
Wegen des besseren Browser-Supports im Moment noch.
Für was genau gibt es display:table? Bzw. was ist der Unterschied zu einer normalen Tabelle? Doch wohl nicht nur, dass man das Konstrukt dann formal nicht Tabelle(-nlayout) nennen muss... ;-)
Um Elemente tabellarisch darzustellen (vermutlich)! :-P
Und der Unterschied ist ein ganz gravierender. Hier befinden wir uns rein auf der Darstellungsseite (mit diplay:table), wohingegen die Verwendung von <table> & Co. im HTML Code ja eine semantische Bedeutung hat, nämlich dass es sich um tabellarische Daten handelt. So verwenden wir "inhaltsleere" Elemente, und können die bspw. je nach Ausgabemedium auch völlig unterschiedlich "stylen".Das das Problem mit nem Tabllen-"layout" leicht zu meistern wäre, ist mir schon klar.
Anders ist die Anforderung mit CSS gar nicht zu lösen ...(außer mit Flexbox noch)! ;-)
Also wenn dir das klar ist, warum hast du es dann nicht gleich so gemacht!?Gruß Gunther
-
Hallo Gunther!
Herzlichen Dank, soweit alles klar, Deine Erklärungen leuchten mir ein, v.a. auch die bezüglich des Unterschiedes zwischen Tabellen (mit tabellarischen Daten) und tabellenartiger Darstellung. :-)
Ich habe mal ein Fiddle erstellt (hoffe klappt auch - ist mein Erstes) ;-)
Ich bin mal so frei und poste Deinen Code hier auch noch - für die Nachwelt sozusagen:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Diplay Table Test</title> <style type="text/css"> #box_wrapper { display: table; width: 900px; height: 500px; margin: 0 auto; border: solid 1px #0000FF; table-layout: fixed; border-spacing: 20px; } .box_row { display: table-row; height: 1px; } .expand {height: 100%;} .box_cell { display: table-cell; padding: 10px; background-color: #CCC; border: 1px solid red; } </style> </head> <body> <div id="box_wrapper"> <div class="box_row"> <div class="box_cell"> Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit. </div> </div> <div class="box_row expand"> <div class="box_cell"> Lorem ipsum dolor sit amet, ... </div> </div> <div class="box_row"> <div class="box_cell"> Lorem ipsum dolor sit amet,<br>consectetur adipiscing elit. </div> </div> </div> </body> </html>Das das Problem mit nem Tabllen-"layout" leicht zu meistern wäre, ist mir schon klar.
Anders ist die Anforderung mit CSS gar nicht zu lösen ...(außer mit Flexbox noch)! ;-)
Also wenn dir das klar ist, warum hast du es dann nicht gleich so gemacht!?Nein, ich dachte eben an echte Tabellen nicht an "display:table"!
Ciao, Danke, ich hab zu lesen.... ;-)
Chris
-
AAALSO....
Habe viel gelesen und viel probiert und eine Lösung! :-)
- und dachte, ich schreibe das hier noch schnell auf.Habe zwei Probleme bei Deiner Lösung, Gunther, gefunden:
__Zuerst mal hab ich eine wahrscheinlich noch wichtigere Begründung gefunden, warum es "display:table;" gibt als diejenige, dass so die Formatierung aus dem Elementfluss herausgehalten wird.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Hier steht:
"[...] Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. "Also nach meinem Verständnis sollte es auch hier demnach um tabellarische Daten gehen, nur eben, dass XML mit den Daten umgehen kann.
__Zum anderen hatte ich bei deiner Lösung ein Problem mit den Abständen. Wie man in deinem Code sieht, hattest du das Problem auch schon: nämlich, dass "margin" nicht funktioniert und man stattdessen die Tabelleneigenschaften (in diesem Falle "border-spacing") nutzen muss (logisch eigentlich).
Nur gibt es für "border-spacing" keine Möglichkeit, die Abstände der vier Seiten separat anzugeben. Genau das möchte ich aber: Abstände zwischen den Boxen, aber nicht nach links (das Container-div hat hier in diesem thread zur Anschauung einen Rahmen, nicht jedoch in meinem Projekt... ;-) )Also habe ich mich doch um die Flexbox gekümmert. Und nach viel Lesen und Probieren die bzw. eine Lösung gefunden.
Geholfen haben mir neben dem schon erwähnten Flexbox-Spielzeug folgende Quellen:
__http://umaar.github.com/css-flexbox-demo/
__http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/
__https://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/Hier also meine Lösung. (übrigens auch mein erstes Fiddle. ;-) )
Sie funktioniert leider beim IE erst ab Version 10 (konnte es nicht testen, aber laut dieser Seite und laut dieser ist das so. Ältere IE stellen die Boxen einfach übereinander dar (ohne Stretch). Aber damit kann ich leben.
Ich poste den Code nochmal hier (bin mir nicht so sicher, ob ich darauf vertrauen kann, dass sich "Fiddles" genauso lange im Netz halten wie Beiträge in diesem Forum... ;-) ):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Diplay Table Test</title> <style type="text/css"> #box_wrapper { width: 900px; height: 500px; margin: 0 auto; border: solid 1px #0000FF; display: -webkit-box; display: -moz-box; display: box; display: -webkit-flexbox; -webkit-box-orient: vertical; -moz-box-orient: vertical; box-orient: vertical; -webkit-flex-direction: column; -webkit-box-align: start; -moz-box-align: start; box-align: start; -webkit-flex-align:start; } #box_wrapper li { border: 1px solid red; width: 300px; } #stretch_me { margin-top:20px; margin-bottom:20px; -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; -webkit-flex: 1; } </style> </head> <body> <ul id="box_wrapper"> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> <li id="stretch_me"> Lorem ipsum dolor sit amet, ... </li> <li> Lorem ipsum dolor sit amet, consectetur adipiscing elit. </li> </ul> </body> </html>Zur Erklärung: Es ist so, dass das Flexbox-Modul in den letzten drei Jahren einige Veränderungen durchgemacht hat und sich immer noch im "Working Draft"-Status befindet, d.h. es kann sich noch verändern.
Deshalb gibt es da jeweils vier (!) Versionen der Eigenschaften. Ausser der jeweils zweiten Variante mit "-moz-" ist mir nicht ganz klar, welche Variante von welcher Version von welchem Browser benötigt wird. Die jeweils letzte Zeile ist wohl die, die in Zukunft gelten soll.
So wie ich das verstehe, dürfte man auf die Weise die größtmögliche Anzahl Browser mit ins Boot holen.YAY :-)
...nebenbei habe ich gelernt, dass es sich lohnt, sich mehr mit CSS3 zu beschäftigen! Transitions - ganz spannendes Thema... ;-)
Gute Nacht!
chris-
Hi Chris!
AAALSO....
Habe viel gelesen und viel probiert und eine Lösung! :-)
- und dachte, ich schreibe das hier noch schnell auf.immer eine gute Idee ...
Habe zwei Probleme bei Deiner Lösung, Gunther, gefunden:
__Zuerst mal hab ich eine wahrscheinlich noch wichtigere Begründung gefunden, warum es "display:table;" gibt als diejenige, dass so die Formatierung aus dem Elementfluss herausgehalten wird.
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#display@title=Hier steht:
"[...] Gedacht sind sie aber eher für die tabellarische Darstellung von XML-Daten. Denn XML kennt kein Handling, um Daten als tabellarisch auszuzeichnen. "Also nach meinem Verständnis sollte es auch hier demnach um tabellarische Daten gehen, nur eben, dass XML mit den Daten umgehen kann.
Das ist_ein_Grund, aber mit Sicherheit nicht_der_Grund.
Ich bin mir zeimlich sicher, dass die Macher bei Floats bestimmt auch nicht daran gedacht haben, dass es jahrelang quasi als das Mittel für mehrspaltige Layouts verwendet wird ...!
Bis heute bietet CSS keine wirklich geeigneten Mittel, um "vernünftig" Layouts gestalten zu können, die dem Anspruch nach einer Source für "Alle" gerecht werden.IMHO haftet den Display Table Eigenschaften aber zu Unrecht ein eher negativer Ruf an. Das mag vielleicht daher rühren, dass sie aus einer Zeit stammen, wo es viel Überzeugungsarbeit zu leisten galt, Autoren davon zu überzeugen, keine (HTML)Tabellen für das Layout zu missbrauchen. Leider sind aber auch viele dabei übers Ziel hinausgeschossen, und haben die Verwendung von Layout Tables gleich mit verdammt.
Und aufgrund fehlender Implementierung in den damals relevanten IE Versionen haben sie auch keinen Einzug in die Layoutgestaltung gefunden, da man dann gleich bei den Float-Varianten bleiben konnte.
__Zum anderen hatte ich bei deiner Lösung ein Problem mit den Abständen. Wie man in deinem Code sieht, hattest du das Problem auch schon: nämlich, dass "margin" nicht funktioniert und man stattdessen die Tabelleneigenschaften (in diesem Falle "border-spacing") nutzen muss (logisch eigentlich).
Nur gibt es für "border-spacing" keine Möglichkeit, die Abstände der vier Seiten separat anzugeben. Genau das möchte ich aber: Abstände zwischen den Boxen, aber nicht nach links (das Container-div hat hier in diesem thread zur Anschauung einen Rahmen, nicht jedoch in meinem Projekt... ;-) )Nein, das ist kein Problem, sondern nur die Frage nach jeweils einem zusätzlichen Element innerhalb der als display:table-cell ausgezeichneten Elemente. Da ich mich in meinem Beispiel der Übersichtlichkeit halber auf das Wesentliche konzentriert habe, habe ich das weggelassen und stattdessen nur demonstriert, dass man Abstände_auch_per border-spacing erreichen kann, wenn auch mit der von dir genannten Einschränkung.
Und natürlich gibt es noch eine ganze Reihe weiterer Einschränkungen, bzw. "Nebenwirkungen" bei den Display Table Eigenschaften, aber andererseits bieten sie eben auch Möglichkeiten, die ansonsten per CSS alleine nicht realisierbar sind. Und die Häufigkeit der Fragen nach genau solchen Fällen hier im Forum zeigt doch deutlich, wie groß hier der "Bedarf" zu sein scheint.
Solange es keine "passenderen" Alternativen gibt, sehe ich die Display Table Eigenschaften als brauchbare "Krücke" für bestimmte Verwendungszwecke an.
Also habe ich mich doch um die Flexbox gekümmert. Und nach viel Lesen und Probieren die bzw. eine Lösung gefunden.
Ja, Flexbox ist quasi display:table ohne die Einschränkungen/ Nebenwirkungen (z.B. Stichwort 'source order') davon ...! ;-)
Allerdings weiß ja keiner, wie lange es dauern wird, falls es überhaupt jemals dazu kommt, bis man das wirklich in der Praxis verwenden kann. Und ich könnte schon fast darauf wetten, dass MS es bestimmt schafft, uns mit dem IE 10 wieder neue Steine in den Weg zu legen.Es freut mich jedenfalls, dass dein Interesse geweckt ist, und du dich intensiv mit der Materie beschäftigst, denn genau das ist ja das angestrebte Ziel ... :-)
Weiterhin viel Spaß & Erfolg!
Gruß Gunther
-
-
-
-
-