Linkfarben pro style bei CSS individuell

Computer: Software & Programmierung HTML & CSS
#1

Hallo,

versuche mich gerade etwas „weiter zu entwickeln“ und mal vorsichtig eine Seite auf CSS umzustellen und komme dabei mit folgendem Problem nicht weiter:

Ich habe auf einer Seite mehrere farbige Bereiche (momentan noch mit Hintergrundfarbe versehende Tabellenzellen, DIVs sind mein nächster Bildungsausflug). Pro Bereich habe ich (momentan noch im Seitenkopf) einen Style definiert, der u.a. die Textfarbe bestimmt. Jetzt soll außerdem für jeden dieser Styles eine eigene Definition der Link-Farben erfolgen, damit diese zur Hintergrundfarbe passen.

Eine entsprechende Styledefinition sieht für einen Navigationsbereich mit petrolblauem Text in einheitlich großen hellblauen Kästchen momentan so aus

.menu\_item\_main\_nav 
{ 
border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF;
margin-top: 0; margin-bottom: 0;
padding-left: 4; padding-right: 4; padding-top: 6; padding-bottom: 6;
background-color: #76CFF4;
font-family: Verdana; font-size: 10pt; font-weight:bold; color: #003750;
text-align: left; word-spacing: 0;
A:ACTIVE {Color: #9B4E00; Text-Decoration: none;}; 
A:LINK {Color: #003750; Text-Decoration: none;};
A:VISITED {Color: #000000; Text-Decoration: none;};
}

schreibe ich einen einfachen Absatz

 Finanzen

klappt die Sache wunderbar.

Aber mit den Links will es einfach nicht funktionieren.

[Familien](erfolgreich_familien.htm)

macht zwar den Kasten in voller Zellenbreite, interessiert sich aber nicht für die Linkfarben und die ausgeschaltete Unterstreichung, und

[Wirtschaft](erfolgreich_wirtschaft.htm)

baut den Kasten nur in Textbreite und interessiert sich ebenfalls nicht für die Linkfarben und die ausgeschaltete Unterstreichung.

Getestet habe ich bislang mit dem IE6 (aktueller Patchlevel), der auch auf jeden Fall unterstützt werden muss. Hinweise auf „Geht mit Firefox wunderbar“, helfen also nicht,

Woran liegt es? Kann doch eigentlich nicht so schwer sein, oder?

BTW: Welche erfolgreiche und einfache Strategie gibt es, ein tabellenorientiertes Layout auf DIVs umzustellen. Irgendwie habe ich noch Verständnisschwierigkeiten mit den Positionen und dem Textfluss.

Gruß vom Wiz

#2

Kleine Ergänzung
Hallo nochmal,

der Text ließt sich bzgl. der farbigen Tabellenzellen ggf. so, als ob diese Menüpunkte auch in jeweils eigenen Zellen mit farbigem Hintergrund befinden würden. Dem ich nicht so. Ich will durch den Style-Einsatz gerade dies verhindern. D.h. alle Menüpunkte stehen gemeinsam untereinander in einer Zelle (ohne Hintergrund). Der Style soll dafür sorgen, dass die einzelnen Links wie Tabellenzellen aussehen, was er auch tut, solange ich keine Links setze.

Gruß vom Wiz

#3

Hallo,

ist nicht ganz mein Gebiet aber versuch mal anstelle von

A:ACTIVE {Color: #9B4E00; Text-Decoration: none;};
A:LINK {Color: #003750; Text-Decoration: none;};
A:VISITED {Color: #000000; Text-Decoration: none;};

diese Zeilen

A:ACTIVE {Color: #9B4E00; Text-Decoration: none};
A:LINK {Color: #003750; Text-Decoration: none};
A:VISITED {Color: #000000; Text-Decoration: none};

Hier noch zwei Links die vielleicht weiterhelfen
http://www.selfhtml.net/
http://www.css4you.de/

viele Grüße
Martin

http://www.internetdienste24.com - kostenlose Homepage und kostenloses Promotion System !

#4

Hallo,

Danke für den Versuch, aber leider nein, das Semikolon am Schluss macht keinen Unterschied.

Gruß vom Wiz

#5

Hallo Wiz,

Du kannst nicht das CSS für die Elemente ‚a‘ in die CSS-Definition einer Klasse packen. So sollte es funktionieren:

.menu\_item\_main\_nav { 
 border-top:1px solid #FFFFFF; border-bottom:1px solid #FFFFFF;
 margin-top: 0; margin-bottom: 0;
 padding: 6px 4px 6px 4px;
 background-color: #76CFF4;
 font: bold 10pt Verdana, Helvetica, sans-serif;
 color: #003750;
 text-align: left; word-spacing: 0;
}
.menu\_item\_main\_nav a:active {Color: #9B4E00; Text-Decoration: none;} 
.menu\_item\_main\_nav a:link {Color: #003750; Text-Decoration: none;}
.menu\_item\_main\_nav a:visited {Color: #000000; Text-Decoration: none;}

BTW: Welche erfolgreiche und einfache Strategie gibt es, ein
tabellenorientiertes Layout auf DIVs umzustellen.

Keine. :smile: Die Konzepte sind völlig anders, nicht alles lässt sich 1:1 umstellen, man muss umdenken lernen.

Irgendwie habe ich noch Verständnisschwierigkeiten mit den Positionen
und dem Textfluss.

http://www.css4you.de
http://www.css-technik.de
… ums Lernen wirst Du nicht herumkommen :smile:

Viel Spaß,
Rudy

#6

Hallo,

versuch doch noch
A:HOVER {Color: #000000; Text-Decoration: none;};

Gibt es eine Seite wo man das sehen kann? Hilft vieleicht weiter wenn man selber testen kann.

viele Grüße
Martin

http://www.internetdienste24.com - kostenlose Homepage und kostenloses Promotion System !

#7

Denke ich hab das Problem. Die Links müssen anders aufgebaut werden.

.title A:ACTIVE {
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
margin-top: 0;
margin-bottom: 0;
padding-left: 4;
padding-right: 4;
padding-top: 6;
padding-bottom: 6;
background-color: #76CFF4;
font-family: Verdana;
font-size: 10pt;
font-weight:bold;
color: #003750;
text-align: left;
word-spacing: 0;
Color: #9B4E00;
Text-Decoration: none
}

.title A:VISIT {
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
margin-top: 0;
margin-bottom: 0;
padding-left: 4;
padding-right: 4;
padding-top: 6;
padding-bottom: 6;
background-color: #76CFF4;
font-family: Verdana;
font-size: 10pt;
font-weight:bold;
color: #003750;
text-align: left;
word-spacing: 0;
Color: #9B4E00;
Text-Decoration: none
}

.title A:HOVER {
border-top:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
margin-top: 0;
margin-bottom: 0;
padding-left: 4;
padding-right: 4;
padding-top: 6;
padding-bottom: 6;
background-color: #76CFF4;
font-family: Verdana;
font-size: 10pt;
font-weight:bold;
color: #003750;
text-align: left;
word-spacing: 0;
Color: #9B4E00;
Text-Decoration: none
}

Danach bei den Links class=„title“ oder bei den Tabelle class=„title“ einfugen.

viele Grüße
Martin

http://www.internetdienste24.com - kostenlose Homepage und kostenloses Promotion System !

#8

Besten Dank, so funktioniert es owT