Konkreter Code - Wo ist der Fehler?

sukitio · 18.07.2011

Hi Leute,

vielleicht könnt ihr mir mal wieder helfen.
Komischerweise werden die Links in <div id="footer"> in der Farbe des in p.quote Links gezeigt und :hover funktioniert auch nicht mehr. Hat bis vor wenigen Minuten noch geklappt, irgendwas ist jetzt falsch, aber ich versteh beim besten Willen nicht, warum das jetzt nimmer geht.

Hier ist der Code zum Probelm:
Danke für eure Hilfe!

Code:

<body>
    <div id="navi-bg"></div>
    <div id="wrap">
        <div id="header"><a href="index.html"><img src="images/header.png"></a></div>
        <ul id="navi">
            <li><a href="about.html"><img src="images/about.png" id="about" onmouseover="MM_swapImage('about','','images/hover/about.png',1)" onmouseout="MM_swapImgRestore()"></a></li>
            <li><a href="references.html"><img src="images/ref.png" id="ref" onmouseover="MM_swapImage('ref','','images/hover/ref.png',1)" onmouseout="MM_swapImgRestore()"></a></li>
            <li><a href="tutorials.html"><img src="images/tutorials.png" id="tutorials" onmouseover="MM_swapImage('tutorials','','images/hover/tutorials.png',1)" onmouseout="MM_swapImgRestore()"></a></li>
            <li><a href="blog.html"><img src="images/blog.png" id="blog" onmouseover="MM_swapImage('blog','','images/hover/blog.png',1)" onmouseout="MM_swapImgRestore()"></a></li>
            <li><a href="contact.html"><img src="images/contact.png" id="contact" onmouseover="MM_swapImage('contact','','images/hover/contact.png',1)" onmouseout="MM_swapImgRestore()"></a></li>
        </ul>
        <div id="background">
            <div id="content">
                <h1>Welcome to my Portfolio-Website!</h1>
                <p>Lorem ipsum dolor sit amet</p>
                <p class="quote">&laquo;Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet <a href="http://www.gidf.de/lorem+ipsum">Lorem ipsum</a> dolor sit amet&raquo;</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>
            </div><!-- /content -->
        <br class="clear" />
        </div><!-- /background -->    
        <div id="footer">
            <p>&copy; 2011, David Kaiser &middot; <a href="imprint.html">imprint</a> &middot; <a href="friends.html">friends</a></p>
        </div>    
    </div><!-- /wrap -->
</body>

Code:

body {font-family:helvetica neue, helvetica, arial, sans-serif;}
a, a:active, a:visited {border-style:none; text-decoration:none; color:#555555;}
a:hover {text-decoration:none; color:#cc8500;}
p {font-size:0.8em; color:#555555; line-height:1.6em;}
p    .quote {font-family:georgia, serif; font-style:italic; color:#909090;}
p.quote a, a:active, a:visited {color:#909090;}
p.quote a:hover {color:#cc8500;}
h1,h2,h3,h4,h5,h6 {font-family:georgia, serif; font-style:italic; font-size:1.3em; color:#cc8500; font-weight:normal; letter-spacing:0.03em;}
#wrap {position:relative; top:20px; width:900px; margin:auto;}
#header {position:relative; display:block; margin:auto; width:168px;}
#navi-bg {position:absolute; width:100%; height:40px; left:0px; top:70px;}
ul#navi {position:relative; margin:auto; top:10px; width:506px; height:50px;}
ul#navi li {list-style:none; float:left; padding:0;}
#background {position:relative; top:10px; left:100px; width:700px; min-height:400px; -moz-border-radius:15px; -khtml-border-radius:15px;}
#content {position:relative; left:20px; top:10px; padding-top:0.1px; width:660px;}
#content p {position:relative; top:-5px;}
#footer p {position:relative; top:5px; text-align:center; font-size:0.7em; font-style:italic;}
.clear {clear:both;}

tgreve · 19.07.2011

AW: Konkreter Code - Wo ist der Fehler?

Hm, bei mir funktioniert es.
Was hast du für einen Doctype eingestellt?
Habe es gerade mit

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

getestet.

Doitsu · 19.07.2011

AW: Konkreter Code - Wo ist der Fehler?

p.quote a, a:active, a:visited

Du suchst nach p.quote a, und anschliessend nur noch nach a:active/:visited - deswegen wird es ueberschrieben.

p .quote

Du suchst hier nach einem Tag mit der Klasse .quote in einem p-Tag.. Das ist sicher auch nicht gewollt?

Ansonsten solltest du dir angeweohenen ordentlich einzuruecken, dass macht das Bearbeiten spaeter um einiges leichter.

sukitio · 19.07.2011

AW: Konkreter Code - Wo ist der Fehler?

@doitsu:
p.quote war im Grunde gewollt, da ich nur im p quote verwenden will. Habe aber mittlerweile auch rausbekommen, dass es egal ist. Werde das mal ausbessern denke ich.

Wie kann ich denn verhindern, dass er das überschreibt bzw. wie kann ich die Angelegenheit eleganter lösen?

Mein System des "Einrückens" find ich eigtl. recht übersichtlich, vllt. atm etwas unsortiert. Was sollte da deiner Meinung nach optimiert werden? Bin ja immer gerne lernbereit

@tgreve: habe auch W3C Transitional. Welchen Browser nutzt du denn?
Habe grade festgestellt, dass es in Safari geht, in FF5 nicht. Jemand ne Idee zur Optimierung?

EDIT:
Folgendes habe ich noch festgestellt: Das Problem tritt erst auf, wenn man die Links im Footer einmal besucht hat. Irgendwas scheint also mit a:visited noch nicht so ganz zu klappen.
Aber eigentlich habe ich doch a:visited richtig definiert, oder?

krid2873 · 20.07.2011

AW: Konkreter Code - Wo ist der Fehler?

Moin,

sukitio:
Wie kann ich denn verhindern, dass er das überschreibt bzw. wie kann ich die Angelegenheit eleganter lösen?

Den Anfang hast du ja schon gemacht, jetzt musst du es halt nur konsequent fortsetzen.

alt:

Code:

p.quote a, [COLOR=Red]a:active[/COLOR], [COLOR=Red]a:visited[/COLOR] {color:#909090;}

neu:

Code:

p.quote a, [COLOR=Red]p.quote a:active[/COLOR], [COLOR=Red]p.quote a:visited[/COLOR] {color:#909090;}

sukitio · 20.07.2011

AW: Konkreter Code - Wo ist der Fehler?

Ah, so einfach kanns gehen

Da war wohl mein Verständnis für CSS noch nicht weit genug gereift.

Danke vielmals!

Sandocan · 25.07.2011

AW: Konkreter Code - Wo ist der Fehler?

Code:

p.quote a{#231456;}

sollte eigentlich reichen

Myhar · 26.07.2011

AW: Konkreter Code - Wo ist der Fehler?

Nein, es reicht nicht. Auch wenn "sollte" so ein schönes Wort ist, um seine Unsicherheit auszudrücken ;-)
Ist irgendwo ein a:active, a:visited definiert, dann würde dies auch für p.quote a:visited gelten.
Bsp:

Code:

p a {color:green}
a:focus {color:blue}

Der Link wird beim Fokus mit der Tastatur blau. (ist auch für, a:visited etc. anwendbar)
Es ist aber generell eine schlechte Idee, visited Links gleich zu stylen wie normale Links. Schließlich soll damit dem User gezeigt werden, wo er schon gewesen ist. Leider sehen viele "Designer" dies als Eingriff in ihre reine, möglichst überall gleich aussehende Webseite (um es einmal etwas überspitzt zu formulieren)

L. G.