1. Liebe Forumsgemeinde,

    aufgrund der Bestimmungen, die sich aus der DSGVO ergeben, müssten umfangreiche Anpassungen am Forum vorgenommen werden, die sich für uns nicht wirtschaftlich abbilden lassen. Daher haben wir uns entschlossen, das Forum in seiner aktuellen Form zu archivieren und online bereit zu stellen, jedoch keine Neuanmeldungen oder neuen Kommentare mehr zuzulassen. So ist sichergestellt, dass das gesammelte Wissen nicht verloren geht, und wir die Seite dennoch DSGVO-konform zur Verfügung stellen können.
    Dies wird in den nächsten Tagen umgesetzt.

    Ich danke allen, die sich in den letzten Jahren für Hilfesuchende und auch für das Forum selbst engagiert haben. Ich bin weiterhin für euch erreichbar unter tti(bei)pcwelt.de.
    Dismiss Notice

Link-Klasse mit css

Discussion in 'Web-Know-how für die Homepage' started by mannyk, Aug 18, 2006.

Thread Status:
Not open for further replies.
  1. mannyk

    mannyk Halbes Megabyte

    Hallo!
    Wie kann ich mehrere Link-Klassen erstellen (also dass nicht alle Links gleich aussehen)
    Ich wollte da so lösen:

    a:link { color:#3F1503 }
    a:visited { color:#3F1503 }
    a:active { color:#3F1503 }
    a:hover { color:#642006 }
    <a href="..">Gewöhnlicher Link</a>

    und

    a:link.extra { color:#AF1503 }
    a:visited.extra { color:#AF1503 }
    a:active.extra { color:#AF1503 }
    a:hover.extra { color:#A42006 }
    <a class="extra" href="..">Extra Link</a>

    Leider funktioniert das bei dem Extra Link so nicht.
    mfg,
    mannyk
     
    mannyk, Aug 18, 2006
    #1
  2. cyberwarrior

    cyberwarrior Kbyte

    Tausch mal Punkt und Doppelpunkt, also:

    HTML:
    A.ersterlink:link, A.zweiterlink:link u.s.w.
     
    cyberwarrior, Aug 18, 2006
    #2
  3. Mylin

    Mylin Viertel Gigabyte

    Für die .css:
    Code:
    a:link {
 font-weight: bold;
 color: blue;
 text-decoration: none;
}

a:visited {
 font-weight: bold;
 color: silver;
 text-decoration: none;
}
a:focus {
 font-weight: bold; 
 color: red; 
 text-decoration: underline;
}

a:hover {
 font-weight: bold;
 color: green;
 text-decoration: none;
}

a:active {
 font-weight: bold;
 color: lime;
 text-decoration: underline;
 }

#premium a:link {
  font-weight: normal;
  color: yellow;
  text-decoration: none;  
}
 
#premium a:visited {
  font-weight: bold;
  color: orange;
  text-decoration: none;
}
 
#premium a:focus {
  font-weight: bold;
  color: white;
  text-decoration: underline;
}
 
#premium a:hover{
  font-weight: bold;
  color: black;
  text-decoration: none;
}
 
#premium a:active {
  font-weight: bold;
  color: pink;
  text-decoration: underline;
}
    Für die .html:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"><title>Link-Klasse mit css</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>

<body>
<div id="premium"><a href="http://www.pcwelt.de/index.cfm?pid=571">PC-Welt Premium</a></div><br>
<a href="http://www.pcwelt.de">PC-Welt</a>
</body>
</html>
    Ja ne is klar.
     
    Mylin, Aug 18, 2006
    #3
  4. cyberwarrior

    cyberwarrior Kbyte

    Sag mal... Wieso einfach, wenns auch schwierig geht, oder was!? Den ganzen Code hättest Du Dir sparen können.

    Nochmal das CSS zum mitschreiben:

    HTML:
    A.ersterlink:link, A.ersterlink:visited, A.ersterlink:active {color:#000; background:#fff; text-decoration:none;}
A.ersterlink:hover {color:blue; background:#fff; text-decoration: underline;}

A.zweiterlink:link, A.zweiterlink:visited, A.zweiterlink:active {color:#000; background:#fff; text-decoration:none;}
A.zweiterlink:hover {color:red; background:#fff; text-decoration: underline;}
     
    cyberwarrior, Aug 18, 2006
    #4
  5. kalweit

    kalweit Hüter der Glaskugel

    Naja, oder man arbeitet mit geschachtelten CSS-Elementen. Dann lässt sich zum Beispiel ein kompletter Container inkl. Kindelemente formatieren, ohne auf bestimmte Klassenbezeichnungen angewiesen zu sein. Das ist besonders dann von Vorteil, wenn man seinen Content direkt in HTML bzw. einem entsprechenden DHTML - Editor online schreibt und ein nachträgliches Ändern des Designs auch die Klassennamen durcheinander wirbeln würde.

    Code:
    <div class="menu">
<a href="seite1.html">Seite 1</a>
<a href="seite1.html">Seite 1</a>
</div>
    Code:
    div.menu {
... -> zur Formatierung des Containers
}

div. menu a {
... -> zur Formatierung eines Links im Container
}
    Das Ganze funktioniert mit beliebigen Elementen in unbegrenzten Ebenen.
     
    kalweit, Aug 18, 2006
    #5
  6. Mylin

    Mylin Viertel Gigabyte

    @cyberwarrior
    Schwierig würde ich das nicht nennen, eher klassisch. OK die Link-Formatierung hätte ich zusammenfassen können (nach den Farbangaben des TO).
    Leider kann ich deiner Vorgenhensweise nicht ganz folgen.
    Wie wird die Formatierung den Links zugewiesen?

    @cyberwarrior @kalweit
    Ich hab das Gefühl ihr formatiert direkt in der .html. Meiner Meinung nach ist das zu unflexibel, da die Formatierung nur für diese Seite gilt. Also neue Seite neue Formatierung und das zieht doch unnötig den Quellcode in die Länge. Klärt mich auf.
     
    Mylin, Aug 18, 2006
    #6
  7. kalweit

    kalweit Hüter der Glaskugel

    ...nur wenn die Erzeugung der Formatierung dynamisch erfolgen muss -> spart Zugriffe auf das Dateisystem des Servers ;) - Obiges soll nur das WIE und nicht das WO zeigen.
     
    kalweit, Aug 18, 2006
    #7
  8. Mylin

    Mylin Viertel Gigabyte

    Klar, aber eine Präsenz hat doch eher ein einhaltliches Layout.
    :grübel: da war doch was:
    Ist das WO jetzt nicht doch wichtig?
     
    Mylin, Aug 18, 2006
    #8
  9. kalweit

    kalweit Hüter der Glaskugel

    Ich rede nicht vom Layout einer Seite, sondern der Formatierung einzelner Elemente. Und diese kann sehr wohl dynamisch erfolgen - z.B. wenn man dem User die Möglichkeit gibt, bestimmte Elemente selbst anzupassen -> ausblenden bestimmter Bereiche, Schriftgröße, Schrift- und Hintergrundfarben u.ä.

    Um die Frage des TO zu beantworten - nö. Nichts desto trotz gilt natürlich die zitierte Aussage. Es steht da ja auch "die häufigst verwendete Methode" und nicht "die einzig verwendete Methode".
     
    kalweit, Aug 18, 2006
    #9
  10. cyberwarrior

    cyberwarrior Kbyte

    sollte sich doch eigentlich von selbst erklären...: :grübel:

    HTML:
    <a class="ersterlink" href="#">Erster Link</a>
<a class="zweiterlink" href="#">Zweiter Link</a>
     
    cyberwarrior, Aug 19, 2006
    #10
  11. Mylin

    Mylin Viertel Gigabyte

    Brett vorm Kopf und keine Referenz gefunden.

    Ist die Schreibweise W3C-konform? Egal, werd mal meine Codes, auf Vorteile dieser Schreibweise, überprüfen. Danke!
     
    Mylin, Aug 19, 2006
    #11
Thread Status:
Not open for further replies.

Share This Page