Verschieden Linkfarben in einer CSS Datei

nikel · 24 November 2004

Hallo ihr gurus,

ich habe ein problem und zwar mÃ¶chte ich ein menu haben wo die links schwarz und 18 punkte sind. alle anderen links auf der seite sollen blau und 10 punkt groÃŸ sein.

ist das mÃ¶glich?

ich kann a:link, a:hover, usw nur einmal definieren. Da mÃ¼sste es doch einen weg geben.

danke fÃ¼r eure mÃ¼hen, nik

SolCom · 24 November 2004

du kannst verschiedene classen definieren.

Code:

 a.karte:link    { background-color : transparent ; color : #585858 ; }
 a.karte:visited { background-color : transparent ; color : #C0C0C0 ; }
 a.karte:hover   { background-color : transparent ; color : #FFFF00 ; }

damit hast du eine classe names "karte" und wenn du einen link so makierst

Code:

<a class="karte" ...............

werden die anderen einstellungen Ã¼berschrieben.

feyyaz · 24 November 2004

SolCom's antwort ist genau richtig. Nur musst du dann jedem link die klasse zuweisen.

Wenn du aber bereiche hast wie Navigation & Hauptseite, dann empfehle ich

Code:

.Navigation {bla..bla}; // definiere hier ganz normal die optik deiner Navigation
.Hauptseite {bla..bla}; // definiere hier ganz normal die optik deiner  Hauptseite

// jetzt richten wir die links in den bereichen ein. In der Navigation haben
// wir nur zwei zu stÃ¤nde: selektiert und nicht selektiert. der Status
// besucht soll nicht unterschieden werde.
.Navigation a:link, .Navigation a:visited {color : #000000;};
.Navigation a:hover {color : #FFFFFF;};

// Hauptmenu soll auch "besucht" anzeigen
.Navigation a:link {color : #000000;};
.Navigation a:visited {color : #666666;};
.Navigation a:hover {color : #FFFFFF;};

je nach anwendung haben die beiden versionen ihre vor und nachteile.

nikel · 24 November 2004

cool, das ging ja zÃ¼gig. habe es gerade ausprobiert und beides funktioniert einwandfrei. danke euch beiden.

der nik

SolCom · 24 November 2004

du kommst auch nicht gerade zeitig ins bett :)

virtuellesNugat · 24 November 2004

eine weitere MÃ¶glichkeit wÃ¤re noch

Code:

a:hover#navbar {...}
a:hover#main {...}

und dann statt "class" mit "ID" arbeiten. Ich weiÃŸ allerdings nciht genau, ob das nciht mit class auch geht, aber ich kÃ¶nnte es mir gut vorstellen ;)

SolCom · 24 November 2004

das ELEMENT "name" von HTML wird bei XHTML durch "id" ersetzt.
und da "class" & "name" bzw "id" verschiedene funktionen haben kann die aussage und dann statt "class" mit "ID" arbeiten nicht richtig sein.

SolCom · 24 November 2004

vielleicht funktioniert es doch :)

was muÃŸ ich machen um mehrere links mit dieser methode zu formatieren ?

virtuellesNugat · 24 November 2004

Also ich hab es ausprobiert, die Methode funktioniert nur mit ID ...

SolCom · 24 November 2004

ich habe doch im letzten post geschrieben : vielleicht funktioniert es doch :)

aber ich habe ein problem, wenn ich 2 links mit "id" versehe

Code:

<td><a id="nav" title="Neues Forum rund um HTML.......
<td><a id="nav" title="SolComÂ´s Fa, bekomme ich.......

bekomme ich vom Validator folgende fehlermeldung

Code:

D:\SolCom\Internet\SolCom.info\Homepage\index.html, Line 45, Character 15: 
ID nav already defined

D:\SolCom\Internet\SolCom.info\Homepage\index.html, Line 44, Character 15: 
ID nav first defined here

feyyaz · 25 November 2004

was fÃ¼r hacks macht ihr denn da, id steht fÃ¼r identifikation. wie soll ich den z.B. zwei Personalausweise unterscheiden, wenn beide die gleiche peronal nummer haben. welchen daten wÃ¼rde der computer ausspucken wenn ich die nummer eingebe. NatÃ¼rlich den ersten in der reihe den anderen wÃ¼rde ich nicht mehr finden.

ID ist ein feld um die tags 100%tig von einander unterscheiden zu kÃ¶nnen. Also nicht fÃ¼r styles missbrauchen.

SolCom · 25 November 2004

ich kann nicht behaupten das ich CSS aus dem FF kann. daher bin ich ersteinmal fÃ¼r alles offen das den anschein hat das es funktioniert. darunter fÃ¤llt das ich vom css-validator fÃ¼r

Code:

a:hover#navbar {...} 
a:hover#main {...}

keine fehlermeldung bekomme und bei dem schreiben folgenden codes

Code:

<td><a id="nav" title="Neues Forum rund um HTML....... 
<td><a id="nav" title="SolComÂ´s Fa, bekomme ich.......

ein ergebnis bekomme das funktioniert, aber bei mehreren links die genannte fehlermeldung bringt (was fÃ¼r mich logisch ist) daher meine frage was virtuellesNugat dagegen unternimmt bzw wie er es sonst handhabt. und dann hÃ¤tte ich ihn vielleicht Ã¼berzeugen kÃ¶nnen das er diese variante nicht mehr benutzt.

feyyaz · 25 November 2004

Diese variante ist ok wenn man einzelne links identifizieren mÃ¶chte. mann kann dann auch diesem einen link eine farbe zu weisen, aber halt nur fÃ¼r diesen einen link. will er die farbzuweisung mehreren links zuweise, muss er style="..." verwenden.

@ SolCom:
@ fÃ¼r dein verstÃ¤ndnis. was wÃ¼rde in dem fall der verschiedenen CSS-Varianten
@ passieren, wenn wir zwei alternating styls den gleichen namen zuweisen wÃ¼rden?
@ der name ist dafÃ¼r da die eine und nur die eine style datei zu identifiezieren.
@ genau so arbeitet auch ID.

SolCom · 25 November 2004

die funktion von "id" ist mir bekannt, wie ich schon geschrieben habe

das ELEMENT "name" von HTML wird bei XHTML durch "id" ersetzt.
und da "class" & "name" bzw "id" verschiedene funktionen haben kann die aussage und dann statt "class" mit "ID" arbeiten nicht richtig sein.

meine nÃ¤chste behauptung :

vielleicht funktioniert es doch :)

wird ja auch von dir getragen :)

Diese variante ist ok wenn man einzelne links identifizieren mÃ¶chte.

und somit festgestellt das die sache unproduktiv ist.

virtuellesNugat · 28 November 2004

Also, diese Variante funktioniert nur, wenn du dann auch wirklich zwei verschiedene links hast, die aber die selben Eigentschaften haben sollen. Damit kann man so einiges machen. Allerdings musst du fÃ¼r verschiedene Effekte logischerweise eine andere ID definieren.

Hier mein Beispiel:

Code:

td#navtop {
background-image:url(Menu_01.gif);
width: "199";
height: "65";
}
td#nav {
background-image:url(Menu_02.gif);
width: "199";
height: "25";
text-align: center;
}
td#navbottom {
background-image:url(Menu_03.gif);
width: "199";
height: "21";
}

Und dann in der Datei:

Code:

<table cellpadding="0" cellspacing="0" width="199">
<tr>
<td id="navtop"></td>
</tr>
<tr>
<td id="nav">[url="http://www.web.de"]Web.de[/url]</td>
</tr>
<tr>
<td id="nav">[url="http://www.gmx.de"]GMX.de[/url]</td>
</tr>
<tr>
<td id="nav">[url="http://www.nugat.rockt.de"]nugat[/url]</td>
</tr>
<tr>
<td id="navbottom"></td>
</tr>
</table>

Je nach dem was du machen willst.

Und bei einem link geht es genauso.

Beispiel:

Code:

a#blau {
 font-family: Verdana;
 font-size: smaller;
 color: #0000FF;
 text-decoration: none;
}
a#rot {
 font-family: Verdana;
 font-size: smaller;
 color: #FF0000;
 text-decoration: none;
}

Und dann in der HTML Datei:

Code:

[url="..."]Dieser link ist blau[/url]
[url="..."]Dieser link ist rot[/url]

virtuellesNugat · 28 November 2004

Allerdings funktioniert das oben mit der Tabelle leider nur im IE, von dem was ich bis jetzt getestet habe, auch Opera hat versagt... schade eigentlcih, dann werde ich meine Homepage wohl anders gestalten mÃ¼ssen...

