CSS: Mehrere Linkeigenschaften

  • 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! :)

  • 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.

  • das geht so z.b.:

    HTML
    1. a.mail{}
    2. a.mail:hover{}
    3. a.mail:active{}


    usw...

    und dann

    HTML
    1. <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.

    bemsen.de


    GCM d- s: a-- C++$ UL P L+ E--- W++ N o? K- w+ !O !M !V PS+ PE Y PGP- t+ 5? X R- tv- b- DI- !D G e h! r++ z?

  • 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>

    Gruß, der Michl



    * * * if you want them to RTFM, make a better FM! * * *

  • Nach langem Hin und Her hab ich es geschafft!!! :D
    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...)

  • 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

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

    Code
    1. <style type="text/css">
    2. <!--
    3. a { color: blue; text-decoration: none; }
    4. a:hover { border-bottom: 1px solid yellow; }
    5. -->
    6. </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...[/edit]

    Gruß, der Michl



    * * * if you want them to RTFM, make a better FM! * * *

  • Zitat

    "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...

    GIT(in education) dx s--:+ a-- C++ UL+++ P+ L++ E-- W+++ N* o+ K- w-- O- M- V- PS++ PE++ Y PGP- t++ 5- X++ R+ tv+ b++ DI-- D G+++ e h- r- x+


    interested in some fun?

  • 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

  • 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;
    }

    GIT(in education) dx s--:+ a-- C++ UL+++ P+ L++ E-- W+++ N* o+ K- w-- O- M- V- PS++ PE++ Y PGP- t++ 5- X++ R+ tv+ b++ DI-- D G+++ e h- r- x+


    interested in some fun?

  • Zitat von 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...


    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.