CSS - Klassen mit verschiedenenen Link-Eigenschaften

gasty

Hey!
Ich hab in meinem HTML-File Link-Tags wie folgt:

Zitat

...

und der entsprechende css-aussschnitt schaut so aus:

Code

.main_links { background-color: #000000; font-family: Arial, sans-serif; color: #FFFFFF; font-size: 12px; text-align: center
.main_links a:link,a:visited { text-decoration: none; color: #FFFFFF }
.main_links a:hover { text-decoration: none; font-weight: bold;  color: #FF4500 }
.main_links a:active { text-decoration: none; font-weight: bold; color: #FF4500 }

Ich möchte für verschiedene Klassen verschiedene Link-Eigenschaften verwenden. So wie oben funktionieren zwar die Link-Eigenschaften, aber die erste Zeile wird ignoriert. Die ist ja eigentlich die wichtigste, deshalb kann ich auf die nicht verzichten

Wäre froh, wenn ihr mir zeigen könntet, wie ich dieses Problem löse.

Liebe Grüsse,
gasty

jojo87

in der ersten zeile fehlt die schliessende klammer

Gasty

Hm nene, die steht schon dort. Mein Terminal ist einfach nicht genug breit, deshalb hat es die abgeschnitte. Im Code ist sie aber drin, mit einem Leerschlag davor.

jojo87

versuch mal a.main_links

und wie krieg ich dann :link, :hover, :active und :visited rein ?:s

sejuma

Probier's mal so:

Code

.main_links {background-color: #000000; font-family: Arial, sans-serif; color: #FFFFFF; font-size: 12px; text-align: center;}
a.main_links:link, a.main_links:visited { text-decoration: none; color: #FFFFFF  }
a.main_links:hover { text-decoration: none; font-weight: bold;  color: #FF4500 }
a.main_links:active { text-decoration: none; font-weight: bold; color: #FF4500 }

hm ne, geht nicht... immernoch gleich wie vorher, das zeug schaut total verreckt aus weil die erste Zeile ignoriert wird.

sejuma

Bei mir funktioniert es:
Schwarzer background, weißer Text.

Hast du den kompletten CSS-Code von mir kopiert?
Kannst du mal einen Link reistellen?

jojo87

neuer Vorschlag:
pack diese links innen div und nenn den z.bsp. "links".
dan schreibste in der css immer

Code

#links a {
deine erste zeile
}


#links a:active {
}
etc.

geht das?

Hier die gesamte Ausgabe (hat noch php drin)

Code

<htm>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="FFFFFF">
<table border="1" width="100%" style="border-collapse: collapse" height="100%">
<tr>
<td class="filled_box" height="104" width="819" colspan="5">Banner</td>
<td class="news" height="104" width="159">Events News</td>
</tr>
<tr>
<td class="main_links"  height="33" width="16%">[url='index.php?content=home']Home[/url]</td>
<td class="main_links"  height="33" width="16%">[url='index.php?content=events']Events[/url]</td>


<td class="main_links"  height="33" width="16%">[url='index.php?content=band&sub=members']Band[/url]</td>
<td class="main_links"  height="33" width="16%">[url='index.php?content=media']Media[/url]</td>
<td class="main_links"  height="33" width="16%">[url='index.php?content=contact']Kontakt[/url]</td>
<td class="main_links"  height="33" width="20%">[url='index.php?content=speciallink']Special Link[/url]</td>
</tr>
<tr>
<td class="filled_box" width="16%" rowspan="2"></td>
<td class="main_content" width="507" colspan="3" rowspan="2">  <table border="1" width="100%" style="border-collapse: collapse" id="table1" height="246">
  <tr>
  <td class="table_leer" height="41" width="8%">8 p</td>


  <td class="table_inactive" height="41" width="16%">[url='index.php?content=band&sub=members']Members[/url]</td>
  <td class="table_active" height="41" width="16%">[url='index.php?content=band&sub=biografie']Biografie[/url]</td>
  <td class="table_leer" height="41" width="8%">8 p</td>
  </tr>
  <tr>
  <td colspan="4">content</td>
  </tr>


  </table>
  </td>
<td class="filled_box" width="16%" rowspan="2"></td>
<td class="side_bar" width="20%">Sidebar 1</td>
</tr>
<tr>
<td class="side_bar" width="20%">Sidebar 2</td>
</tr>
<tr>
<td class="copyright" height="25" width="978" colspan="6">31.7.2007|16:56:35|Copyright by: Michael Berli|[url='yourhand.ch']yourHand _webseiten[/url]</td>


</tr>
</table>




</body>
</html>

Alles anzeigen

Und hier das CSS-File:

Code

<style type="text/css">
.main_links {background-color: #000000; font-family: Arial, sans-serif; color: #FFFFFF; font-size: 12px; text-align: center;}
a.main_links:link, a.main_links:visited { text-decoration: none; color: #FFFFFF  }
a.main_links:hover { text-decoration: none; font-weight: bold;  color: #FF4500 }
a.main_links:active { text-decoration: none; font-weight: bold; color: #FF4500 }


.filled_box { background-color: #00001b; font-family: Arial, sans-serif; color: #FFFFFF; font-size: 12px; }


.main_content { background-color: #FFFFFF; font-family: Arial, sans-serif; color: #000000; font-size: 12px; vertical-align: top }


.side_bar { background-color: #00001b; font-family: Arial, sans-serif; color: #FFFFFF; font-size: 12px; vertical-align: top }


.news { background-color: #00001b; font-family: Arial, sans-serif; color: #FFFFFF; font-size: 12px; vertical-align: top; }


.copyright { background-color: #00001b; font-family: Arial, sans-serif; color: #FFFFFF; font-size: 12px; text-align: right }
.copyright a:link { text-decoration: underline; color: #FFFFFF }
.copyright a:visited { text-decoration: underline; color: #FFFFFF }
.copyright a:hover { text-decoration: underline; color: #FF4500 }


.table_active { background-color: #FF4500; }


.table_inactive { background-color: #000000; }


.table_leer { background-color: #FFFFFF; }






</style>

Alles anzeigen

Es geht um die LInks oben, also Home, Events, Band, Media... die LInks sind eben in der main_links klasse. Interessant ist, dass das Beispiel ganz unten (Datum und so) auf die Weise, die ich im ersten Post gegeben habe, funktioniert.

LIebe Grüsse und vielen Dank für Euren Aufwand!!!

jojo87

ok. Seh ich das richtig, dass du die angaben in einer extra css-datei hast?
Wenn ja, dann nimm da mal die <style> tags raus.
Vielleicht hilft das schon

sejuma

Das sollte helfen, Jojo.

jojo87

sejuma, weisst du, warum da trotzdem alle außer die erste Zeile interpretiert wurden?

wow, schaut schon viel besser aus wieso müssen diese tags dann raus?
die links funktionieren aber noch immer nicht richtig, nur der erste link, also home, wird korrekt angezeigt :s

jojo87

das style-tag ist für die direkte Einbindung im head gedacht und hat in einer css datei nichts zu suchen.
du muss die class main_link in den <a> tags vergeben und nicht in den tds.
bei home hastes richtig gemacht.

sejuma

Bei den anderen Links hast du keine Klasse angegeben.
Die Style-Tags werden nur benötigt, wenn man die CSS-Angaben im head-Bereich der HTML-Seite hat.

super, danke. es hat nun geklappt.
Tollm dass ihr so fleissig helft! Sehr vorbildlich.
gruss aus der schweiz.

Tags

Benutzer online in diesem Thema