10 berichten aan het bekijken - 1 tot 10 (van in totaal 10)
  • Q:
    Bijdrager
    Kyokushinkai

    CSS hulp gevraagd (opgelost)

    Ok, ik heb even een beetje hulp nodig. Ik heb op 1 pagina zwarte en witte links nodig. Ik heb even geprobeerd dit met Dreamweaver te doen. Die maakt de links keurig de juiste kleur, maar ik wil graag dat de link oplicht wanneer je er met de muis overheen gaat. Hoe doe ik dat? Ik heb nu dus:
    [code:1:416f38f4bd]
    <style type="text/css">
    <!–
    .style1 {color: #FFFFFF; text-decoration: none}
    .style2 {color: #000000; text-decoration: none}

    –>
    </style>
    [/code:1:416f38f4bd]
    Kan ik deze code er misschien op een of andere manier in verwerken?:
    [code:1:416f38f4bd]
    a:hover { font-family: verdana; color: #AAAAAA; text-decoration: none}
    a:hover { font-family: verdana; color: #555555; text-decoration: none}
    [/code:1:416f38f4bd]

    Alvast bedankt.

    Bijdrager
    freshface

    .style1 a:hover {color: #FFF; text-decoration: none;}
    .style2 a:hover {color: #000; text-decoration: none;}

    En dan zo gebruiken:

    <span class=”style1><a href=””>bla</a></span>
    <span class=”style2><a href=””>bla</a></span>

    Bijdrager
    Berend

    a:link {color: #333333; text-decoration: none}
    a:visited {color: #333333; text-decoration: none}
    a:hover {color: #FFFFFF; text-decoration: underline}

    Bijdrager
    Kyokushinkai
    ”konijn”

    <style type=”text/css”>
    <!–
    .style1 {color: #FFFFFF; text-decoration: none}
    .style2 {color: #000000; text-decoration: none}
    .style1 a:hover {color: #FFF; text-decoration: none;}
    .style2 a:hover {color: #000; text-decoration: none;}

    –>
    </style>

    <span class=”style1><a href=””>bla</a></span>
    <span class=”style2><a href=””>bla</a></span>

    Dus zo?

    Bijdrager
    Kyokushinkai
    ”Berend”

    a:link {color: #333333; text-decoration: none}
    a:visited {color: #333333; text-decoration: none}
    a:hover {color: #FFFFFF; text-decoration: underline}

    Die heb ik inderdaad, alleen moet dat waarschijnlijk dus aan zo’n style worden toegepast.

    Bijdrager
    Kyokushinkai

    [edit]Foute oplossing verwijderd[/edit]

    Ik heb inmiddels hier de juiste oplossing gevonden:
    [code:1:d9550f4364]
    <html>
    <head>
    <style type="text/css">
    .class1 A:link {text-decoration: none color: #FFFFFF;}
    .class1 A:visited {text-decoration: none color: #FFFFFF;}
    .class1 A:active {text-decoration: none color: #FFFFFF;}
    .class1 A:hover {text-decoration: underline; color: #CCCCCC;}

    .class2 A:link {text-decoration: none; color: #000000;}
    .class2 A:visited {text-decoration: none; color: #000000;}
    .class2 A:active {text-decoration: none; color: #000000;}
    .class2 A:hover {text-decoration: none; color: #333333;}
    </style>
    </head>

    <body>
    ONE TYPE OF LINKS
    <br>
    <span class="class1">
    <a href="http://www.yahoo.com">YAHOO</a>
    <br>
    <a href="http://www.google.com">GOOGLE</a>
    </span>
    <br>
    <br>
    ANOTHER TYPE OF LINKS
    <br>
    <span class="class2">
    <a href="http://www.yahoo.com">YAHOO</a>
    <br>
    <a href="http://www.google.com">GOOGLE</a>
    </span>
    </body>
    </html>
    [/code:1:d9550f4364]

    Bijdrager
    Remco Vermeer

    Dit lijkt me korter

    [code:1:2bb0d3001e]
    <a href="" class="style1">bla</a>
    <a href="" class="style2">bla</a>
    [/code:1:2bb0d3001e]

    [code:1:2bb0d3001e]
    <style type="text/css">
    <!–
    a.style1 {color: #FFFFFF; text-decoration: none} a.style2:hover {color: #FFF; text-decoration: none;}
    a.style2 {color: #000000; text-decoration: none} a.style2:hover {color: #000; text-decoration: none;}
    –>
    </style>
    [/code:1:2bb0d3001e]

    scheelt je weer een span

    Bijdrager
    rburgt

    Als je de kleur van de links toch niet veranderren zou ik het zo doen:

    [code:1:d5091cea48]
    <style type="text/css">
    <!–
    a.style1:link,
    a.style1:hover {
    color: #FFFFFF;
    text-decoration: none
    }
    a.style2:link,
    a.style2:hover {
    color: #000000;
    text-decoration: none
    }
    –>
    </style>
    [/code:1:d5091cea48]

    Bijdrager
    Kyokushinkai

    @ Remco Vermeer

    Klopt, maar ik heb als voorbeeld maar 2 links genomen terwijl er in het echt veel meer links komen. Die heb ik tussen de span gezet.

    @ rburgt

    kleur van de links veranderd wel.

    Bijdrager
    tennapel

    Als je groepen links wilt maken kan je beter kiezen voor een HTML oplossing die meer recht doet aan het het feit dat ze gegroeperd zijn (en dus ook zonder CSS opmaak makkelijker herkenbaar zijn), door iedere groep als een ul-lijst weer te geven.

    Aan de ul kan je een id hangen, waarmee je de kleuren voor iedere groep kan regelen.

    ps: voor dat je met het argument komt dat iedereen tegenwoordig een browser met CSS ondersteuning heeft: ik heb sinds kort een Sony Ericsson K700i telefoon die een WAP2/XHTML browser heeft: die ondersteund CSS minimaal en heeft een klein schermpje, maar als de site goed in elkaar zit kan je er probleemloos mee surfen!

10 berichten aan het bekijken - 1 tot 10 (van in totaal 10)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.