• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[css] verschiede Linkfarben auf EINER Seite

Status
Für weitere Antworten geschlossen.
B

bien

Neues Mitglied
Hallo !

Habe ein Problem, nutze Dreamweaver und habe nicht sehr viel Ahnung ;-)
Es geht um eine Homepage, die früher aus mehreren Frames bestand. In jedem einzelnen konnte ich so die Linkfarbe (active, hover,...) festlegen.
Jetzt mache ich die Seite neu und ohne Frames. Trotzdem möchte ich, dass die Links in der Navigation anders aussehen, als auf der eigentlichen Seite, wo Text ist.
Ich weiß von http://home.arcor.de/gancosch/kurs/kurs18.htm#unavi , dass ich mit ul# arbeiten muss, weiß aber nicht, wie ich das in meinem Fall realisieren soll. Wer kann mir helfen?

Hier mein Code:
HTML: 
<style type="text/css">
 
body {
 scrollbar-track-color:#FFFFFF;
 scrollbar-face-color:#1856CD;
 scrollbar-arrow-color:#FFFFFF;
 scrollbar-highlight-color:#666666;
 scrollbar-3dlight-color:#666666;
 scrollbar-shadow-color:#99999;
 scrollbar-darkshadow-color:#000000;
 background-image: url();
} body,td,th {
 color: #333333;
} 
a:link {
 color: #CCCCCC;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #CCCCCC;
}
a:hover {
 text-decoration: underline;
 color: #FFFFFF;
 background-color: 1856;
}
a:active {
 text-decoration: none;
 color: #CCCCCC;
}
</style>
</head>
<body>
<table width="750" border="0" align="center">
  <tr>
    <td height="678"><table width="100%"  border="0" align="center">
      <tr>
        <td width="24%" height="672" align="left" valign="top"><table width="100%"  border="0" background="images/navi.jpg">
          <tr>
            <td height="666" valign="top"><table width="100%"  border="0">
              <tr>
                <td height="229">&nbsp;</td>
              </tr>
              <tr>
                <td height="154"><div align="center">
                    <p class="Stil2"><a href="index.htm" target="_self" class="Stil3">Aktuelles</a><br>
                        <a href="ueber_uns.htm" target="_self">Wir &uuml;ber uns</a><br>
                        <a href="vorstand.htm" target="_self">Vorstand</a><br>
                        <a href="chronik.htm" target="_self">Chronik</a><br>
                        <a href="jugendarbeit.htm" target="_self">Jugendarbeit</a><br>
                        <a href="mitglied_werden.htm" target="_self">Mitglied werden</a> <br>
                        <a href="galerie.htm" target="_self">Galerie</a><br>
                        <a href="http://11111.guestbook.onetwomax.de/" target="_blank">G&auml;stebuch</a><br>
                        <a href="impressum.htm" target="_self">Impressum</a><br>
                        <a href="links.htm" target="_self">Links</a></p>
                    <p class="Stil2"><a href="mitglieder.htm" target="_self"><strong>Mitglieder</strong></a></p>
                </div></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
        <td width="76%" valign="top"><table width="100%" height="245"  border="0">
          <tr>
            <td height="82" valign="top"><table width="100%"  border="0" background="images/back.gif">
              <tr>
                <td height="78">&nbsp;</td>
              </tr>
            </table>  
 
        <style type="text/css">
<!--
 
body {
 scrollbar-track-color:#FFFFFF;
 scrollbar-face-color:#1856CD;
 scrollbar-arrow-color:#FFFFFF;
 scrollbar-highlight-color:#666666;
 scrollbar-3dlight-color:#666666;
 scrollbar-shadow-color:#99999;
 scrollbar-darkshadow-color:#000000;
 background-image: url();
} body,td,th {
 color: #333333;
} 
a:link {
 color: #C90D03;
 text-decoration: none;
}
a:visited {
 text-decoration: none;
 color: #C90D03;
}
a:hover {
 text-decoration: underline;
 color: #FFFFFF;
 background-color: 1856;
}
a:active {
 text-decoration: none;
 color: #C90D03;
}
</style>
     <p align="center"><strong>Hallo und herzlich willkommen , </strong></p>

Bitte beachten: Ich habe einfach mal 2 nahezu identische (nur die Fabren sind eben anders) <styles> eingebaut.
Der erste betrifft die nachfolgende Navigation (also alle Links), der 2. den Text (Herzlich willkommen...)

Vielen Dank im Voraus!
 
Mach das doch mit <span>!
Ich weiß aber nicht genau, worauf du hinaus willst!
 
Du musst dann mit IDs arbeiten.

in format.css
Code: 
a:link#menu2 {
    font-family:  Verdana, Arial, Helvetica, sans-serif; 
    font-size: 12px;

In der Datei:
Code: 
<a id="menu2" ... usw.>
 
Was Eye geschrieben hat, sieht schon mal gut aus, nur mußt du statt id ein class verwenden. denn id´s dürfen nur einmal verwendet werden.
Deine CSS sieht demnach so aus (nur der relevante Teil):
Code: 
<style type="text/css">
body {
 scrollbar-track-color:#FFFFFF;
 scrollbar-face-color:#1856CD;
 scrollbar-arrow-color:#FFFFFF;
 scrollbar-highlight-color:#666666;
 scrollbar-3dlight-color:#666666;
 scrollbar-shadow-color:#99999;
 scrollbar-darkshadow-color:#000000;
 background-image: url();
} body,td,th {
 color: #333333;
} 
a:link.menue1 {
 color: #CCCCCC;
 text-decoration: none;
}
a:visited.menue1 {
 text-decoration: none;
 color: #CCCCCC;
}
a:hover.menue1 {
 text-decoration: underline;
 color: #FFFFFF;
 background-color: 1856;
}
a:active.menue1 {
 text-decoration: none;
 color: #CCCCCC;
}

a:link.menue2 {
 color: #C90D03;
 text-decoration: none;
}
a:visited.menue2 {
 text-decoration: none;
 color: #C90D03;
}
a:hover.menue2 {
 text-decoration: underline;
 color: #FFFFFF;
 background-color: 1856;
}
a:active.menue2 {
 text-decoration: none;
 color: #C90D03;
}


</style>
</head>
<body>
 <table width="750" border="0" align="center"> <tr> <td height="678">
 <table width="100%"  border="0" align="center"> <tr> <td width="24%" height="672" align="left" valign="top">
 <table width="100%"  border="0" background="images/navi.jpg"> <tr> <td height="666" valign="top">
 <table width="100%"  border="0"> <tr> <td height="229">&nbsp;</td> </tr> <tr> <td height="154">
 <div align="center"><p class="Stil2">
 <a href="index.htm" target="_self" class="menue2">Aktuelles</a><br>
 <a href="ueber_uns.htm" target="_self" class="menue1">Wir &uuml;ber uns</a><br> 
 <a href="vorstand.htm" target="_self" class="menue1">Vorstand</a><br> 
 <a href="chronik.htm" target="_self" class="menue1">Chronik</a><br> 
 <a href="jugendarbeit.htm" target="_self" class="menue1">Jugendarbeit</a><br> 
 <a href="mitglied_werden.htm" target="_self" class="menue1">Mitglied werden</a> <br> 
 <a href="galerie.htm" target="_self" class="menue1">Galerie</a><br> 
 <a href="http://11111.guestbook.onetwomax.de/" target="_blank" class="menue1">G&auml;stebuch</a><br> 
 <a href="impressum.htm" target="_self" class="menue1">Impressum</a><br> 
 <a href="links.htm" target="_self"  class="menue1">Links</a></p> 
 <a href="mitglieder.htm" target="_self" class="menue2"><strong>Mitglieder</strong></a>
 </p></div>
 
Hi nichtsgeht,

nichtsgeht schrieb:
Was Eye geschrieben hat, sieht schon mal gut aus, nur mußt du statt id ein class verwenden. denn id´s dürfen nur einmal verwendet werden.
Zum Vergrößern anklicken....

Hast Du einen Link zu dem Thema ID contra class? Neben falschen Ratschlägen scheine ich auch falsche Suchbegriffe zum Thema zu verwenden ;-)

Gruß
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben