Thema: brauche CSS-hilfe bei visited, active, link etc.

hallo gemeinde.
ich bin gerade am verzweifeln. ich versuche, mein menü farblich richtig anzupassen. nur: es will nicht so wie ich will.

1. ich hab ein indent bild eingefügt. dieses habe ich mittels padding so eingerückt, dass es horizontal passt, wie mach ich es, dass es auch vertikal passt (ich hab da einach padding: 0 0 0 20px stehen- allerdings, wenn ich den ersten wert ändere, nimmt er mir den letzten wert für den linken abstand nicht mehr an)
2. ich hab 2 menüebenen. auf der mainlevel ebene soll die schrift schwarz sein, das hover soll weiss sein, und der menüpunkt, der gerade aktiv ist, soll gelb sein. ICH BRINGS ABER EINFACH NET ZUSAMMEN!!!

hier der code dazu, bitte um hilfe:

HTML-Code:

a.mainlevel:link{

  	

        background: url(../images/indent.png) no-repeat top left;
        padding: 0 0 0 20px;
        display:block;
        text-align:left;
        text-decoration:none;
   	color:#f5e41d;
   	font-size:11px;
        line-height:20px;

}



a.mainlevel:visited{

  	

        background: url(../images/indent.png) no-repeat top left;
        padding: 0 0 0 20px;
        display:block;
        text-align:left;
        text-decoration:none;
   	color:#181716;
   	font-size:11px;
        line-height:20px;

}



a.mainlevel:hover {

  	

        background: url(../images/indent.png) no-repeat top left;
        padding: 0 0 0 20px;
        display:block;
        text-align:left;
        text-decoration:none;
   	color:#FFFFFF;
   	font-size:11px;
        line-height:20px;

}


a.mainlevel:focus {

        background: url(../images/indent.png) no-repeat top left;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        padding: 0 0 0 20px;
        display:block;
   	color:#f5e41d;
   	font-size:12px;
   	text-decoration:none;
        text-align:left;
        line-height:20px;


}


a.mainlevel:hover {

        background: url(../images/indent.png) no-repeat top left;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        padding: 0 0 0 20px;
        display:block;
   	color:#FFFFFF;
   	font-size:12px;
   	text-decoration:none;
        text-align:left;
        line-height:20px;


}
a.mainlevel:active {

        background: url(../images/indent.png) no-repeat top left;
        font-family: Geneva, Arial, Helvetica, sans-serif;
        padding: 0 0 0 20px;
        display:block;
   	color:#f5e41d;
   	font-size:12px;
   	text-decoration:none;
        text-align:left;
        line-height:20px;


}

a.sublevel:link, a.sublevel:visited, a.sublevel:hover {

        
        padding-left:15px;
    	text-decoration:none;
    	color:#181716;
    	font-size:10px;
        font-family: Geneva, Arial, Helvetica, sans-serif;

}

a.sublevel:active, a.sublevel:hover, a.sublevel:focus {
    
        font-family: Geneva, Arial, Helvetica, sans-serif;
        padding:15px;    	
        color:#FFFFFF;
    	font-size:10px;
    	text-decoration:none;


}

Zur zweiten Frage:

Setzte einen Menüpunkt a.mainlevel {.....} Hierin erscheinen die Anweisungen für das Menü, wie es normalerweise aussehen soll. Hier gibst du auch die Farbe ein.

Im a.mainlevel:link Solltest du die gelbe Farbe #f5e41d rausmachen, da er sonst allen die Links in dieser Farbe anzeigt. Die Anweisung link bezieht sich nämlich für Verweise zu noch nicht besuchten Seiten. Das wäre ja der Fall, wenn ich zum ersten Mal auf deine Seite käme, dann wären die Links gelb und nicht schwarz.

Dann hast du zweimal a.mainlevel:hover, hier wird die erste durch die zweite überschrieben, so dass die Schrift von 11px auf 12px sich ändert. Lösche die zweite Anweisung und ändere in der ersten die Schriftgrösse auf 12px

Zur ersten Frage:

Welche Abmessungen hat das indent Bild? Du gibst eine line-height von 20px an. Reicht die Höhe, oder könnte es hier einen Umbruch geben?

Eventuell ist es eine Möglichkeit das Bild, über z. B. Photoshop, zu bearbeiten, dass es für die Zeile zentriert ist.

Zitat von rnussholz

Zur zweiten Frage:

Setzte einen Menüpunkt a.mainlevel {.....} Hierin erscheinen die Anweisungen für das Menü, wie es normalerweise aussehen soll. Hier gibst du auch die Farbe ein.

Im a.mainlevel:link Solltest du die gelbe Farbe #f5e41d rausmachen, da er sonst allen die Links in dieser Farbe anzeigt. Die Anweisung link bezieht sich nämlich für Verweise zu noch nicht besuchten Seiten. Das wäre ja der Fall, wenn ich zum ersten Mal auf deine Seite käme, dann wären die Links gelb und nicht schwarz.

Dann hast du zweimal a.mainlevel:hover, hier wird die erste durch die zweite überschrieben, so dass die Schrift von 11px auf 12px sich ändert. Lösche die zweite Anweisung und ändere in der ersten die Schriftgrösse auf 12px

ok, danke!
wie mache ich, dass der menüpunkt der aktiv ist, gelb ist?

a.mainlevel:active {

background: url(../images/indent.png) no-repeat top left;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0 0 0 20px;
display:block;
color:#f5e41d;
font-size:12px;
text-decoration:none;
text-align:left;
line-height:20px;

indent.png ändern einmal Farbe und einmal name indent-gelb.png

Zitat von jacxx

a.mainlevel:active {

background: url(../images/indent.png) no-repeat top left;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0 0 0 20px;
display:block;
color:#f5e41d;
font-size:12px;
text-decoration:none;
text-align:left;
line-height:20px;

indent.png ändern einmal Farbe und einmal name indent-gelb.png

kenn mich leider nicht aus was du meinst...???
ich will nur dass der gerade angeklickte menüpunkt gelb ist...
das indent image muss ich sowieso noch ändern...

das ist doch der background deiner Links..
das Image benennst du indent-gelb.png.. und legst es in das Template-Image Verzeichnis.

In der css änderst du

a.mainlevel:active {

background: url(../images/indent.png) no-repeat top left;

in indent-gelb.png

Zitat von jacxx

das ist doch der background deiner Links..
das Image benennst du indent-gelb.png.. und legst es in das Template-Image Verzeichnis.

In der css änderst du

in indent-gelb.png

ich will aber nur die schrift gelb haben des menüpunktes...!!



das procedere wo man eine grafik hinlegt versteh ich schon ))


EDIT: breakt vlt der eintrag des modultables die farbeinstellungen in der mainlevel?

HTML-Code:

table.moduletable {

    	width:100%;

    	text-align:left;

    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size:11px;

margin-top:15px;    	
margin-bottom: 14px; /*Abstand zwischen den Modulen 10px*/
      
        color:#000000;
    	

    	    

}
table.moduletable th { /*Modulüberschrift*/

    	text-align:left;
        font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size:12px;
        display:block;
        padding-left: 3px;
        padding-top: 3px;
        

}

table.moduletable td { /*Modultext, nicht Content*/

    	text-align:left;
        display:block;
    	font-size:11px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
        padding-left: 3px;
        padding-top: 3px;
       


}

grrrrrrrrrrrrrrrrrrrrrrrrrrr..
nur Schrift..

Zitat von jacxx Beitrag anzeigen
a.mainlevel:active {

background: url(../images/indent.png) no-repeat top left;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding: 0 0 0 20px;
display:block;
color:#f5e41d;

ändere den fett markierten Colorwert.. gelb..#FFFF00