CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

[rakader]

Wie im Titel formuliert soll Fußnotentext von unten nach oben in die Höhe wachsen. Beim wachsen soll eine darüber liegende Linie (Fußnotenlinie) mitverschoben werden. Weiß jemand wie das mit CSS geht?

Gegeben sind mehrere DIVs in einem Container. Die Höhe ist festgelegt. Tante Google findet keine Beispiele oder ich suche mit den falschen Begriffen.

Vielen herzlichen Dank vorab.

 

[aliasltb]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Ich würde innerhalb der Container jeweils ein weiteres Div erzeugen, welches du absolut positionierst und bottom auf Null setzt. Dann nur noch eventuell Abstände mit margin regeln, damit es schöner aussieht und die Breite dem übergeordneten Container anpassen.

Diesem Div kannst du dann ja einfach per border-top die gewünschte Linie verpassen, die sich mit nach oben verschieben soll.

So etwas -ähnliches- hatte ich vor kurzem auch mal und das hat super funktioniert.

 

[Myhar]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Falls ich dich richtig verstanden habe suchst du so etwas wie einen fixed footer?

L. G.

 

[Horst-Karsten]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Meinst Du daß beim Klick auf einen oben liegenden Text, sich dessen Fußnotentext, der sich im Footer o.ä. befindet, von unten nach oben aufzieht?

 

[rakader]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Herzlichen Dank Ihr Drei. Es geht alles in die Richtung. Wie gmbb beschrieben hat, aber ohne Klick. Am besten Text, der von unten nach oben wächst.

Mit absolut und bottom null habe ich es schon versucht. Problem ist derzeit, dass die oben liegende Box den unten liegenden Text verdrängt. Aber ich ich denke das ist zu lösen, indem ich die Verschachtelung herausnehme.

Von fixed footer habe ich noch nichts gehört. Es ist zwar kein Footer, aber vielleicht ein Ansatz, deswegen poste ich hier mal die (hoffentlich) relevanten Bestandteile (Auszüge):

<div id="wrap">
<div id="content" class="clear">
<div class="col1_6">
<div><img class="pic_main" src="assets/gfx/pic6.png" alt="Auge" /></div>
</div>

<div class="col2">
<h2>Column 2</h2>
<p>Lorem<sup class="text" >12</sup> ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna. ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel</p>

[COLOR="red"]<div class="col2_klein">
<hr />
<p><sup class="small">1 </sup>Dies ist ein Test mit kleiner Schrift. Dies ist ein Test mit kleiner Schrift. </p>
[/COLOR]
<div id="gfx_ru"></div>
</div>
</div>
</div>

zu dem dieses CSS gehört (Farben in separatem CSS, Font & Links rausgenommen):

/* ============================== General ============================== */
/* ----- Reset and Fixes ----- */
* { margin:0; padding:0; } /* Wrap Browser Preferences */
.clear:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clear { display:inline-block; }
* html .clear { height:1%; } /* Hides From IE-Mac */
sup, sub
{ height:0; line-height: 1; vertical-align: baseline; _vertical-align: bottom; position:relative; } /* Overrides default browser style */

/* ----- Lines ----- */
hr { display: block; margin: 16px 0 8px 16px; }

/* ============================== Layout ============================== */
body { background:transparent url(../gfx/bg-dunkel.png) repeat 0 0; margin-top: 125px; }
body#content {}

/* ----- Centered Position ----- */
#wrap { position:relative; width:920px; margin:auto; }

/* ----- Boxes ----- */
#content { display:block; width:920px; }
#content .col1_6 { float:left; width: 428px; padding:16px; height: 500px; }

/* ----- Site Logo ----- */
#content img.pic_main { display: block; margin:10em auto; margin-top: 180px;}	

/* ----- Text ----- */
#content .col2 { float:left; width:428px; padding:16px; height: 500px; }
#content .col2 sup.text { font-size: 11px; }
	
/* ----- Corner ----- */
#content #gfx_ru { position:absolute; width:58px; height:20px; background:transparent url(../gfx/corner.png) no-repeat right top; right:0; bottom:10px; overflow-y: hidden; }

[COLOR="Red"]	/* ----- Footnote ----- */
#content .col2_klein { margin: 24px 0 0 0; }
#content .col2_klein p { font: normal 9px/14px Verdana, Arial, Helvetica, Tahoma, justify;}
#content .col2_klein sup.small { font-size: 9px; }[/COLOR]

 

[aliasltb]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Naja die absolute Positionierung bezieht sich ja nur auf das innere Div, die äußeren, deine Container, müssten relativ positioniert und mit z-index ausgerichet werden.

Aber wenn die Container doch eh eine feste Höhe haben, wieso kollidiert das dann mit anderem Text?

 

[Horst-Karsten]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Durch was soll denn das aufziehen des Fussnotentextes ausgelöst werden?

 

[rakader]

Durch was soll denn das aufziehen des Fussnotentextes ausgelöst werden?

Nicht aufziehen. Einfach Texteingabe.
Das statische Layout wird in MODx eingebaut, aus den einzelnen DIVs werden Module gebastelt die als Eingabefelder im Backend erscheinen.

Naja die absolute Positionierung bezieht sich ja nur auf das innere Div, die äußeren, deine Container, müssten relativ positioniert und mit z-index ausgerichet werden.

Aber wenn die Container doch eh eine feste Höhe haben, wieso kollidiert das dann mit anderem Text?

Gute Frage. Bin nur Feierlauneprogrammierer. Also: Beide Textboxen sind in einem DIV mit fester Höhe height.
Optimal wäre es wenn der obere Text (Haupttext) einfach runterläuft, ohne die Box darunter (Fußnoten) zu verdrängen. Schlimmstenfalls überlappen sie sich oder werden unsichtbar. Gleiches gilt für die Fußnoten.

Textmenge bestimmt der Redakteur und bekommt das später in der Vorschau zur Ansicht.
Ein besseres Vorgehen ist mir nicht eingefallen, um Fußnoten auf die Grundlinie zu zwingen (sagt man das so?).

Du erwähnst z-index. Das ist ein Selektor, der mir vollkommen schleierhaft ist.
Mit relativ und absolut habe ich schon experimentiert. Siehe mein Posting mit dem CSS.

Grundfrage bleibt: Kann ich Text von unten nach oben zeilenweise wachsen lassen - oder muss ich mich von dieser Idee verabschieden?

 

[Horst-Karsten]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Optimal wäre es wenn der obere Text (Haupttext) einfach runterläuft, ohne die Box darunter (Fußnoten) zu verdrängen. Schlimmstenfalls überlappen sie sich oder werden unsichtbar. Gleiches gilt für die Fußnoten.

Genau dieses Verhalten regelt der z-index. Ist wie mit den Layern bei Grafikprogrammen. Du kannst also der oberen Box sagen das sie sich über die untere erweitern soll ohne die untere zu verdrängen. ABER: Die Lesbarkeit beider Boxen läßt nach

Mit dem "zeilenweise wachsen" steh ich leider immer noch auf den Schlauch. In meinem Verständnis sind Fußnoten kleine Erweiterungen oder Erklärungen bezugnehmend auf markierte Stellen im Haupttext und haben zudem eine feste Größe. Deine Erläuterung hört sich für mich so an als ob die Fußnoten immer länger werden??!!??

 

[rakader]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Moin gmbb. Dank Dir für die Mühen. Habe damit die Funktion z-index verstanden.

Und auch meine Erläuterung hast Du richtig verstanden: Es *kann* sein, dass die Fußnoten länger werden. Also mal mehr als 3 Zeilen. Und dann sollen die Zeilen Richtung "top" wandern. Ist nur eine Vorsichtsmaßnahme. Auf der Seite bin ich gehalten ab und an wissenschaftlich zu belegen.
Also so (bin kein Zeichner):


1. Zeile FN
↑↑↑…… 2. schiebt 1. nach oben
2. Zeile FN

Wenn es nicht möglich ist, kann ich mir auch durch Verlinkung auf die Folgeseite (blättern) behelfen.

Noch eine Idee, die mir beim Googeln gekommen ist: Könnte man das auch (die Fußnoten) mit einer schwebenden Box lösen? Wenn ja wie? Nutze CSS nur sporadisch, daher kräftig aus der Übung.

 

[Horst-Karsten]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Ich sage mal so: Obwohl mir nicht klar ist warum sich Fußnotentext Zeile für Zeile aufbaut, gibt es eine Möglichkeit den Text am Boden des DIV-Containers zu plazieren.
Ich habe dies noch nicht genutzt, aber rein vom logischen her, sollte neu hinzu kommender Text immer unter dem schon plazierten erscheinen...will sagen: Neuer Text schiebt alten hoch.

<div style="height:200px;width:300px;position:relative;border:1px solid black">
 <spanp style="position:absolute; bottom:0px;">Fußnotentext</span>
</div>

...ist grob in Stein gehauen und daher ungetestet.

 

[rakader]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Danke - aber das ist es leider nicht: Die Box wächst nach unten. Nicht nach oben.

 

[rakader]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Moin gmbb und alle Helfer, es hat geklappt. Hatte irgendeinen Fehler gemacht. position absolute war richtig:

	#content .col2_klein { position:absolute; bottom:32px; }
	#content .col2_klein p { font: normal 9px/14px Verdana, Arial, Helvetica, Tahoma, justify;}

Herzlichen Dank für Eure Mühe und Geduld,
Radulph

 

[aliasltb]

AW: CSS kniffelig: Fußnotentext soll von unten nach oben wachsen

Hättest du von Anfang an auf mich gehört, hättest du das Problem schneller gelöst.