Der folgende Beitrag wurde am 26. 02. 2010, 12:54 Uhr von seVes veröffentlicht.
Servus Leute!
Ich hab gerade ein paar Verständnisprobleme mit CSS und weiß nimmer so richtig weiter.
Zum folgenden CSS-Abschnitt gibt es das Problem, dass auf der Seite im Footer das Feld "Impressum" zwar im Hintergrund #C71E23 dargestellt wird, jedoch die Schriftfarbe nicht #FFFFFF sondern #666666 ist.
Warum? Was mach ich falsch?
Und vor allem, wenn ich auf den Link klicke, dann wird anschließend auch im Hover-Effekt die Schriftfarbe in #FFFFFF dargstellt.
Hoffe Ihr habt Tipps.
body {
background: url(../media/fill.jpg) repeat-x left top;
color: #666666;
font: 14px Verdana;
margin: 0px auto;
}
#wrapper {
margin: 0px auto;
width: 780px;
}
#header {
background: url(../media/banner.png) no-repeat center top;
height: 380px;
}
#content {
margin: 20px auto;
}
#footer {
background: #000000;
clear: both;
color: #FFFFFF;
margin: 0px auto;
padding: 15px 0px;
text-align: center;
}
#footer a {
margin-left: 30px;
padding: 5px 10px;
text-decoration: none;
}
#footer a:link, a:visited {
color: #666666;
}
#footer a:focus, a:hover, a:active {
background: #C71E23;
color: #FFFFFF;
}
--
Danke & Gruß
seVes
Der folgende Beitrag wurde am 26. 02. 2010, 14:06 Uhr von ChrisB veröffentlicht.
Hi,
> Ich hab gerade ein paar Verständnisprobleme mit CSS
In diesem Fall wohl mit Selektoren.
> Zum folgenden CSS-Abschnitt gibt es das Problem, dass auf der Seite im Footer das Feld "Impressum" zwar im Hintergrund #C71E23 dargestellt wird, jedoch die Schriftfarbe nicht #FFFFFF sondern #666666 ist.
>
> Warum? Was mach ich falsch?
Du hast nicht angegeben, dass du Links in #footer beim hovern speziell formatieren willst.
> #footer a:focus, a:hover, a:active {
> background: #C71E23;
> color: #FFFFFF;
Hier hast du einen Selektor verwendet, der Links im Zustand :focus betrifft, die sich in #footer befinden.
Und danach hast du zwei Selektoren angegeben, die Links in den Zuständen :hover und :active betreffen - aber *unabhängig* davon, wo im Dokument sie sich befinden.
MfG ChrisB
--
“Whoever best describes the problem is the person most likely to solve the problem.” [Dan Roam]
Der folgende Beitrag wurde am 26. 02. 2010, 14:12 Uhr von MudGuard veröffentlicht.
Hi,
> > #footer a:focus, a:hover, a:active {
> > background: #C71E23;
> > color: #FFFFFF;
>
> Hier hast du einen Selektor verwendet, der Links im Zustand :focus betrifft, die sich in #footer befinden.
> Und danach hast du zwei Selektoren angegeben, die Links in den Zuständen :hover und :active betreffen - aber *unabhängig* davon, wo im Dokument sie sich befinden.
Ergänzung: weil außerdem #footer a:link formatiert wird, wirken diese Angaben, da #footer a:link höhere Specificity hat als a:hover ...
cu,
Andreas
--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
Der folgende Beitrag wurde am 26. 02. 2010, 14:26 Uhr von seVes veröffentlicht.
> #footer a:focus, a:hover, a:active {
> background: #C71E23;
> color: #FFFFFF;
> }
Ich dachte das sagt aus, dass ich im <div>-footer für alle Links die werte focus, hover, active mit den gleichen CSS-Attributen versehe.
Wie hat dies nun richtig zu lauten?
Dachte ein Komma bewirkt, das für die komma-getrennten Werte die gleichen CSS-Attribute zutreffen.
So hatte ich es im SelfHTML-Doku jedenfalls verstanden.
--
Danke & Gruß
seVes
Der folgende Beitrag wurde am 26. 02. 2010, 14:53 Uhr von MudGuard veröffentlicht.
Hi,
> > #footer a:focus, a:hover, a:active {
> > background: #C71E23;
> > color: #FFFFFF;
> > }
>
> Ich dachte das sagt aus, dass ich im <div>-footer für alle Links die werte focus, hover, active mit den gleichen CSS-Attributen versehe.
>
> Wie hat dies nun richtig zu lauten?
>
> Dachte ein Komma bewirkt, das für die komma-getrennten Werte die gleichen CSS-Attribute zutreffen.
So ist es ja auch:
für
#footer a:focus
setzt Du dieselben Regeln wie für
a:hover
und für
a:active
Du willst aber wohl dieselben Werte für
#footer a:focus
wie für
#footer a:hover
und für
#footer a:active
setzen.
cu,
Andreas
--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
Der folgende Beitrag wurde am 26. 02. 2010, 15:11 Uhr von seVes veröffentlicht.
> Hi,
>
> > > #footer a:focus, a:hover, a:active {
> > > background: #C71E23;
> > > color: #FFFFFF;
> > > }
> >
> > Ich dachte das sagt aus, dass ich im <div>-footer für alle Links die werte focus, hover, active mit den gleichen CSS-Attributen versehe.
> >
> > Wie hat dies nun richtig zu lauten?
> >
> > Dachte ein Komma bewirkt, das für die komma-getrennten Werte die gleichen CSS-Attribute zutreffen.
>
> So ist es ja auch:
>
>
> für
> #footer a:focus
> setzt Du dieselben Regeln wie für
> a:hover
> und für
> a:active
>
>
>
> Du willst aber wohl dieselben Werte für
> #footer a:focus
> wie für
> #footer a:hover
> und für
> #footer a:active
> setzen.
>
>
>
> cu,
> Andreas
Sorry, aber irgendwie versteh ich es nicht.
Ist das nicht dasselbe beides?
Also ich versteh irgendwie noch nicht den Fehler.
Muss ich also für jede Pseudoklasse seperat
#footer a:link {}
#footer a:visited {}
/*...*/
machen!?
--
Danke & Gruß
seVes
Der folgende Beitrag wurde am 26. 02. 2010, 15:20 Uhr von Beat veröffentlicht.
> Sorry, aber irgendwie versteh ich es nicht.
> Ist das nicht dasselbe beides?
> Also ich versteh irgendwie noch nicht den Fehler.
>
> Muss ich also für jede Pseudoklasse seperat
>
> #footer a:link {}
> #footer a:visited {}
> /*...*/
>
>
> machen!?
Nein, du musst verstehen, dass das Komma ein Listenseperator für Selektoren darstellt
selector1, selector2, selector3
{}
mfg Beat
--
><o(((°> ><o(((°>
<°)))o>< ><o(((°>o
Der Valigator leibt diese Fische
Der folgende Beitrag wurde am 26. 02. 2010, 16:09 Uhr von seVes veröffentlicht.
> Nein, du musst verstehen, dass das Komma ein Listenseperator für Selektoren darstellt
> selector1, selector2, selector3
> {}
Okay das leuchtet mir jetzt ein, auch die anderen Posts.
Allerdings weiß ich immernoch nicht, wie ich definiere, dass in #footer die CSS-Klassen a:link, a:focus, a:hover, a:active und a:visited mit dem und dem Aussehen erscheinen sollen.
Mir ist klar, dass ich momentan also a:visited, a:hover und a:active als global setze und nicht nur auf #footer beschränke, richtig?
Wie mache ich dies nun aber?
#focus a:focus, #footer a:hover, #footer a:active {}
So etwa?
--
Danke & Gruß
seVes
Der folgende Beitrag wurde am 26. 02. 2010, 16:21 Uhr von Cheatah veröffentlicht.
Hi,
> Allerdings weiß ich immernoch nicht, wie ich definiere, dass in #footer die CSS-Klassen a:link, a:focus, a:hover, a:active und a:visited mit dem und dem Aussehen erscheinen sollen.
Du weißt, wie Du es mit a:link machst. Jetzt mache es mit den anderen - erst mal immer nur mit einem einzigen. Wenn Du die Selektoren hast, fügst Du sie kommagtrennt zusammen.
> Mir ist klar, dass ich momentan also a:visited, a:hover und a:active als global setze und nicht nur auf #footer beschränke, richtig?
Korrekt.
> Wie mache ich dies nun aber?
>
> #focus a:focus, #footer a:hover, #footer a:active {}
>
> So etwa?
Was hat dies für Dich ergeben?
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
Der folgende Beitrag wurde am 26. 02. 2010, 16:31 Uhr von seVes veröffentlicht.
And the winner is:
>
> #focus a:focus, #footer a:hover, #footer a:active {}
>
Ich mag Euch! <3
Dankeschön!! :-)
--
Danke & Gruß
seVes
Der folgende Beitrag wurde am 26. 02. 2010, 16:21 Uhr von EKKi veröffentlicht.
Mahlzeit seVes,
> Mir ist klar, dass ich momentan also a:visited, a:hover und a:active als global setze und nicht nur auf #footer beschränke, richtig?
Prinzipiell ja.
> Wie mache ich dies nun aber?
>
> #focus a:focus, #footer a:hover, #footer a:active {}
>
> So etwa?
Das würde in etwa bedeuten:
"Das in den geschweiften Klammern Folgende soll gelten für:
- alle fokussierten Links, die sich in einem Element mit der ID 'focus' befinden,
- alle Links, die sich in einem Element mit der ID 'footer' befinden und über denen gerade der Mauszeiger 'schwebt'
- sowie alle aktiven Links, die sich in einem Element mit der ID 'footer' befinden."
Wenn es das ist, was Du erreichen willst, wäre der Code korrekt. Probier's doch einfach aus - kaputtmachen kannst Du nichts. :-)
MfG,
EKKi
--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
Der folgende Beitrag wurde am 26. 02. 2010, 16:06 Uhr von Cheatah veröffentlicht.
Hi,
> > > > #footer a:focus, a:hover, a:active {
> Sorry, aber irgendwie versteh ich es nicht.
>
> Ist das nicht dasselbe beides?
ja, das ist nicht dasselbe. Der oben genannte Selektor ist (von der Reihenfolge abgesehen) identisch mit:a:hover, a:active, #footer a:focus {
Erwartest Du hier, dass sich a:hover ausschließlich auf die Links des Footer-Elements bezieht? Nein? Dann erwarte es auch nicht von Deinem Code.
> Muss ich also für jede Pseudoklasse seperat
Nein, Du musst lediglich die richtigen Selektoren verwenden.
Cheatah
--
X-Self-Code: sh:( fo:} ch:~ rl:| br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes
© 1998-2013 SELFHTMLImpressumSoftware: Classic Forum 3.4