eigene Trennlinie in CSS

[mare1981]

hallo,

bin gerade dabei meine eigenen Trennlinien für meine Webseite zu bauen.

gibt es eine Möglichkeit in CSS eine Trennlinie einzufügen die so ausschaut wie angehängt?

Ich will nicht die üblichen Borderstyles verwenden.

Danke schon mal an dieser Stelle.

 

[DrEddison]

AW: eigene Trennlinie in CSS

Du kannst dem <hr /> jedes mögliche Aussehen per CSS zuweisen, da es ein Blockelement ist.

In Deinem Fall lautet das CSS so:

hr{
border:0;
background: transparent url(link/zum/bild.png) no-repeat center;
height: 57px; /* weil bild so hoch ist */
}

 

[simonpicos]

AW: eigene Trennlinie in CSS

Dieser Artikel sollte dich dem Ziel schon wesentlich näher bringen. Ich hab neulich mal was gefunden, das sah im Prinzip exakt so aus, wie du es hattest, vielleicht find ichs ja noch.
Wenn nicht: Einfach mal google bemühen

 

[DrEddison]

AW: eigene Trennlinie in CSS

Mir fiel auch gerade noch was ein: Das Smashing-Magazine hatte mal einen <hr />-Contest gemacht. Das Ergebnis war sehenswert

 

[Zampano_]

AW: eigene Trennlinie in CSS

@simonpicos, du hast ja echt immer schöne CSS-Spielereien am Start, aber du willst doch für eine einfache Trennlinie nicht mit Rahmengetrikserei anfangen?!?
Ich würd auch einfach ein HR nehmen. Wenn man den semantischen "Wert" von HR in html5 nicht haben möchte würd ich's mit nem einfachen div (hg-farbe/bild und gewünschter Höhe) versuchen...

Oder verstehe ich das was falsch mit der "angehängten Trennlienie" (wo isn die?)

@DrEddison: Cooler Conteste =)

 

[mare1981]

AW: eigene Trennlinie in CSS

das ging ja echt schnell und wirklich gute Anleitungen dabei.
Ihr seid echt super danke.

Hab jetzt echt gut Lesestoff.

 

[mare1981]

AW: eigene Trennlinie in CSS

@Zapano,

ich bin auch kein Freund von </hr> aber sparsam eingesetzt, können die auch ganz nett sein.

 

[simonpicos]

AW: eigene Trennlinie in CSS

@simonpicos, du hast ja echt immer schöne CSS-Spielereien am Start, aber du willst doch für eine einfache Trennlinie nicht mit Rahmengetrikserei anfangen?!?

Wieso Rahmentrickserei? Der te möchte nciht die "üblichen borderstyles" und das ganze mit CSS lösen. Außerdem: wirklich aufwendig ist das nicht, und eine Grafik spart man allemal

Siehe:

gibt es eine Möglichkeit in CSS eine Trennlinie einzufügen die so ausschaut wie angehängt?

Ich will nicht die üblichen Borderstyles verwenden.[/IMG]
.

 

[mare1981]

AW: eigene Trennlinie in CSS

so, die Sache hat super geklappt merci DrEddison ,-)

 

[vanilladragon]

AW: eigene Trennlinie in CSS

Mir fiel auch gerade noch was ein: Das Smashing-Magazine hatte mal einen <hr />-Contest gemacht. Das Ergebnis war sehenswert

Wow!!! Klasse, da sind echt schöne Sachen dabei. Danke für den Link

vanilla

 

[LaFaSiLuc]

AW: eigene Trennlinie in CSS

Oooh, geniale Trennlinien <3 Gleich gebookmarked

 

[Waldfee_81]

AW: eigene Trennlinie in CSS

Tolle Sachen dabei... perfekter Zeitpunkt, bin gad selber an meiner Homepage am basteln.
Danke für den post