nicht angemeldet
<hr> mit CSS gestalten
0 1 
Gernot Back
0
<hr> mit CSS gestalten
Hallo,
darf man das <hr> Element mit css gestalten?
Ich habe folgendes probiert:
hr{
border: 1px dotted #ccc;
height: 0;
width: 100%;
}
Im NC 7.x wird die Trennlinie nicht dargestellt.
Der Feuerfuchs stellt die Trennline nicht wie angegeben dar.
Mein Opera stellt ein normale Trennlinie dar.
Wie bekomme ich eine gleichmäßige darstellung hin?
Danke für Tipps.
-----------------
Ahoi.
-
Hallo HerrKaleu,
darf man das <hr> Element mit css gestalten?
Warum sollte das verboten sein?
Wie bekomme ich eine gleichmäßige darstellung hin?
http://de.selfhtml.org/html/text/trennlinien.htm#gestalten_css
Grüße
Roland -
Hallo HerrKaleu,
Im NC 7.x wird die Trennlinie nicht dargestellt.
Der Feuerfuchs stellt die Trennline nicht wie angegeben dar.
Mein Opera stellt ein normale Trennlinie dar.Um eine gepunktete Linie im IE darzustellen, muss man entweder mit einer Hintergrundgrafik arbeiten oder ein weiteres Element herumschachteln, um die fälschlicherweise vom IE gezogene Strichellinie in eine gepunktete zu zoomen.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Punktlinie</title> <meta name="author" content="Gernot Back" /> <meta name="generator" content="Ulli Meybohms HTML EDITOR" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> [code lang=css] html, body { margin:0; padding:0; width:100%; } hr { border:dotted #ccc; border-width:0 0 1px 0; } * html .dottedline { border-top:2px dotted #ccc; margin-top:.5em; zoom:.5; } * html .dottedline hr { margin-top:-9px; }</style>
</head>
<body >
<p>erster Absatz</p>
<div class="dottedline"><hr/></div>
<p>zweiter Absatz</p>
</body>
</html>[/code]Nach meinem Dafürhalten gibt es aber strukturell in den seltensten Fällen einen Grund, das HR-Element überhaupt zu verwenden. So eine Trennlinie gehört einfach als Border-Top zum nächsten Blockelement oder als Border Bottom zu just demselben Block-Element, das man nach unten hin abgrenzen will. Im Beispiel oben wäre das also eines der beiden P-Elemente.
Der IE-Workaround für die Pünktchenlinie ist bei diesem Ansatz aber noch lästiger, weil dann der Zoomfaktor für den Text auch noch wieder mit dem Kehrwert des Zoomfaktors für die Linie in einem Schachtelelement kompensiert werden muss.
vgl.: http://forum.de.selfhtml.org/archiv/2005/7/t110843/#m696916
Gruß Gernot