Zum Inhalt springen

Textmenü Schriftfarbe zuweisen

Erstellt am 13. Juli 2009 · 6 Antworten · letzte Antwort am 15. Juli 2009

Tags: HTML & CSS, Frage

zarah ·

Hallo Zusammen,
ich habe ein simples Textmenü erstellt und möchte nun die Schriftfarbe zuweisen, leider wird für die Navigation immer die Linkfarbe verwendet, sie sich auf die übrigen Verlinkungen bezieht,aber nicht die Farbe,die speziell für die Navigation verwendet werden soll.

page.10{
 
 subparts.navigation = HMENU
  subparts.navigation.entryLevel = 0
  subparts.navigation.1 = TMENU
  subparts.navigation.1.NO = 1
  subparts.navigation.1.NO.linkWrap = |         
  
 subparts.navigation.1.CUR = 1
 
  subparts.navigation.1.CUR < .subparts.navigation.1.NO
  subparts.navigation.1.CUR.doNotLinkIt = 1}

und in der CSS Datei

a:link, a:visited  {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal;color:#336699;text-decoration:none}

#navigation {padding:640px 0px 0px 410px; margin: 0px 20px 0px 30px;}

#navigation ul, #navigation li, #navigation a, #navigation p, #navigation a:link, #navigation a:hover, #navigation a:visited 	{font-size:17px; font-color:#ffffff; font-weight: normal; margin:0; padding: 0px; text-transform:uppercase; }
}

Vielen Dank und viele Grüße

RPW ·

Hallo zarah,

wenn du in deinen CSS festlegst das Links über (pseudoklassen) so aussehen sollen

a:link, a:visited  {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal;color:#336699;text-decoration:none}

dann sehen dies auch so aus, in diesem Fall ist Reihenfolge in der CSS Datei wichtig. Wenn der Brower zuerst auf eine Definition in der CSS Datei findet die zutrifft so wird diese angewendet. Es nützt danach nicht mehr eigene Definitionen für diw ID festzulegen.

zarah ·

okay -
aber einfach die Reihenfolge umzudrehen reicht wohl leider nicht
- wie ich gerade gemerkt habe -
bräuchte wohl noch eine kleine Hilfestellung

viele grüße

hwt ·

Hallo zarah,

eigentlich sollte das gehen. Denn natürlich kann man Link-Formatierungen für IDs und Klassen überschreiben bzw. dafür speziell angeben.

Leider sehe ich in deinem CSS gerade auch keinen Fehler.

Vielleicht kannst du uns ja noch dein html und css so wie es ausgegeben wird geben, evtl. ist daraus mehr sichtbar.

Hat es eigentlich einen speziellen Grund, dass die ul in einem Element mit der ID "#navigation" ist? Wenn man der ul gleich die ID zuweist, könnte das durchaus eine Vereinfachung sein.

Außerdem würde ich Pseudoformate und spezifische Verschachtelungen so sparsam wie möglich verwenden und nur dort einsetzen wo sie wirklich gebraucht werden. Damit bleibt das CSS übersichtlich und die Kaskadierung wird nicht so komplex.

Beispiel:

statt:
a:link, a:active, a:visited, a:hover {...gleiche Formatierungen für alle...}

einfach:
a {Formatierungen}

und gff. besondere Formatierungen für einzelne Änderugen:
a:hover {color:....}
zarah ·

Hallo hwt

hier einmal mein HTML Code

<body>
  <div id="body">
    <div id="bild">[BILD]</div>
<div class="balken">
       
             <div id="druck"></div>
             <div id="sprache">[SPRACHE]</div>
    </div>
   
    <div id="body">
      <div id="main">
        <div class="box">
          <div class="sp-rechts">
            <div class="inhalt">[INHALT]</div>
         
            

            
            <div class="rand">[RAND]</div>
          </div>
        </div>
      </div>  
    
    </div>
    
<div id="navigation">
  <p>[NAVIGATION]</p>
</div>
</div>

</body>
</html>

und mein CSS Code

* 
{padding: 0; margin: 0;}

body { width:1024px;  min-width:750px; height:750px; min-height:500px; margin:auto; text-align:center; border-color: #669900; border-style: solid; border-width: 0px 0px 0px; background-color: #CCCCCC; text-align:center; font:13px/1.22em; font-family: arial, helvetica, clean, sans-serif; }

p {font-size:85%; color:#666666;}

/*navigation horizontal*/
#navigation {padding:640px 0px 0px 410px; margin: 0px 20px 0px 30px;}
#navigation li 		{font-size:17px; font-color:#ffffff;font-weight: normal; margin:0 10px; padding:0 10px 0 0;  list-style:none; }
#navigation a, #navigation p,#navigation ul 			
{font-size:17px; font-color:#ffffff;font-weight: normal; margin:0; padding: 0px;  text-decoration:none; }


a {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal;color:#336699;text-decoration:none}


h1 { color: #999999;; font-size:90%;  margin-bottom: 8px; padding:0.2em 2em; font-weight:200; }
h2 { color:#EA261C; font-size:85%;  font-size:12px; font-style:normal; font-weight:100;}
h3 { color: #EA261C;  font-size:12px; font-style:normal; font-weight:100; padding-left:10px; }
h4 {  font-size:85%; color: #999999;  font-size:22px; font-style:normal; font-weight:100;padding-left:10px;}
h5 { color: #3399FF;  font-size:22px; font-style:normal; font-weight:100; }

#body {background-color: #FFFFFF; margin-bottom:1em; text-align:left;}
#bild { height: 11px; width:1024px; border-width:0px 0px 0px 0px; }

#main .box { width:78%; min-width:px; float:right; }
.balken { height: 16px; margin: 10px 15px 0 173px; padding-top: 20px; font-size: 75%; color: #669900; position: relative; top:0px;}

#druck, #sitemap, #sprache, #hauptmenue {background-position: 0 top; margin-right: 10px; padding: 0; display: inline; float: right  ; margin-top: 0;  }

.sp-rechts .inhalt { float:left; background-color: #ffffff; padding-left: 0px; margin-left:30px; margin-bottom: 20px;  }
.sp-rechts .rand { float:left; background-color: #ffffff; padding-left: 0px; margin-left:0px; margin-bottom: 20px;}

.inhalt{  margin-right: 0px; margin-left: 0px; padding-left:0px;}
.inhalt p { font-size: 78%; margin-right: 10px; margin-left: 0px; padding-bottom: 10px;}
.inhalt ul { padding-top: 5px; padding-left: 25px; list-style-type: circle; }
.inhalt li {padding-bottom: 5px}

Vielen Dank für den Blick darauf

hwt ·

Hi zarah,

in deinem css hat sich doch ein kleiner Fehler eingeschlichen.
Ist mir aber auch erst jetzt aufgefallen. :-)

Bei den Definitionen für die Navigation steht

font-color:#ffffff;

was allerdings in CSS

color:#ffffff;

sein müsste.

Viele Grüße!