SolCom · 28 November 2004

du hast was Ã¼bersehen :), der sinn des attributes "id" ist :

selfhtml :
Ein dateiweit eindeutiger Bezeichnername fÃ¼r ein Element - wenn Sie Elemente damit auszeichnen, sollten Sie keinen id-Namen innerhalb einer HTML-Datei mehr als einmal vergeben.

und bei dir sind gleich 3 td-elemente mit der selben id="nav" ausgezeichnet und das ist nicht erlaubt.
das es mit IE funktioniert ist ein allgemeines problem bei browsern, das sie einige fehler durchgehen lassen
und versuchen das ganze so zu interpretieren wie der autor es sich gedacht hat.

PS: 2 postÂ´s innerhalb kurzer zeit sind nicht unbedingt notwendig, es gibt eine editorfunktion im forum :)

virtuellesNugat · 28 November 2004

Oops, sorry, stimmt.

Naja, ich muss mich mal nach einer Alternative umsehen, aber ich will ganz gerne, dass ich die Pfadangaben nur in der CSS Datei habe... wÃ¤re eindeutig cooler finde ich... weil es dann ziemlich easy ist ein neues Design zu erstellen und den Content zu behalten, bzw. zwei alternative Designs...

feyyaz · 28 November 2004

das mit der alternative haben wir doch schon geklÃ¤rt. hier nochmal die lÃ¶sung bezogen auf deine code beispiele

Code:

.navtop {
background-image:url(Menu_01.gif);
width: "199";
height: "65";
}
.nav {
background-image:url(Menu_02.gif);
width: "199";
height: "25";
text-align: center;
}
.navbottom {
background-image:url(Menu_03.gif);
width: "199";
height: "21";
}

Und dann in der Datei:

Code:

<table cellpadding="0" cellspacing="0" width="199">
 <tr>
  <td class="navtop"> </td>
 </tr>
 <tr>
  <td class="nav">[url="http://www.web.de"]Web.de[/url]</td>
 </tr>
 <tr>
  <td class="nav">[url="http://www.gmx.de"]GMX.de[/url]</td>
 </tr>
 <tr>
  <td class="nav">[url="http://www.nugat.rockt.de"]nugat[/url]</td>
 </tr>
 <tr>
  <td class="navbottom"> </td>
 </tr>
</table>

das ist alles, 100% das gleiche wie in deiner version, nur konform zur css definition.

virtuellesNugat · 29 November 2004

Jo, fett, danke!
Ich sitze hier grade inner Schule im Informatikunterricht und bin schon lange mit der Aufgabe fertig gg

Naja, jetzt wollte ich mal wissen wie es bei meinem Style aussieht. Ich frage mich wie ich zwei verschiedene Skins anbieten kann, via 2 verschiedener CSS Dateien. Eigentlcih sollte das ja ziemlich einfach gehen. Aber ich frage mich wie ich es hinkriegen soll ohne jede Datei zweifach zu verÃ¤ndern um die verschiedenen stylesheets anzugeben. Eigentlich sollte das mit php machbar sein, allerdings kann ich das nicht ;) Es mÃ¼sste also eine Variable, nennen wir sie mal "skin" und wenn man dann auswÃ¤hlt bekommt man skin 1 und 2 zu wÃ¤hlen. Je nach dem was der User drÃ¼ckt wird skin=1 oder skin=2 zugewiesen. Danach sollen dann in den Dateien die CSS Stylesheets angegeben werden. Nur die html Dateien will ich da nicht verÃ¤ndern

Also wenn einer von euch die LÃ¶sung weiÃŸ und sie mir sagen kann wÃ¤r das echt mal ne fette Sache, ich glaube nicht, dass ich das kÃ¶nnte, aufgrund meines mangelnden Wissen in php.

Verschieden Linkfarben in einer CSS Datei

Neues Mitglied

Mitglied

Neues Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Neues Mitglied

Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied