[CSS] Zweimaliges Formatieren

El Barto · 29.06.2006, 09:13

Folgender Code:

Code:

div#footer a, div#mainBox a {
    color:#427BD6;
    text-decoration:none;
}
div#footer a:hover, div#mainBox a:hover {
    text-decoration:underline;
}


a.calendarLastMonth {
    display:block;
    width:16px;
    height:20px;
    background-color:#C3C3C3;
    color:#FFFFFF;
    text-align:center;
    vertical-align:center;
    line-height:20px;
    float:left;
    margin-right:1px;
}
a.calendarLastMonth:hover {
    color:#FFFFFF;
    background-color:#427BD6;
}

Mein Problem ist jetzt, dass im Link a.calendarLastMonth trotzdem die Textfarbe nicht auf weiß zurückgesetzt wird. Wieso lässt sich denn das nicht mehr "überschreiben"? Was für eine Lösung hättet ihr parat.

Ich will eben die normalen Textlinks nicht extra immer mit class-Tag angeben müssen.

Ben · 29.06.2006, 09:21

Hmmmmmmm,
gerade mal ausgestestet ... hmmmmmmmmmmmmmmmmm ...

.
Ich hätte jetzt aus Logik gedacht, dass das klappen sollte, wie du es möchtest.

Ich werd auch mal Google bemühen. Interessante Sache.

Grüße, Ben.

El Barto · 29.06.2006, 09:22

meine Logik war eben, dass die erste Formatierung ja eigentlich durch die zweite überschrieben werden sollte.
Aber sowohl IE als auch Gecko gehalten die erste Formatierung bei.

Ben · 29.06.2006, 09:33

Jou, genau. Die Eigenschaften, die im a.calenderLastMonth stehen, überschreiben nichts. Wenn ich einen Background bei den Links in der Box angebe, dann wird dieser auch übernommen und nicht überschrieben.

[PS]
Gerade hier gelesen. Es ist ja bekannt, dass eine ID nur einmal vorkommen darf. "calendarLastMonth" scheint mir diese Anforderung zu erfüllen. Es wird nur ein Link im Kalender zum letzten Monat geben, oder?

Okay. Ändern wir also die Klasse in eine ID, so erhält man Erstaunliches.
Dies hier

HTML-Code:

<html>

 <head>
   <title>test</title>
   
   <style type="text/css">
   <!--
    div#footer a, div#mainBox a {
        color:#427BD6;
        text-decoration:none;
        width:200px;
    }
    div#footer a:hover, div#mainBox a:hover {
        text-decoration:underline;
    }


    a#calendarLastMonth {
        display:block;
        width:16px;
        height:20px;
        background-color:#C3C3C3;
        color:#FFFFFF;        
        text-align:center;
        vertical-align:center;
        line-height:20px;
        float:left;
        margin-right:1px;
    }
    a#calendarLastMonth:hover {
        color:#FFFFFF;
        background-color:#427BD6;
    }
   --> 
   </style>
 </head>
 <body>
   
   <div id="mainbox">
     <p>this is just a simple box</p>
     <a href="#">some hyperlink</a>
     <br />
     <a id="calendarLastMonth" href="#">last month</a>
     
   </div>
   
 </body>
</html>

liefert einen zweiten Link, der einen grauen Hintergrund mit blauer Schrift hat. Das ist ja falsch.
Wenn ich nun aber drüber "hovere", dann erhalte ich den blauen Hintergrund mit weißer Schrift.

robo47 · 29.06.2006, 09:35

http://www.css4you.de/hover.html

Zitat:

Es sind alle Stylesheet-Angaben erlaubt. Denke daran :active und :hover wie oben dargestellt nach :link und :visited zu definieren, da sie sonst die Eigenschaften von :visited übernehmen und die eigene Definition ignorieren. Dies ist kein Browser-Bug, sondern eine Festlegung in CSS.

ansonsten mal damit schauen:
-> http://www.css4you.de/wscss/css06.html#e
->

Ben · 29.06.2006, 09:36

Was willst du mit !IMPORTANT!? Das passt doch an dieser Stelle gar nicht ...

robo47 · 29.06.2006, 09:38

Zitat:

Zitat von Ben

Was willst du mit !IMPORTANT!? Das passt doch an dieser Stelle gar nicht ...

damit kann man andere regeln ignorieren lassen, dass sie nicht überschrieben werden können, bzw. als das wichtiger gelten!

Zitat:

Zitat von Ben

