Fußnotentext: Linie über Text soll genauso lang sein wie jeweiliger Text

[color-it]

Hallo,

ich bastle gerade an einem Fußnotentext. Dabei soll über dem Fußnotentext eine Linie erscheinen, die - variabel - immer genauso lang sein soll, wie der jeweilige Fußnotentext.

Diese Variabilität bekomme ich leider nicht hin.
Derzeit sieht es so aus:

#fuss { color: #898989; font-size: 9px; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; width: 200px; margin-top: 30px; margin-bottom: 10px; padding-top: 0px; border-top: 1px solid #898989; }

"width" hatte ich auch schon auf "auto", aber da macht es die Linie immer über die komplette Breite des Layouts.

Jemand einen Idee?
Danke.

[schollsen]

Meun,
ich nehme mal an, deine Fußnote ist ein div oder in p.
Dieses sind Blockelemente, d.h. in diesem Fall, dass sie soviel Platz einnehmen, wie Ihnen zur Verfügung steht.
Um lediglich die Breite des Inhaltes einzunehmen, stehen Dir in diesem Fall 2 Möglichkeiten zur Verfügung.

1. Element wird per float aus dem Textfluss genommen
   

   #fuss {
       float: left;
       color: #898989; 
       font-size: 9px; 
       font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;        
       margin-top: 30px; 
       margin-bottom: 10px; 
       padding-top: 0px; 
       border-top: 1px solid #898989; 
   }

2. Die Anzeigeart wird mit display: inline-block verändert
   

   #fuss {
       display: inline-block;
       color: #898989; 
       font-size: 9px; 
       font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif;        
       margin-top: 30px; 
       margin-bottom: 10px; 
       padding-top: 0px; 
       border-top: 1px solid #898989; 
   }

[color-it]

Vielen Dank für die ausführliche Beschreibung.

"float left" hatte bei mir keinerlei Wirkung - die Linie ging trotzdem über die gesamte Breite (die Fußnote ist ein DIV).

Aber "display: inline-block;" hat perfekt funktioniert.
Vielen Dank.

.....

Weil ich gerade deine Fußnote in deiner Signatur hier sehe, wie müsste man dann den Code schreiben, dass die Linie eine bestimmte Breite hat, sagen wir 200 px, der Text aber länger laufen kann, wie er eben ist?

[schollsen]

Naja, auf keinen Fall so wie hier …

<!-- sig -->
<div>
    __________________<br />
    <!-- google_ad_section_start(weight=ignore) --><font size="1">Es gibt nicht viele Bands, die mich als Mutter einer vierjährigen Tochter beeinflußt haben. Höchstens Fischmob.</font><!-- google_ad_section_end -->
</div>
<!-- / sig -->

Ich würde dazu auf ein 200px breites und 1px hohes Hintergrundbild zurückgreifen, das die Border simuliert.

#fussnote {
    background: url(fakeborder.gif) no-repeat;
}

[Rinaldo]

text-decoration: overline

Wär das nichts?

[schollsen]

ähm … Nö.

[Rinaldo]

Auf die eigentliche Frage in #1 sollte es ja passen - den Rest hab ich ja nur überflogen...

Ich hab overline auch noch nie verwendet, nur noch im Hinterkopf, dass es das gibt...

[schollsen]

Nee, dann wäre ja wieder der gesamte Text „überliniert“.
Ausserdem, wenn man mal einen Umbruch bräuchte, wäre die zweite Zeile auch so dekoriert.
Man könnte zwar … span … :first-line … Och nee

Komma aber:
Mir fällt da dann doch noch eine semantisch sinnvolle Variante ohne Bild ein:
Man trennt die Fußnote mit einer hr logisch vom Inhalt
und regelt die visuelle Trennung auch gleich darüber.

<div id="fussnote">
    <hr />
    <p>
        <sup>1</sup> Der intermediale Diskurs der nonverbalen Sensualerotik impliziert im kontextuellen Einklang 
        mit der substitionellen Darstellung ein einvernehmliches Gedönsheimertum
    </p>
</div>

#fussnote {
    margin: 30px 0 10px;
    color: #898989; 
    font: 9px helvetica, arial, sans-serif;
}

#fussnote hr {
    width: 200px;
    height: 1px;
    margin-bottom: 5px;
    border: 0;
    background: #000;
    color: #000;
    display: inline-block;
}

#fussnote p {
    margin: 0 0 5px;
    clear: left;
}

Kann man hier auch ma eben ankucken.