Rahmenecken
johny7
Rahmenecken
johny7
Gunnar BittersmannMoin allerseits,
ich habe folgendes Beispiel:
<html>
<head>
<style>
div
{
border-right:solid 10px blue;
border-bottom: solid 20px navy;
width:300px;
height:300px;
}
</style>
</head>
<body>
<div>Test</div>
</body>
</html>
Die Ecke ist quasi auf Gehrung geschnitten. Gibt es eine Möglichkeit, z.B. die blaue Rahmenlinie rechts ganz nach unten zu führen und die dunkle Linie unten davor stoßen zu lassen?
Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de
-
Dazu brauchst du nur:
div{
border-right: 10px solid #123;
}
div:after{
display:block;
height:20px;
background:#456
content:' ';
}mfg Beat
-
Moin allerseits,
Dazu brauchst du nur:
div{
border-right: 10px solid #123;
}
div:after{
display:block;
height:20px;
background:#456
content:' ';
}Interessante Lösung. Mein Problem ist allerdings:
Ich will den unteren Rahmen erst bei einem Hover einblenden. Wie kann ich nun das realisieren?Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de-
Ich will den unteren Rahmen erst bei einem Hover einblenden. Wie kann ich nun das realisieren?
Es wäre nett, wenn du uns zuerst dein Vorhaben im grösseren und im Kontext mit Inhalten schilderst, bevor du das nächste mal sagst: "aber das sollte nur an einem Freitag dem 13. Geschehen."
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Moin allerseits,
Es wäre nett, wenn du uns zuerst dein Vorhaben im grösseren und im Kontext mit Inhalten schilderst, bevor du das nächste mal sagst: "aber das sollte nur an einem Freitag dem 13. Geschehen."
Nun, wenn du das so genau wissen willst...
Links und rechts siehst du normale Verweise. Sie haben unten und rechts einen weißen Rahmen. Wenn ich mit der Maus drüber gehe, soll der Hintergrund und der untere Rahmen bronze werden (zwei versch. Farben). Dabei soll aber die rechte Rahmenlinie möglichst weiter bis ganz nach unten weiß bleiben. Sonst sieht es etwas ungelungen aus.Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de-
Links und rechts siehst du normale Verweise. Sie haben unten und rechts einen weißen Rahmen. Wenn ich mit der Maus drüber gehe, soll der Hintergrund und der untere Rahmen bronze werden (zwei versch. Farben). Dabei soll aber die rechte Rahmenlinie möglichst weiter bis ganz nach unten weiß bleiben. Sonst sieht es etwas ungelungen aus.Eventuell solltest du den horizontalen Abstand (was dein Eindruck eines Bordes macht) zwischen den Links eher durch margin und das Durchscheinen der Hintergrundfarbe steuern.
Anderseits hast du die kompliziertere Möglichkeit:
Wenn border-right und -bottom im normalen Zustand gleicher Farbe sind, kann dir ja die Gehrung egal sein.
du wirst halt halt bei :hover ein :after Pseudoelement anzeigen und gleichzeitig den border-bottom verschwinden lassen, wenn diese Gehrung so kritisch ist.mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Moin allerseits,
Eventuell solltest du den horizontalen Abstand (was dein Eindruck eines Bordes macht) zwischen den Links eher durch margin und das Durchscheinen der Hintergrundfarbe steuern.
Das geht schlecht, weil ich ein Hintergrundbild verwende (siehe die dunkle Farbe der nicht-gehoverten Navi-punkte).
Anderseits hast du die kompliziertere Möglichkeit:
Wenn border-right und -bottom im normalen Zustand gleicher Farbe sind, kann dir ja die Gehrung egal sein.
du wirst halt halt bei :hover ein :after Pseudoelement anzeigen und gleichzeitig den border-bottom verschwinden lassen, wenn diese Gehrung so kritisch ist.Wie soll das umgesetzt werden? Ich kenne z.B.
.navi:hover { }
Wie soll ich aber bestimmen, das beim hovern ein after erfolgt?Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de-
Wie soll ich aber bestimmen, das beim hovern ein after erfolgt?
.navi:after:hover{}
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
.navi:after:hover{}
falsch:
.navi:hover:after{}mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische-
Moin allerseits,
.navi:after:hover{}
falsch:
.navi:hover:after{}und das bedeutet, wenn ich auf .navi mit der Maus gehe wird etwas angehängt?
Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de-
.navi:after:hover{}
falsch:
.navi:hover:after{}und das bedeutet, wenn ich auf .navi mit der Maus gehe wird etwas angehängt?
Das kommt auf den Inhalt (die Regeln) in
.navi:hover:after{}
an, und ob der betreffende sich hinsetzt und mit den Möglichkeiten von CSS mit einem modernen Browser experimentiert!mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
-
-
-
-
@@johny7:
nuqneH
Das geht schlecht, weil ich ein Hintergrundbild verwende
Für welches Element?
(siehe die dunkle Farbe der nicht-gehoverten Navi-punkte).
Ich sehe kein Hintergrundbild.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Moin allerseits,
@@johny7:
nuqneH
Das geht schlecht, weil ich ein Hintergrundbild verwende
Für welches Element?
Die Navigationspunkte besitzen eine Hintergrundfarbe. Das sieht man hier nicht, aber in Wirklichkeit ist die ganze Leiste mit einem Farbverlauf versehen.
(siehe die dunkle Farbe der nicht-gehoverten Navi-punkte).
Ich sehe kein Hintergrundbild.
Qapla'
Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de-
@@johny7:
nuqneH
Das sieht man hier nicht, aber in Wirklichkeit ist die ganze Leiste mit einem Farbverlauf versehen.
Warum dafür ein Hintergrundbild?
So richtig klar wird mir dein Problem nicht. Online-Beispiel?
Qapla'
PS: Zitiere bitte sinnvoll, nicht alles!
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Moin allerseits,
@@johny7:
nuqneH
Das sieht man hier nicht, aber in Wirklichkeit ist die ganze Leiste mit einem Farbverlauf versehen.
Warum dafür ein Hintergrundbild?
Ich berücksichtige noch ältere Browser.
So richtig klar wird mir dein Problem nicht. Online-Beispiel?
Ich habe es jetzt anders gelöst. Beim Hovern kommt ein anderes Hintergrundbild, die untere Linie verwende ich nicht mehr, die übergeordnete ul hat ein Hintergrundbild mit weißer Linie unten.
Aber trotzdem danke für deine Mühe.
PS: Zitiere bitte sinnvoll, nicht alles!
Du meinst? ...dass Beat meine Grafik mitzitiert hat?
Grüße, JN
--
ie:{ fl:( br:^ va:| ls:[ fo:| rl:? n4:? ss:| de:] js:| ch:? sh:( mo:| zu:)
http://www.johny7.de
-
-
-
-
-
-
-
-
-