Jou, genau. Die Eigenschaften, die im a.calenderLastMonth stehen, überschreiben nichts. Wenn ich einen Background bei den Links in der Box angebe, dann wird dieser auch übernommen und nicht überschrieben.

[PS]
Es ist ja bekannt, dass eine ID nur einmal vorkommen darf. "calendarLastMonth" scheint mir diese Anforderung zu erfüllen. Es wird nur ein Link im Kalender zum letzten Monat geben, oder?

Vorsicht Klasse != ID

Code:

#dashieristeineid
{
}

.dashieristeineklasse
{
}

mfg
robo47

Ben · 29.06.2006, 09:46

Zitat:

Zitat von robo47

Zitat:

Zitat von Ben

Was willst du mit !IMPORTANT!? Das passt doch an dieser Stelle gar nicht ...

damit kann man andere regeln ignorieren lassen, dass sie nicht überschrieben werden können, bzw. als das wichtiger gelten!

Jou. Ich weiß das!

Nur ist es ja so, dass er eine "weiter oben" definierte Linkfarbe wiederhaben will. Niemand weiß, ob nicht doch etwas überschrieben werden soll.
Soweit ich das weiß, ist die "important"-Regel aber auch nicht beim Internet Explorer wirksam, oder?

Und zuletzt

Zitat:

Der Grund dafür ist das Schlüsselwort !important, das die Priorität einer Angabe erhöht, sodass sie nicht von Nachfolgenden überschrieben wird.

Jou .. interessant. ES SOLL ABER ÜBERSCHRIEBEN WERDEN!

Zitat:

Zitat von robo47

Vorsicht Klasse != ID

Code:

#dashieristeineid
{
}

.dashieristeineklasse
{
}

Stell mich mal nicht als Anfänger hin!

Danke ...

El Barto · 29.06.2006, 09:50

@Ben:
Das dieser Link nur einmal vorkommt, dass stimmt schon, aber ich hab noch nen anderen Link den ich öfters brauch, bei dem das gleiche Problem entsteht nur mit text-decoration:none

Code:

a.calendarDay {
    display:block;
    width:18px;
    height:18px;
    color:#427BD6;
    text-align:center;
    vertical-align:center;
    line-height:20px;
    float:left;
    margin-right:1px;
    margin-bottom:1px;
    border:1px solid #FFFFFF;
}
a.calendarDay:hover {
    color:#FFFFFF;
    border:1px solid #427BD6;
    text-decoration:none;
}

P.S.: ich versteh aber immer noch nicht, wieso ich denn die alte Formatierung nicht überschreiben kann

robo47 · 29.06.2006, 10:13

versuch doch mal so wie bei css4you beschrieben ALLES zu definierenm a, a mit :link,:visited,:hover etc ...

El Barto · 29.06.2006, 11:13

das bringt auch nix.
vielleich hilft das:

wenn ich statt div#mainBox a
nur a schreibe, dann kann ich die Formatierung überschreiben.
Ich will aber eben, dass nur die links in der mainBox so formatiert sind.
Das ist doch komisch, oder?

Edit:
Ahhhhh!!
Jetzt hab ich die Lösung, wenn ich auch bei dem anderen link div#mainBox vorne dran setze, dann funktionierts.

El Barto · 29.06.2006, 13:35

naja, ich dachte es funktioniert, hab mich da aber zu früh gefreut.
Im firefox funktioniert es jetzt aber der IE spinnt immer noch rum.

enrA · 29.06.2006, 17:47

Servus Miteinander,

Das Problem bei deinem Beispiel könnte bei der Spezifität zu finden sein.
Siehe dazu -> http://www.css4you.de/wscss/css06.html#c

Die Angabe 'div#mainBox a' hat eine höhere Spezifität als die Angabe 'a.calendarLastMonth'.
Durch hinzufügen von 'div#mainBox' zu 'a.calendarLastMonth' hast du dieser Angabe wiederum eine höhere Spezifität gegeben.
Dies hat ihr erlaubt die Vordergrund-Farbe zu überschreiben.

Gruss Arne

El Barto · 29.06.2006, 18:15

ja, damit hast du sicherlich recht.
Leider handhabt der IE das wiedermal anderst, als vorgeschrieben.
Naja. Ich habs jetzt mit ein paar Kniffen umgangen.

Ben · 29.06.2006, 18:34

Zitat:

Zitat von El Barto

Ich habs jetzt mit ein paar Kniffen umgangen.

Die wären ... ?

El Barto · 29.06.2006, 22:48

