CSS: Mehrere Linkeigenschaften

[Zoppix]

Hallo Leute!

Ich habe mal eine Frage zum Thema CSS.
Man kann ja in einer CSS Datei verschiedene Texteigenschaften speichern. Z.b. "text" , "text_groß" und so weiter und denen kann man dann die jeweiligen Eigenschaften zuweisen, ob sie fett oder klein angezeigt werden sollen.

Sowas kann man doch bestimmt auch mit den Links machen die man hat! Nur wie erstelle ich verschiedene Eigenschaften die ich dann den Links zuweisen kann? Könnt euch ja mal die Grafik angucken. Ich hoffe ihr habt mein Problem verstanden!

Danke!

[Jupp]

a{css-code} trifft auf alle <a> tags zu. hier kannst du angaben wie font-family usw. notieren, um links zu formatieren. es gibt noch weitere eigenschaften, z.b. a:hover{} (link mit maus drüber). schau doch mal hier nach: http://de.selfhtml.org/navigation/cs...ntrale_formate

[Zoppix]

Heißt das, dass ich unter dem Begriff "a" diese linkeigenschaften speichern kann?
Also dann zum Beispiel unter "b" das nächste Linkaussehen und unter "c" und so weiter...


//NACHTRAG//

Mir geht es einfach nur darum, dass ich nicht immer nur Links habe die ALLE gleich aussehen. Ich will auch welche haben, die mal größer mal kleiner sind, oder andere Farben haben! Nur ich weiß nicht, wie ich das mache das ich dann zwischen diesen verschieden Eigenschaften auswählen kann.

[Jupp]

das geht so z.b.:

a.mail{}
a.mail:hover{}
a.mail:active{}

usw...

und dann

<a href="#" class="mail">Link</a>

zur erläuterung: das "a" deutet an, dass sich die css-definiton nur auf das html-element "a" bezieht (d.h. also nur auf verweise). danach kannst du dir einen namen aussuchen (im beispiel "mail"). mit 'class="name"' weist du dann dem jeweiligen link diese klasse zu.

[webmichl]

Die Standarddefinition ist - wie Jupp richtig sagt - a { eigenschaften }. Diese kann dann noch unterschieden werden in a:visited ( schon besucht ), a:hover ( beim Mausdrüberfahren ) und a:active ( gerader aktiver Link - den Effekt kriegt man aber äusserst selten mit ).

Wenn das nicht langt: Du kannst auch für Links unterschiedliche Klassen definieren. Das sieht dann zB so aus:

a.ganzwichtig { color: red; }

Und auch hier wirken die Eigenschaftsdefinitionen:
a.ganzwichtig:hover { font-weight: bold }

Angesprochen wirds wie jede andere CSS-Klasse:

<a href="kaufen.htm" class="ganzwichtig">Kaufen!</a>

[Zoppix]

Nach langem Hin und Her hab ich es geschafft!!!
Das ist jetzt sogar genau so, wie ich es mir vorgestellt habe!

Wenn mir jetzt noch einer sagt, wie ich den Thread als "Erledigt" kennzeichnen kann, bin ich für heute wunschlos glücklich! (Beim alten Forum war das einfacher...)

[DarkLord]

Tach auch!

Da habe ich auch mal eijne Frage:

Mit Hover ist das Ja kein Problem,
aber ich habe bei meinem Breufs-Praktikum erfahren
dass mall auch Links machen kann mit zB. Blauem
Text, und gelber Linie drunter! Da frage ich ihn wie,
und er sagt: "Mit den Division Tags"

Also habe ich gesucht und gesucht, aber ich habe
echt nichts gefunden!

Ob Ihr mir dabei helfen könntet?

Bis Denne

E-Lord

[webmichl]

Falls "er" damit <DIV>-Container meint, kannst Du ihm sagen, daß es auch einfacher geht:

<style type="text/css">
   <!-- 
   a { color: blue; text-decoration: none; }
   a:hover { border-bottom: 1px solid yellow; } 
   -->
   </style>

EDIT

Seh gerade, daß Du den Effekt dauernd haben willst (?) - dann nimm die border-Anweisung mit in die normale Definition und werf die hover-Klasse wech...

[Zoppix]

Ist echt schön was man mit CSS zaubern kann. Und alles auf Textbasis, echt geil!
Aber wie markiere ich jetzt einen Thread als Erledigt! Früher ging das doch auch!

[webmichl]

schreib "erledigt" drunter....

[Dust]

"Mit den Division Tags"

meinet er
a {/*eigenschaften ohen efekt*/}

/*mouse over efekt*/

a:hover {
color:#0000ff;
border-bottom:1px yellow solid;
}

wenn du dann das z.B div etwa 150 px breit ist, dann musst du dem a:hover ein disply:block; mitgeben damit sich diese efekt im ganzen div breitmacht und nicht nur die schrift hervorgehoben wird... (genauso wenn die schrift 12 px gross ist aber das darüberlinegene element z.b 25px hoch ist)

besser nachzu lesen unter den psoydo elementen in selfhtml...

[DarkLord]

Cool, danke!

Aber da habe ich dann noch eine Frage:

Ich habe mal auf einer Homepage gesehen, welche ich jetzt
auch nicht mehr weiß, dass eine Person in einem Division Tag
welcher glaube so ca. 200px breit war ein Menu mit Links gehabt,
welche beim Mouseover eine Hintergrundfarbe hatten, welche
sich vom anfang des Div's bis zum ende durchgezogen haben!
Also ein Background-color:... aber dass der Hintergrund über den
Link hinaus ging!

Bis Denne

DarkLord

[Dust]

ich kann mir vorstellen wenn es genau 2px drüber steht dann liegt das vieleicht an dem borde (siehe unten)...
wenn es mehr sind dann kann es sein das dem drunterliegendem element einfach eine grössere pix zahl gegeben wurde...
aber ehlich gesagt kein schöner efekt...

oder meinst das sich der efekt über das ganze element aus gebreitet hatte, dann brauchst du nur display:block; in die a class zu tun...

<div class="a">
<a href="#" class="b">bla</a>
</div>

div.a{
width:200px;
height:25px;
backgroung-color:#aaaaaa;

}

a:hover.b{
width:25px;
height:200px;
border:1px #solid #00ff00;
background-color:#123456;
}

[Pulli]

Heißt das, dass ich unter dem Begriff "a" diese linkeigenschaften speichern kann?
Also dann zum Beispiel unter "b" das nächste Linkaussehen und unter "c" und so weiter...

Nein, das a steht für die allgemeine Definition "a href...". Da packst du rein was bei Links immer gleich ist. Wenn das nicht zutrifft dann machst du es eben speziell.

[Dust]

aber die bedeutung des punktes und lehrzeichen ist klar ?