<hr> vor jedem <h3> per CSS, wie?

[Joerg]

Hi,

Fraaage ... ich moechte gerne, dass per css in einer HTML-Seite vor jedem <h3> eine <hr> eingefuegt wird. Also eine horizontale Linie, eben als optische Abtrennung.

Ich haette gedacht, dass das mit "h3:before { content:<hr> }" geht.

Geht aber leider nicht ... oder uebersehe ich da etwas?

{ Anmerkung: Nein, ein "h3 { border-top: solid }" kann ich leider nicht verwenden, da die <h3> in meinem speziellen Fall eben nicht ueber die ganze Breite der Seite gehen. Ich moechte aber diese "Trennlinie" eben ueber die volle Breite sehen ;-) }

Gruss & Merci,

• Joerg

[MudGuard]

Hi,

Fraaage ... ich moechte gerne, dass per css in einer HTML-Seite vor jedem <h3> eine <hr> eingefuegt wird. Also eine horizontale Linie, eben als optische Abtrennung.
Ich haette gedacht, dass das mit "h3:before { content:<hr> }" geht.

Du willst ein Element per CSS einfügen. Das geht nicht.

HTML / Elemente sind Struktur
CSS / Eigenschaften sind Darstellung.

{ Anmerkung: Nein, ein "h3 { border-top: solid }" kann ich leider nicht verwenden, da die <h3> in meinem speziellen Fall eben nicht ueber die ganze Breite der Seite gehen. Ich moechte aber diese "Trennlinie" eben ueber die volle Breite sehen ;-) }

Dann füge ein hr-Element vor den h3 ins HTML ein.

Oder setze ein border-bottom fürs Element vor dem h3.

cu,
Andreas

[MakkuZ]

hi!

sag mal wieso nimmst du nicht einfach einen vernünftigen editor und ersetzt alle <h3> tags durch <hr> und <h3>? also für mich erscheint das die einfachste lösung zu sein! ein guter editor kann diesen austausch datei- und manche auch ordner-übergreifend machen!

greetz
MakkuZ

[Joerg]

Hi,

Du willst ein Element per CSS einfügen. Das geht nicht.

Oops. Ich sagte doch, dass ich dieses Gefuehl hatte, etwas uebersehen zu haben ;-)

Dann füge ein hr-Element vor den h3 ins HTML ein.

Darauf wird's wohl hinauslaufen.

Oder setze ein border-bottom fürs Element vor dem h3.

Geht auch nicht, das sind ganz normale <p>, und davon hat es auch mehrere zwischen den <h3>. Und ich will keine extra class definieren, weil ich sonst im Text wieder aufpassen muss, jedesmal genau dem einen Abschnitt vor <h3> die richtige class zuzuteilen ... darum wollte ich's ja so gerne automagisch eingefuegt haben.

Merci,

• Joerg

[Hans-Peter]

hallo Joerg,

Geht aber leider nicht ... oder uebersehe ich da etwas?

nein, du übersiehst da nichts. per css kannst du keine html-tags einfügen.

was du allerdings machen kannst, ist per css die html-tags formatieren.

{ Anmerkung: Nein, ein "h3 { border-top: solid }" kann ich leider nicht verwenden, da die <h3> in meinem speziellen Fall eben nicht ueber die ganze Breite der Seite gehen. Ich moechte aber diese "Trennlinie" eben ueber die volle Breite sehen ;-) }

dann mach für diesen speziellen fall eben ein extra h3 auf und vergib dort einen anderen wert für hr, z.b. in der hintergrundfarbe

HP

[SP]

{ Anmerkung: Nein, ein "h3 { border-top: solid }" kann ich leider nicht verwenden, da die <h3> in meinem speziellen Fall eben nicht ueber die ganze Breite der Seite gehen. Ich moechte aber diese "Trennlinie" eben ueber die volle Breite sehen ;-) }

Bei mir geht ein "<h3 style="border-top:1px solid red;">test</h3>" in IE, Mozilla und Opera über die ganze Seite.

Gruß, Stefan

[Joerg]

Hi

Bei mir geht ein "<h3 style="border-top:1px solid red;">test</h3>" in IE, Mozilla und Opera über die ganze Seite.

In meinem speziellen Fall _wird_ das nicht mehr der Fall sein. Ich hab in den derzeit-in-Entwicklung-befindlichen Stylesheet h1 und h2 "ganz normal", aber die <h3> werden dann links neben dem Text stehen, und der Rest (p, ol, ul, ...) auf der rechten Seite der Seite. Stichwort: "Information mapping style".

Beispiel unter  http://homepage.sunrise.ch/mysunrise/joerg.hau/linux/index.htm, nur ist jene Seite eben derzeit noch mit einer Tabelle aufgebaut. Der dunkelgraue Text im hellgrauen Feld soll spaeter mal <h3> werden.

Gruss & Merci,

• Joerg

[SP]

Hi,

in dem Fall würde ich um die kompletten Blöcke ein <div> setzen und dem einen Rahmen verpassen.

Gruß, Stefan

[Marc]

Moin moin

Beispiel unter  http://homepage.sunrise.ch/mysunrise/joerg.hau/linux/index.htm, nur ist jene Seite eben derzeit noch mit einer Tabelle aufgebaut. Der dunkelgraue Text im hellgrauen Feld soll spaeter mal <h3> werden.

Das sind doch ganz simple boxen nach der Art:

h3 {
  background-color:#ddd;
  border:1px solid #555;
  border-right:none;
  color:#555;
}

Oder so etwas in der Art.

Gruß,
Marc.

[Joerg]

Moin-moin auch,

Beispiel unter  http://homepage.sunrise.ch/mysunrise/joerg.hau/linux/index.htm, nur ist jene Seite eben derzeit noch mit einer Tabelle aufgebaut. Der dunkelgraue Text im hellgrauen Feld soll spaeter mal <h3> werden.

Das sind doch ganz simple boxen nach der Art:

h3 {
  background-color:#ddd;
  border:1px solid #555;
  border-right:none;
  color:#555;
}

... nee, ganz *soooo* simpel ist das nicht ;-) Ist Dir aufgefallen, dass die Boxen nicht nur so hoch sind wie der Text in der <h3>-Box, sondern dass die so lang laufen, bis ein neues <h3> oder <h2> erreicht wird?

Wie ich das allerdings ohne Tabelle in CSS realisiere, ist mir noch nicht klar. Any ideas?

Gruss aus Lausanne,

• Joerg

[wahsaga]

hi,

... nee, ganz *soooo* simpel ist das nicht ;-) Ist Dir aufgefallen, dass die Boxen nicht nur so hoch sind wie der Text in der <h3>-Box, sondern dass die so lang laufen, bis ein neues <h3> oder <h2> erreicht wird?

ich würde es eher so formulieren, dass die "boxen" so hoch werden sollen, wie es auch der daneben stehende inhalt ist.

Wie ich das allerdings ohne Tabelle in CSS realisiere, ist mir noch nicht klar. Any ideas?

du bist hier an das altbekannte "problem" von CSS gestossen, dass es nicht möglich ist, das zwei voneinander unabhängige elemente ihre größe gegenseitig beeinflussen.

hier muss auf jeden fall "getrickst" werden, wenn du den selben effekt mit CSS erreichen willst.

es wäre z.b. denkbar, überschrift und inhalt in einen umfassenden div zu stecken.
dieser bekommt dann ein links unten ausgerichtetes hintergrundbild verpasst, dass die untere und die linke linie dieses "rahmens" sowie die hintergrundfarbe für die "überschrift" stellt, und nur der obere rahmen wird dann über border an der überschrift selbst realisiert. (bild muss dafür natürlich "ausreichend" groß dimensioniert sein.)

gruß,
wahsaga

[Joerg]

Re-Hi,

hier muss auf jeden fall "getrickst" werden, wenn du den selben effekt mit CSS erreichen willst.

es wäre z.b. denkbar, überschrift und inhalt in einen umfassenden div zu stecken.

Yep, in diesem Fall komme ich nicht mehr drum herum.

dieser bekommt dann ein links unten ausgerichtetes hintergrundbild verpasst, dass die untere und die linke linie dieses "rahmens" sowie die hintergrundfarbe für die "überschrift" stellt, und nur der obere rahmen wird dann über border an der überschrift selbst realisiert. (bild muss dafür natürlich "ausreichend" groß dimensioniert sein.)

... hmm, hast Du mal ein Beispiel dazu? Ich bin mir nicht ganz sicher, ob ich das jetzt so gaaanz verstanden habe ;-)

[wahsaga]

hi,

dieser bekommt dann ein links unten ausgerichtetes hintergrundbild verpasst, dass die untere und die linke linie dieses "rahmens" sowie die hintergrundfarbe für die "überschrift" stellt, und nur der obere rahmen wird dann über border an der überschrift selbst realisiert. (bild muss dafür natürlich "ausreichend" groß dimensioniert sein.)

... hmm, hast Du mal ein Beispiel dazu?

beispiel steht doch da oben :-)

Ich bin mir nicht ganz sicher, ob ich das jetzt so gaaanz verstanden habe ;-)

dann probierst du's erst mal aus, und wenn's nicht hinhaut, schauen wir noch mal ...

gruß,
wahsaga

[Joerg]

Hi

dieser bekommt dann ein links unten ausgerichtetes hintergrundbild verpasst, dass die untere und die linke linie dieses "rahmens" sowie die hintergrundfarbe für die "überschrift" stellt, und nur der obere rahmen wird dann über border an der überschrift selbst realisiert. (bild muss dafür natürlich "ausreichend" groß dimensioniert sein.)

... hmm, hast Du mal ein Beispiel dazu?

beispiel steht doch da oben :-)

Wenn ich das aber woertlich umsetze, dann muessten letztlich alle Rahmen dieselbe Hoehe haben (sonst hab ich "dank" des Hintergrundbildes ja n-mal den unteren Rahmen drin). Das macht keinen Sinn. Ich will ja gerade von dem tabellen-kontrollierten Layout mit "fixen" Dimensionen weg, siehe des Rest dieses Threads ;-)

Gruss,

• Joerg

[Joerg]

Hi

...hmmm, ich antworte mir mal selbst: http://www.alistapart.com/articles/fauxcolumns/ ;-)

Gruss,

• Joerg

[Elya]

Hallo Joerg,

{ Anmerkung: Nein, ein "h3 { border-top: solid }" kann ich leider nicht verwenden, da die <h3> in meinem speziellen Fall eben nicht ueber die ganze Breite der Seite gehen. Ich moechte aber diese "Trennlinie" eben ueber die volle Breite sehen ;-) }

Du könntest es mit einer Hintergrundgrafik für h3 versuchen, die genau die Linie in der richtigen Länge enthält. Kombiniert mit ein paar Angaben zu margin und padding könnte das klappen.

Natürlich nur, wenn es kein liquides Layout ist und "volle Breite" fest definiert ist.

Oder?

Gruß aus Köln-Ehrenfeld,

Elya