naja, indem ich die erste Formatierung für die allgemeinen Links einfach universell gelten lasse und dann jede abweichung davon per klassen formatiere.
Is nicht ganz so schön und praktisch, aber es funktioniert.

29.06.2006, 09:13	Nach oben #1
El Barto Benutzer Registriert seit: 14.11.2005 Beiträge: 52	[CSS] Zweimaliges Formatieren Folgender Code: Code: div#footer a, div#mainBox a { color:#427BD6; text-decoration:none; } div#footer a:hover, div#mainBox a:hover { text-decoration:underline; } a.calendarLastMonth { display:block; width:16px; height:20px; background-color:#C3C3C3; color:#FFFFFF; text-align:center; vertical-align:center; line-height:20px; float:left; margin-right:1px; } a.calendarLastMonth:hover { color:#FFFFFF; background-color:#427BD6; } Mein Problem ist jetzt, dass im Link a.calendarLastMonth trotzdem die Textfarbe nicht auf weiß zurückgesetzt wird. Wieso lässt sich denn das nicht mehr "überschreiben"? Was für eine Lösung hättet ihr parat. Ich will eben die normalen Textlinks nicht extra immer mit class-Tag angeben müssen.

29.06.2006, 09:21	Nach oben #2
Ben Benjamin Klaile Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.512	Hmmmmmmm, gerade mal ausgestestet ... hmmmmmmmmmmmmmmmmm ... . Ich hätte jetzt aus Logik gedacht, dass das klappen sollte, wie du es möchtest. Ich werd auch mal Google bemühen. Interessante Sache. Grüße, Ben. __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum Aktuell ... Kaiserslautern kommt in die Festung Oberwerth U14 erreicht Sieg im Testspiel gegen SF Troisdorf Testspiel gegen SV Wehen-Wiesbaden in Nassau E-Jugend Blitzturnier auf dem Oberwerth SV Ried gegen SK Rapid Wien

29.06.2006, 09:33	Nach oben #4
Ben Benjamin Klaile Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.512	Jou, genau. Die Eigenschaften, die im a.calenderLastMonth stehen, überschreiben nichts. Wenn ich einen Background bei den Links in der Box angebe, dann wird dieser auch übernommen und nicht überschrieben. [PS] Gerade hier gelesen. Es ist ja bekannt, dass eine ID nur einmal vorkommen darf. "calendarLastMonth" scheint mir diese Anforderung zu erfüllen. Es wird nur ein Link im Kalender zum letzten Monat geben, oder? Okay. Ändern wir also die Klasse in eine ID, so erhält man Erstaunliches. Dies hier HTML-Code: <html> <head> <title>test</title> <style type="text/css"> <!-- div#footer a, div#mainBox a { color:#427BD6; text-decoration:none; width:200px; } div#footer a:hover, div#mainBox a:hover { text-decoration:underline; } a#calendarLastMonth { display:block; width:16px; height:20px; background-color:#C3C3C3; color:#FFFFFF; text-align:center; vertical-align:center; line-height:20px; float:left; margin-right:1px; } a#calendarLastMonth:hover { color:#FFFFFF; background-color:#427BD6; } --> </style> </head> <body> <div id="mainbox"> <p>this is just a simple box</p> <a href="#">some hyperlink</a> <br /> <a id="calendarLastMonth" href="#">last month</a> </div> </body> </html> liefert einen zweiten Link, der einen grauen Hintergrund mit blauer Schrift hat. Das ist ja falsch. Wenn ich nun aber drüber "hovere", dann erhalte ich den blauen Hintergrund mit weißer Schrift. __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum Aktuell ... Kaiserslautern kommt in die Festung Oberwerth U14 erreicht Sieg im Testspiel gegen SF Troisdorf Testspiel gegen SV Wehen-Wiesbaden in Nassau E-Jugend Blitzturnier auf dem Oberwerth SV Ried gegen SK Rapid Wien

29.06.2006, 09:36	Nach oben #6
Ben Benjamin Klaile Registriert seit: 02.12.2004 Ort: Remagen Beiträge: 4.512	Was willst du mit !IMPORTANT!? Das passt doch an dieser Stelle gar nicht ... __________________ Mehr TuS Koblenz geht nicht ... - TuS Koblenz Forum Aktuell ... Kaiserslautern kommt in die Festung Oberwerth U14 erreicht Sieg im Testspiel gegen SF Troisdorf Testspiel gegen SV Wehen-Wiesbaden in Nassau E-Jugend Blitzturnier auf dem Oberwerth SV Ried gegen SK Rapid Wien

29.06.2006, 09:50	Nach oben #9
El Barto Benutzer Registriert seit: 14.11.2005 Beiträge: 52	@Ben: Das dieser Link nur einmal vorkommt, dass stimmt schon, aber ich hab noch nen anderen Link den ich öfters brauch, bei dem das gleiche Problem entsteht nur mit text-decoration:none Code: a.calendarDay { display:block; width:18px; height:18px; color:#427BD6; text-align:center; vertical-align:center; line-height:20px; float:left; margin-right:1px; margin-bottom:1px; border:1px solid #FFFFFF; } a.calendarDay:hover { color:#FFFFFF; border:1px solid #427BD6; text-decoration:none; } P.S.: ich versteh aber immer noch nicht, wieso ich denn die alte Formatierung nicht überschreiben kann

29.06.2006, 09:22	Nach oben #3
El Barto Benutzer Registriert seit: 14.11.2005 Beiträge: 52	meine Logik war eben, dass die erste Formatierung ja eigentlich durch die zweite überschrieben werden sollte. Aber sowohl IE als auch Gecko gehalten die erste Formatierung bei.

29.06.2006, 10:13	Nach oben #10
robo47 Benjamin Steininger Registriert seit: 02.06.2005 Ort: weiher im tiefsten Odenwald Beiträge: 1.203	versuch doch mal so wie bei css4you beschrieben ALLES zu definierenm a, a mit :link,:visited,:hover etc ... __________________ - Onlinetools - Mein Blog endlich mit RSS-Feed

29.06.2006, 11:13	Nach oben #11
El Barto Benutzer Registriert seit: 14.11.2005 Beiträge: 52	das bringt auch nix. vielleich hilft das: wenn ich statt div#mainBox a nur a schreibe, dann kann ich die Formatierung überschreiben. Ich will aber eben, dass nur die links in der mainBox so formatiert sind. Das ist doch komisch, oder? Edit: Ahhhhh!! Jetzt hab ich die Lösung, wenn ich auch bei dem anderen link div#mainBox vorne dran setze, dann funktionierts. Geändert von El Barto (29.06.2006 um 11:20 Uhr)

29.06.2006, 13:35	Nach oben #12
El Barto Benutzer Registriert seit: 14.11.2005 Beiträge: 52	naja, ich dachte es funktioniert, hab mich da aber zu früh gefreut. Im firefox funktioniert es jetzt aber der IE spinnt immer noch rum.

29.06.2006, 17:47	Nach oben #13
enrA Arne Riedel Registriert seit: 07.06.2006 Ort: Karben Beiträge: 2	Servus Miteinander, Das Problem bei deinem Beispiel könnte bei der Spezifität zu finden sein. Siehe dazu -> http://www.css4you.de/wscss/css06.html#c Die Angabe 'div#mainBox a' hat eine höhere Spezifität als die Angabe 'a.calendarLastMonth'. Durch hinzufügen von 'div#mainBox' zu 'a.calendarLastMonth' hast du dieser Angabe wiederum eine höhere Spezifität gegeben. Dies hat ihr erlaubt die Vordergrund-Farbe zu überschreiben. Gruss Arne Geändert von enrA (29.06.2006 um 18:38 Uhr)

29.06.2006, 18:15	Nach oben #14
El Barto Benutzer Registriert seit: 14.11.2005 Beiträge: 52	ja, damit hast du sicherlich recht. Leider handhabt der IE das wiedermal anderst, als vorgeschrieben. Naja. Ich habs jetzt mit ein paar Kniffen umgangen.

29.06.2006, 22:48	Nach oben #16
El Barto Benutzer Registriert seit: 14.11.2005 Beiträge: 52	naja, indem ich die erste Formatierung für die allgemeinen Links einfach universell gelten lasse und dann jede abweichung davon per klassen formatiere. Is nicht ganz so schön und praktisch, aber es funktioniert.

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JEditorPane -> Text formatieren	Binary	Allgemeine Java-Programmierung	4	15.12.2006 18:18
[CSS] Hoverbutton mit HTML/CSS ohne JS/Flash	RaZoR	Tutorials	35	06.01.2006 18:57
[CSS] CSS-Hover ohne Nachladen	pichfl	Tutorials	0	06.01.2006 18:49
[css] Bild von Text umfliessen lassen	Michel	HTML, XML und CSS	2	30.08.2005 11:30
[CSS] Höhe von <div> Layer mag keine 100%	WarrenFaith	HTML, XML und CSS	15	19.08.2005 18:37