gelöst - <hr> farbig -

guppy

Gestern/heute Nacht habe ich mich vergeblich bemüht per css Farbe in den <hr> zu bringen.
Da gibt es ja verschiedene Vorschläge im Internet, aber bei dem aktuellen chrome und ff funktioniert das alles nicht.
Hat da jemand eine Idee?

Synonym

nimm keinen HR, sondern einen Border

Edit: Wobei, habe mich selbst geirrt - hatte das Prob nämlich auch mal. Bei mir geht es mit HR und dem CSS hier:

Code

hr {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #C5C58B -moz-use-text-color #FFFFFF;
    border-image: none;
    border-left: 0 none;
    border-right: 0 none;
    border-style: solid none;
    border-width: 1px 0;
    margin: 5px 0;
}

Alles anzeigen

*** Link veraltet ***
Oben die Linie unter der H1

guppy

Das ist seltsam, eine vergleichbare Variante hatte ich gestern schon, aber funzt nicht.

Bin auch nicht der Experte für wp.
Da jetzt folgende Situation,
im drashboard gebe ich <hr> ein, ausgegeben wird <hr />.
wp ist aber kein xhtml also wird das falsch interpretiert?
Denn auch bei dieser Variante werden alle Anweisungen ausgeführt ausser die Farbanweisungen.:cry:

Margin

Versuch mal: <hr style="border: 0px; border-top: solid 1px #ffffff">
Nur um zu testen, ob grundsätzlich irgendwas falsch läuft oder ob es eventuell nur überschrieben wird.

Wenn das funzt, sollte es auch in der css laufen. Ggf. ganz ans Ende stellen, um auszuschließen, dass es von irgendwas überschrieben wird.

guppy

den Gedanken mit dem Überschreiben hatte ich auch schon, deshalb hatte ich auch ingos snippet an den Schluss gestellt.
Farbe wird so nicht interpretiert, mit color:#xxxx , vom IE ja aber von den anderen nicht, muss heute abend mal mit einnem farbigen bildpixel als Hintergrund experentieren - eigentlich ist es unwichtig aber so was nervt mich wenn es nicht gelöst ist - "Der Weg ist das Ziel".

Margin

Jep, das ist border-color, das zickt gerne. Deshalb obige Notation.

guppy

ach so, das hatte ich bei meinem vorherigen Post vergessen, <hr style="border: 0px; border-top: solid 1px #ffffff"> geht auch nicht.

Alex07

AW: <hr> farbig

Hmmm, hatte gestern auch mit CSS gekämpft. Ich bewundere Leute die das können.
Logisch ist da manchmal unlogisch und hier und da verwirrend.
Aber vielleicht hab ich's einfach nimmer drauf wie ihr's

Synonym

Hm, also wenn ich Deine Seite nehme und dort den Border auf 1px setze und auf red, dann bekommt ich eine rote Linie.

Du hast das derzeit ja so:

background-color: #CCCCCC;
border: 0 none;

Also genau der falsche Ansatz. Background muss / sollte weg und der Border (unten oder oben) farbig werden.

Synonym

Das alleine geht glaube ich nicht:
<hr style="border: 0px; border-top: solid 1px #ffffff">

da es von den Anweisungen aus der CSS überschrieben wird. Im CSS sollte es aber gehen.

Synonym

Das alleine geht glaube ich nicht:
<hr style="border: 0px; border-top: solid 1px #ffffff">

da es von den Anweisungen aus der CSS überschrieben wird. Im CSS sollte es aber gehen.

Ansonsten passt das:

Border erst mal ganz weg:
border: 0px;

Dann der oben wieder her mit der Farbe:
border-top: solid 1px red;

Margin

Jaein, direkte css-Anweisungen im Quelltext überschreiben erstmal alles aus der css. Aber sie überschreiben natürlich nur die Attribute, die sie auch benennen.

Werden in der css z.B. Werte für height und background-color gesetzt, müssen die natürlich zwecks Überschreibung auch wieder belegt werden. Und ich denke, genau hier liegt der Hase im Pfeffer *mal rat*

Synonym

Zitat

Jaein, direkte css-Anweisungen im Quelltext überschreiben erstmal alles aus der css.

Ah, gut zu wissen. Hatte das eigentlich genau anders herum gedacht und noch nie wirklich getestet

Margin

Es läuft so:

Die erste CSS im Head ist die rudimentäre.
Die zweite CSS im Head überschreibt die 1. in allen Punkten, die in der 2. belegt sind. Bei allen weiteren Attributen greift weiterhin die erste.
Die dritte CSS überschreibt mit Ihren notierten Werten die beiden vorderen.
usw.

Die Notierungen im Head der Seite überschreiben die Attribute in den CSS-Files, sofern sie hintern den eingebunden Files notiert sind.
Die Notierungen per style direkt im Quelltext überschreiben alles vorangegangene.

Das gilt aber eben NICHT bspw. für ganze Klassen, sondern Attribut für Attribut. Wird in der ersten css ein background-color für hr notiert, muss dieses Attribut in weiteren Anweisungen neutralisiert werden, sonst gilt es weiterhin, selbst wenn ansonsten vollständige Attributsätze für hr folgen.

guppy

Danke an Margin, da war noch eine andere <hr> Anweisung im Quelltext, gelöst

Margin

Alex07

klick danke
hatte ich auch nicht so gedacht, klingt aber wieder logisch

medium

eine Frage zum überschreiben der CSS Befehle - kann man !important per JS überschreiben? - momentan funktioniert es aber sobald ich im CSS ein !important mach kann ich es nicht mehr per JS überschreiben.

$('.copyright').css("color","#666666");

<hr> mach ich immer so, funktioniert auch in allen Browsern.

hr { border:0 solid #232323; border-bottom-width:1px; margin-top:20px; margin-bottom:20px; clear:both; }

Margin

JS interessiert css mal überhaupt nicht. Die Frage ist, was Du mit dem JS generierst, also was anschließend im QT steht. Wenn dort direkt die identischen Attribute überschrieben werden, dann geht es. Aber es ist dann nicht das JS, was die CSS überschreibt, sondern es sind die neuen Werte für das jeweilige Attribut, die die alten Werte überschreiben.

Margin

Zement ... wer lesen kann, ist klar im Vorteil :floet:

Womit willst Du ein "!important" überschreiben? Ein "!unimportant" ist mir nicht bekannt?!

Du kannst allenfalls die Werte überschreiben, die Du als !important markiert hast. Dafür musst Du aber den 2. Wertesatz wieder als !important kennzeichnen.