nicht angemeldet
<hr>-Tag mit CSS formatieren
Hallo Forum!
Für mein aktuelles Programmiereffekt, verwende ich horizontale Linien um die Seite zu gliedern. Nun möchte ich aber, dass diese formatierbar sind und auch noch auf allen Browsern möglichst ähnlich aussehen. Allerdings wollte ich auf formatierende Attribute im <hr>-Tag verzichten, zum einen um nicht jedes mal aufs neue alles anzugeben, zum anderen weil ich eigentliche alle Formate des gesamte Projekts über eine einzige .css-Datei regeln möchte und nicht zuletzt wegen der Reglements für HTML 4.01 strict...
Das ganze erweist sich als nahezu unmöglich.
Genau genommen möchte ich folgendes erreichen:
Meine Seite hat die Hintergrundfarbe #D0D0D0
Die Linien sollen eine Gesamthöhe von drei Pixeln haben, davon 1 Pixel Rand, dieser soll einen 3D-Effekt nach 'innen' haben, d.h. der obere und linke Rand dunkles grau, der untere und rechte helles grau.
Der eigentliche Teil der Linie soll die Farbe #006000 haben.
Dafür habe ich in der .css-Datei zunächst folgendes gemacht:
hr {
height:3px;
background-color:#006000;
}
Opera 6.01 zeigt mir nun genau das an, was ich oben wollte, der ganze REst der Browser nicht.
NS 4.78 zeigt graue Linien,
Mozilla 1.0 RC 1 und IE 5.0 schwarze.
IE habe ich mit color:#006000; wenigstens dazugebracht, mir die ganze Linie grün anzuzeigen(ohne Rahmen).
Ich habe nun versucht, das Layout mit CSS genauer zu umschreiben, dabei kam heraus:
hr {
height:3px;
color:#006000;
background-color:#006000;
border-width:1px;
border-style:inset;
border-color:#0E0E0E;
}
Mozilla blieb beim schwarzen Balken, IE zeigt mir zwar nur noch einen Pixel grün, aber dafür keinen Rand mehr, wodurch das ganze optisch zu dünn ist.
NS 4.78 zeigt mir unter der grauen Linie noch ein hübsches kleines Kästchen mit einem Inset-Rand... Das möchte ich auf keinen Fall!
Außerdem hat mir Opera das ganze Teil jetzt mit einer Gesamthöhe von 5px angezeigt, also 3px für den grünen Teil...
Kann man dagegen irgend etwas machen, oder muss ich mit der Tatsache leben, dass CSS-Eigenschaften für <hr>s von einigen Browser-Entwicklern (z.B. Mozilla) schlicht vergessen wurden? Vielleicht liegt es ja da dran, dass der wunderhschöne und simple <hr>-Tag bei WEb-DEsigner etwas verpönt ist...
Ich bin euch dankbar für jede Hilfe!
Gruß,
Arne.
-
hi
<hr/>s sind in der CSS-Spezifikation nicht genau abgedeckt, was für ein gigantisches Chaos sorgt. Die Farbe wird von den meisten (Mozilla, Opera, konqueror, Amaya, Netscape6/7) über background-color geregelt. Dabei sitzt dort ein 3D-Rahmen rum, den man besser abschalten sollte.
Der MSIE meint mal wieder alles anders machen zu müssen und nutzt 'color' für die Farbe.hr{
color:red;border-color:red;border-style:solid;background-color:red;
}...sollte für alle Browser* eine rote Linie bringen.
Grüße aus Bleckede
Kai
*) in Netscape 4 geht's GAR NICHT
-
MOIN!
<hr/>s sind in der CSS-Spezifikation nicht genau abgedeckt, was für ein gigantisches Chaos sorgt. Die Farbe wird von den meisten (Mozilla, Opera, konqueror, Amaya, Netscape6/7) über background-color geregelt. Dabei sitzt dort ein 3D-Rahmen rum, den man besser abschalten sollte.
Der MSIE meint mal wieder alles anders machen zu müssen und nutzt 'color' für die Farbe.hr{
color:red;border-color:red;border-style:solid;background-color:red;
}Danke für die schnelle Anwort!
AUch wenn der Inset-Style schick ist, werde ich es wohl so machen müssen....sollte für alle Browser* eine rote Linie bringen.
Nein, Mozilla bleibt stur bei seiner schwarzen Linie (erwarte ich zumindest, da er das bisher immer getan hat), die dazu übrigens noch hässliche runde Enden hat...
Gruß,
Arne.-
hi
Nein, Mozilla bleibt stur bei seiner schwarzen Linie (erwarte ich zumindest, da er das bisher immer getan hat), die dazu übrigens noch hässliche runde Enden hat...
kann ich nicht nachvollziehen. Und die Runden Ecken schon gar nicht ;)
Grüße aus Bleckede
Kai
-
-
-
hi Arne
wie kai schon schreibt macht jeder browser mit dem <hr> was er will.
ersetz es doch einfach durch ein gif :)...da knnast du dann mit machen was du willst :)
alles liebe
ole
(8-)>-
Hi Ole!
wie kai schon schreibt macht jeder browser mit dem <hr> was er will.
Habe ich auch gemerkt ;)
ersetz es doch einfach durch ein gif :)...da knnast du dann mit machen was du willst :)
Genau das wollte ich eigentlich nicht...
Aber danke für den Tip, damit könnte es tatsächlich klappen, aber da es sich der Seitenbreite anpassen soll, müsste ich dann wohl eine Tablle nehmen, die das Gif als Hintergrund hat....Gruß,
Arne.
-
-
Hallo Arne,
lass einfach das HR-Tag weg, denn mit einem Inline-Layer, z.B. span mit border erzeugt wesentlich schöne horizontale Linien.
<BR>
<span style="font-size:1px;text-align:center;width:100%;height:1px;background-color:wheat;border:inset 2px maroon"> <img src=spacer.gif alt="" width:600px height:1px></img> </span>spacer.gif ist ein leeres GIF mit transparenten Hintergrund.
Das style muss im Spantag stehen, damit es NN4-kompatible ist.Viel Spass beim Experimentieren
Michael
-
hi
<span style="font-size:1px;text-align:center;width:100%;height:1px;background-color:wheat;border:inset 2px maroon"> <img src=spacer.gif alt="" width:600px height:1px></img> </span>
*grusel*
wennschon so:<div style="height:3px;background-color:green;width:100%"> </div>
ein span hat keine text-align, width oder height und leer-GIFs sind NIE eine Lösung.
Grüße aus Bleckede
Kai
-
Hallo
Stimmt, hab mich vertan, indem ich Layer durch Span ersetzte, klar DIV ist richtig :grmml:
<DIV style="font-size:1px;text-align:center;width:100%;height:1px;background-color:wheat;border:inset 2px maroon"> <img src=spacer.gif alt="" width=600px height=1px></img> </DIV>aber die Idee ist trotzdem gut, oder ?
Das leere GIF setzt eine Minimal-Grösse und erspart somit ein JavaScript, also Breite minimal 600px bis 100%.Danke für die Korrektur ;-)
Michael
-
hi
Das leere GIF setzt eine Minimal-Grösse und erspart somit ein JavaScript, also Breite minimal 600px bis 100%.
dafür gibt's min-width.
Grüße aus Bleckede
Kai
-
auch hi ;-)
dafür gibt's min-width.
und welche Browser können min-width oder welche arbeiten fehlerfrei (!) mit CSS-2?
Gruss zurück
Michael
-
-
-
-