nicht angemeldet
Unterstreichen über die Textlänge hinaus
0 0 0 0 0 0 0 
Der Martin
0
0
Unterstreichen über die Textlänge hinaus
Ich habe folgende "Herausforderung":
Meine h2-Überschriften sind mit einem Abstand nach Links von 20px vom Fensterrand abgesetzt (margin-left: 20px).
Ich möchte, dass diese Überschriften unterstrichen sind, und zwar mit einem dickerem Strich (3 px) - so als würde die Schrift auf diesem Balken liegen. Der zusätzliche Clou: dieser Strich soll bereits am Seitenrand anfangen, also "margin-left: 0px". Die Überschriften beginnen dann also 20 Pixel versetzt.
Damit kommt die übliche Dekloration "underline" nicht in Frage. Ich tippe auf eine Kombination aus diversen "border"-Eigenschaften, kriege es aber nicht hin.
Wer kann mir helfen?
-
Hi,
Damit kommt die übliche Dekloration "underline" nicht in Frage. Ich tippe auf eine Kombination aus diversen "border"-Eigenschaften,
sooo divers sind die border-Eigenschaften gar nicht, die Du hier brauchst.
kriege es aber nicht hin.
Was hast Du versucht, woran ist es gescheitert?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Was hast Du versucht, woran ist es gescheitert?
Ich hab' meinen Zwischenstand grad' nicht parat, die Präsenz ist noch nicht online und ich sitze nicht an meinem heimischen Rechner.
Aber ich hatte zunächst versucht, der Überschrift einen Rahmen unterhalb zuzuweisen:
border-bottom-width: 3px; border-bottom-style: ... etc.
Dann war mein Ziel, die Verschiebung nach links per Positionierung zu erreichen, entweder mit 'position:absolute' oder mit negativen Werten, also -40px (entspricht dem Abstand zwischen Überschrift Rand). Alle meine Positionierungs-Versuche wirkten sich entweder nur auf die Überschrift aus, nicht auf den unteren Rahmen alleine.
-
Hi!
Um die Überschrift 20px vom linken Rand wegzuhalten kannst du doch auch padding nehmen. Der untere Rand würde dann auch so sein, wie du es willst.
szia, Lukas-
Um die Überschrift 20px vom linken Rand wegzuhalten kannst du doch auch padding nehmen. Der untere Rand würde dann auch so sein, wie du es willst.
Du meinst 'padding' statt 'margin-left' für die Überschrift, und 'border' dann ganz regulär ohne irgendwelche Positionierungen?
-
Hi!
Du meinst 'padding' statt 'margin-left' für die Überschrift, und 'border' dann ganz regulär ohne irgendwelche Positionierungen?
Genau! Das müsste funktionieren. Margin-left legt ja den Außenabstand fest. Und padding-left legt den Innenabstand fest. Und genau diesen brauchst du hier.
szia, Lukas-
Recht habt ihr, der Abstand nach rechts funktioniert.
H2 {
[...gekürzt...]
margin-bottom: 18px;
border-bottom: solid #660000 3px;
padding-left: 40px;
padding-bottom: 3px;
}Die Überschrift ist 40 px eingerückt, der Balken beginnt bei 0.
Aber: mein Ziel war ja, den Text zu unterstreichen - nicht die volle Zeile. Mit dieser Konstellation ragt der Balken bis an den rechten Fensterrand. Meine ursprüngliche Frage war ja daher auch, wie man den Balken dazu bekommt, dass er mit dem letzten Buchstaben bündig abschließt.
-
Hallo,
Recht habt ihr, der Abstand nach rechts funktioniert.
gut, erste Teilaufgabe erledigt. ;-)
Aber: mein Ziel war ja, den Text zu unterstreichen - nicht die volle Zeile. Mit dieser Konstellation ragt der Balken bis an den rechten Fensterrand. Meine ursprüngliche Frage war ja daher auch, wie man den Balken dazu bekommt, dass er mit dem letzten Buchstaben bündig abschließt.
Wie wär's mit display:inline für die Überschrift? Okay, dann brauchst du danach ein Element, das einen Umbruch erzeugt. Aber das folgende Element ist sehr wahrscheinlich sowieso ein Absatz (<p>), dann ergibt sich das von selbst. Bloß mit den vertikalen Abständen musst du dann nochmal ein wenig spielen, denn padding-top und padding-bottom werden für inline-Elemente AFAIR nicht berücksichtigt.
IE und Opera finden die Lösung jedenfalls gut. ;-)
So long,
Martin--
Ich liebe Politiker auf Wahlplakaten.
Sie sind tragbar, geräuschlos, und leicht wieder zu entfernen.
(Loriot, deutscher Satiriker)-
Wie wär's mit display:inline für die Überschrift? Okay, dann brauchst du danach ein Element, das einen Umbruch erzeugt. Aber das folgende Element ist sehr wahrscheinlich sowieso ein Absatz (<p>), dann ergibt sich das von selbst. Bloß mit den vertikalen Abständen musst du dann nochmal ein wenig spielen, denn padding-top und padding-bottom werden für inline-Elemente AFAIR nicht berücksichtigt.
Hab' ich noch nie gemacht - wie sähe das aus?
Auf der Website folgt der <h2>-Überschrift nicht zwangsläufig ein <p>-Tag, sondern durchaus auch mal eine Tabelle. Möglichweise gibt es auch Komplikationen, wenn sich auf gleicher Höhe eine rechts ausgerichtete Abbildung befindet ...Es muss doch irgendeinen einfachen, eleganten Weg geben, den Balken an die Länge des Textes anzupassen - war mein Einfall den tatsächlich derart abwegig??
-
Hallo,
Hab' ich noch nie gemacht - wie sähe das aus?
äh, was jetzt genau?
Auf der Website folgt der <h2>-Überschrift nicht zwangsläufig ein <p>-Tag, sondern durchaus auch mal eine Tabelle. Möglichweise gibt es auch Komplikationen, wenn sich auf gleicher Höhe eine rechts ausgerichtete Abbildung befindet ...
Bei einer Tabelle ist es kein Problem, die ist ja selbst auch wieder ein Blockelement. Wenn du ganz sichergehen willst, notiere ausnahmsweise ein <br> hinter der so umformatierten Überschrift.
Es muss doch irgendeinen einfachen, eleganten Weg geben, den Balken an die Länge des Textes anzupassen - war mein Einfall den tatsächlich derart abwegig??
Ungewöhnlich zumindest.
Und abgesehen davon: So kompliziert ist die Lösung doch nicht. Überschrift als inline-Element formatieren, ein wenig padding-left, ein border-bottom. Das war's doch eigentlich schon. Und wie gesagt, um jegliches Theater auszuschließen, noch ein <br> nach der Überschrift. Nicht einfach?Ciao,
Martin--
Computer lösen für uns Probleme, die wir ohne sie gar nicht hätten.
-
-
-
-
-
Hallo,
So sieht's aus. Mit margin bestimmst Du den ANfangspunkt des Elementes. Dort wird auch der Border beginnen. Mit padding-left kannst Du dann den Inhalt des Elementes (also den Text) nach links verschieben.
Kannst Du auch hier mal gucken, wie die h2 formattiert ist.mfG
^da Powl
-
-
-
-
-
Hi!
Wie ist es wenn du mit <hr> arbeitest? Nicht sehr schön, aber auch eine Möglichkeit.Damit kommt die übliche Dekloration "underline" nicht in Frage. Ich tippe auf eine Kombination aus diversen "border"-Eigenschaften, kriege es aber nicht hin.
Dann poste den Code, damit man dir helfen kann.
Wer kann mir helfen?
Ich ;-)
szia, Lukas-
Wie ist es wenn du mit <hr> arbeitest? Nicht sehr schön, aber auch eine Möglichkeit.
Vielleicht hätte ich anmerken sollen: der Balken beginnt immer am linken Fensterrand, soll jeweils aber nur so lang wie die Überschrift sein, d.h. rechtsseitig bündig mit dem letzten Buchstaben abschließen. Soweit ich weiß, habe ich mit <hr> keine Möglichkeit, die Länge an die unterschiedliche Länge der Überschriften anzupassen.
-
Hi!
Du könntest im style-Bereich für jeden Balken eine bestimmte Länge angeben.
Aber das mit <hr> ist auch nicht die beste Lösung. Border würde dir, denke ich, bessere Dienste leisten.
szia, Lukas
-
-