Hoe een a-hover-functie in inline style - Softwareontwikkeling

donderdag 11 juni 2009 10:19

Acties:

0 Henk 'm!

Topicstarter

Momenteel heb ik een probleempje met een website van me. In een tabel staan bepaalde gegevens en deze gegevens zijn klikbaar middels een normale hyperlink. De website is al wat jaartjes oud en heb die toen nog zonder CSS gebouwd, maar met inline styles.

Door text-decoration: none; toe te voegen aan de href-tag wordt de link gewoon weergegeven. Nu wil ik echter dat de link van kleur veranderd en eventueel onderstreept als men met de muis over de link gaat. Ik heb dat geprobeerd om te maken door a-hover: red; toe te voegen, maar dat werkt helaas niet.

Wie weet hoe ik dit het beste kan oplossen? Onderstaand een gedeelte van het script.

code:

<tr> 
<td width="70px" align="center">16-02-2009</td> 
<td width="40px" align="center">09:13</td> 
<td width="260px"><a style="text-decoration: none; color: black; a-hover: red;" a href="./nieuwsitems/2009/2009februari16standbysabic.php">WVD-ploeg stand-by; gasdetectie SABIC-IP</a></td> 
<td width="30px" align="center">2</td> 
<td width="110px">Sint Philipsland</td> 
<td width="120px">Brandweerkazerne</td>
</tr>

donderdag 11 juni 2009 10:27

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Het is een "action" op een A element, dat je wilt stylen. Dat zal je dus via een normale stylesheet moeten doen; ofwel boven aan elk document, ofwel via in ingeladen stylesheet.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

donderdag 11 juni 2009 10:29

Acties:

0 Henk 'm!

Verwijderd

style="..." is wel CSS alleen niet in een losse stylesheet. Voor zover ik weet kan je alleen geen pseudo-classes, wat :hover is

Waarom, als je toch aan het verbouwen bent niet gelijk omzetten naar losse CSS?

Anders kan je altijd nog een <style> tag toevoegen en een class= aan het element toevoegen...

donderdag 11 juni 2009 10:29

Acties:

0 Henk 'm!

Evilbee

OkkE schreef op donderdag 11 juni 2009 @ 10:27:
Het is een "action" op een A element, dat je wilt stylen. Dat zal je dus via een normale stylesheet moeten doen; ofwel boven aan elk document, ofwel via in ingeladen stylesheet.

Of door middel van javascript met onmouseover/onmouseout

Maar met een stylesheet is natuurlijk wel netter.

LinkedIn - Collega worden?

donderdag 11 juni 2009 10:30

Acties:

0 Henk 'm!

teh_twisted

a:hover zou 't sowiso zijn, a-hover heb je 't over 't element genaamd a-hover en die bestaand niet! je wilt namelijk op 't element a een hover toepassen

a:hover
[element]:[selector]

Tyan S7025, 1x Xeon E5520, 32GB DDR3-1333 ECC/REG, GTX275 896MB, 2x Samsung SM 2243SN, Logitech Perf MX. Laptop: MBP 10,1/6,2. Cams: Canon EOS600D+Tamron AF18-200, Sony W350. Gadgets: iPad 64GB 3G, iPhone 5 64GB, PS1-3. Auto: W211 E220CDI

donderdag 11 juni 2009 10:34

Acties:

0 Henk 'm!

moozzuzz

Cascading Stylesheet:

1
2
3

table td a:hover {
   color:red;
}

Dit kan je alsnog in je externe stylesheet defniëren

donderdag 11 juni 2009 10:42

Acties:

0 Henk 'm!

Jorcee

moozzuzz schreef op donderdag 11 juni 2009 @ 10:34:
Cascading Stylesheet:
1
2
3
table td a:hover {
   color:red;
}
Dit kan je alsnog in je externe stylesheet defniëren

Als het dan met de bovenstaande code nog niet zou lukken kan je nog dit proberen, deze manier wil wel eens helpen

Cascading Stylesheet:

1
2
3

table td a:hover {
   color:red !important;
}

donderdag 11 juni 2009 10:43

Acties:

0 Henk 'm!

jwkempeneers

Topicstarter

Verwijderd schreef op donderdag 11 juni 2009 @ 10:29:
style="..." is wel CSS alleen niet in een losse stylesheet. Voor zover ik weet kan je alleen geen pseudo-classes, wat :hover is

Waarom, als je toch aan het verbouwen bent niet gelijk omzetten naar losse CSS?

Anders kan je altijd nog een <style> tag toevoegen en een class= aan het element toevoegen...

Ik ben de site niet compleet aan het verbouwen, het is maar een aanvulling dus heb even geen zin om een complete CSS te gaan bouwen

Het lijkt me beter om dit nu even te doen met een class element, maar zou niet precies weten hoe dat in zn werk gaat...

donderdag 11 juni 2009 10:50

Acties:

0 Henk 'm!

Jorcee

Je wilt de link een class meegeven? Dan kun je gewoon dit bij de HTML van de link zetten:

HTML:

1	<a class="DE_NAAM_VAN_JE_CLASS" style="..." a href="....">....</a>

En in de CSS zet je dan ergens onderaan ofzo:

Cascading Stylesheet:

1
2
3

a.DE_NAAM_VAN_JE_CLASS:hover{
color: red;
}

Maar wat misschien makkelijker is om de table een class mee te geven:

Dan voeg je daarna gewoon dit toe aan je CSS:

Cascading Stylesheet:

1
2
3

table.CLASS_VAN_TABLE a:hover{
color: red;
}

Of als je geen zin hebt om het CSS bestand te wijzigen zet je gewoon dit in de <head>

HTML:

<style type="text/css">
<!--
table.CLASS_VAN_TABLE a:hover{
color: red;
}
-->
</style>

[ Voor 17% gewijzigd door Jorcee op 11-06-2009 10:51 ]

donderdag 11 juni 2009 10:59

Acties:

0 Henk 'm!

Bosmonster

*zucht*

Kleinigheidje trouwens:

code:

1	width="70px"

Bij attributes de 'px' weglaten, dat is alleen voor CSS.

donderdag 11 juni 2009 11:02

Acties:

0 Henk 'm!

jwkempeneers

Topicstarter

Bosmonster schreef op donderdag 11 juni 2009 @ 10:59:
Bij attributes de 'px' weglaten, dat is alleen voor CSS.

Thanks, is aangepast ;-)

donderdag 11 juni 2009 11:05

Acties:

0 Henk 'm!

jwkempeneers

Topicstarter

Jorcee schreef op donderdag 11 juni 2009 @ 10:50:
Je wilt de link een class meegeven? Dan kun je gewoon dit bij de HTML van de link zetten:
HTML:
1
<a class="DE_NAAM_VAN_JE_CLASS" style="..." a href="....">....</a>
Of als je geen zin hebt om het CSS bestand te wijzigen zet je gewoon dit in de <head>
HTML:
1
2
3
4
5
6
7
<style type="text/css">

</style>

Ik heb het nu als bovenstaand opgelost, maar ik krijg het niet werkend. Ik zal vast iets fout doen, maar ik zie niet wat

Onderstaand de pagina

code:

<?php readfile('sjabloon.txt');?>

<br /><br />
<b>UITRUKKEN 2009</b><br /><br />

<font face="Verdana" size="1">
<table border="0" class="uitrukken">

<tr bgcolor="#cccccc"> <th align="center">Datum</th> <th align="center">Tijd</th> <th align="center">Omschrijving</th> <th align="center">Prio</th> <th align="center">Plaats</th> <th align="center">Adres</th></tr>

<tr> <td width="70" align="center">16-02-2009</td> <td width="40" align="center">09:13</td> <td width="260"><a class="UITRUKKEN" style="text-decoration: none; color: black;" a href="./nieuwsitems/2009/2009februari16standbysabic.php">WVD-ploeg stand-by; gasdetectie SABIC-IP</a></td> <td width="30" align="center">2</td> <td width="110">Sint Philipsland</td> <td width="120">Brandweerkazerne</td></tr>

<tr bgcolor="#cccccc"> <td width="70" align="center">19-05-2009</td> <td width="40" align="center">19:50</td> <td width="260"><a style="text-decoration: none; color: black;" a href="./nieuwsitems/2009/2009mei19buitenbrand.php">Buitenbrand; hoop palen, stro en gaas</a></td> <td width="30" align="center">2</td> <td width="110">Sint Philipsland</td> <td width="120">Van Haaftenweg</td></tr>

<tr> <td width="70" align="center">26-05-2009</td> <td width="40" align="center">03:39</td> <td width="260"><a style="text-decoration: none; color: black;" a href="./nieuwsitems/2009/2009mei26noodweer.php">Binnenbrand schuur; bleek loos alarm</a></td> <td width="30" align="center">1</td> <td width="110">Sint Philipsland</td> <td width="120">Lange Kruisweg 2</td></tr>

<tr  bgcolor="#cccccc"> <td width="70" align="center">31-05-2009</td> <td width="40" align="center">00:36</td> <td width="260"><a style="text-decoration: none; color: black;" a href="./nieuwsitems/2009/2009mei31buitenbrandstph.php">Buitenbrand; gemaaid gras in brand</a></td> <td width="30" align="center">1</td> <td width="110">Sint Philipsland</td> <td width="120">Zuiddijk</td></tr>

<tr> <td width="70" align="center">07-06-2009</td> <td width="40" align="center">11:06</td> <td width="260"><a style="text-decoration: none; color: black;" a href="./nieuwsitems/2009/2009juni07tilassistentie.php">Tilassistentie ambulance; patiënt van schip</a></td> <td width="30" align="center">2</td> <td width="110">Bruinisse</td> <td width="120">Krammersluizen</td></tr>

</table>
</font>
<br />
<font face="Verdana" size="1">
<table border="0">
<tr bgcolor="#cccccc">
<td>
Totaal aantal uitrukken 2009: 5
</td>
</tr>
</table>
</font>
<br /><br />

<center>
<img src="./images/uitrukken_2009.jpg">
</center>

<br />

<?php readfile('uitrukken.txt');?>

<br /><br /> <br /> 
<?php readfile('sjabloononder.txt');?>

Onderstaand het sjabloon wat bovenin geladen wordt en waar ik in de head code heb toegevoegd.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://wwww3c.org/1999/xhtml">
<head>
<title>
Brandweer Sint Philipsland
</title>

<style type="text/css"> 
<!-- 
table.UITRUKKEN a:hover{ 
color: red; 
} 
--> 
</style>

</head>

<body background="./images/bgcolor.jpg" link="white" alink="white" vlink="white">


<table height="100%" width="850" align="center" style="border-collapse:collapse;>
<tr>
<td colspan="3">
<center>
<a href="./index.php"><img src="./images/kop.jpg" border="0"><a>
</center>
</td>
</tr>
<tr>
<td background="./images/background2.jpg" height="100%" width="15" align="left">
</td>
<td background="./images/background2.jpg" height="100%" width="145" align="left" valign="top">
<font face="Verdana" size="2" color="white">
    <br /><br /><b>
    <a style="text-decoration: none;" a href="./index.php">HOME<a> <br /><br />
    <a style="text-decoration: none;" a href="./nieuws.php">NIEUWS<a> <br /><br />
    <a style="text-decoration: none;" a href="./regionieuws.php">REGIONIEUWS<a> <br /><br />
    <a style="text-decoration: none;" a href="./algemeen.php">ALGEMEEN<a> <br /><br />
    <a style="text-decoration: none;" a href="./voertuig.php">VOERTUIG<a> <br /><br />
    <a style="text-decoration: none;" a href="./kazerne.php">KAZERNE<a> <br /><br />
    <a style="text-decoration: none;" a href="./wvd.php">WVD-TEAM<a> <br /><br />
    <a style="text-decoration: none;" a href="./gaspakteam.php">GASPAKTEAM<a> <br /><br />
    HISTORIE <br /><br />
    <a style="text-decoration: none;" a href="./jeugdbrandweer.php">JEUGDBRANDWEER<a> <br /><br />
    <a style="text-decoration: none;" a href="./uitrukken_2009.php">UITRUKKEN<a> <br /><br />
    <a style="text-decoration: none;" a href="./nieuwsbrief.php">NIEUWSBRIEF<a> <br /><br />    
    <a style="text-decoration: none;" a href="./gastenboek.php">GASTENBOEK<a> <br /><br />
    <a style="text-decoration: none;" a href="./links.php">LINKS<a> <br /><br />
    <a style="text-decoration: none;" a href="./disclaimer.php">DISCLAIMER<a> <br /><br />
    <a style="text-decoration: none;" a href="./contactformulier.php">CONTACT<a> <br /><br /><br /> </b>
</font> 
</td>
<td background="./images/background.jpg" height="100%" width="15" align="left">
</td>
<td background="./images/background.jpg" height="100%" width="690" align="center" valign="top">


<p style="text-align:justify">

<font face="Verdana" size="2" color="black">

donderdag 11 juni 2009 11:08

Acties:

0 Henk 'm!

Jorcee

Je hebt de class in CSS met HOOFDLETTERS staan en in de HTML met lowercase-letters..

Is misschien verkeerd uitgelegd door mij, maar classes zijn case-sensitive

donderdag 11 juni 2009 11:16

Acties:

0 Henk 'm!

jwkempeneers

Topicstarter

Jorcee schreef op donderdag 11 juni 2009 @ 11:08:
Je hebt de class in CSS met HOOFDLETTERS staan en in de HTML met lowercase-letters..

Is misschien verkeerd uitgelegd door mij, maar classes zijn case-sensitive

Sorry, had ik even niet op gelet. Maar nu heb ik alles aangepast en het werkt helaas nog niet

Dit staat in de head:

code:

<style type="text/css"> 
<!-- 
table.uitrukken a:hover{ 
color: red; 
} 
--> 
</style>

Dit is de tabel-tag:

code:

1	<table border="0" class="uitrukken">

Dit is de link:

code:

<tr> <td width="70" align="center">16-02-2009</td> <td width="40" align="center">09:13</td> <td width="260"><a  class="uitrukken" style="text-decoration: none; color: black;" a href="./nieuwsitems/2009/2009februari16standbysabic.php">WVD-ploeg stand-by; gasdetectie SABIC-IP</a></td> <td width="30" align="center">2</td> <td width="110">Sint Philipsland</td> <td width="120">Brandweerkazerne</td></tr>

donderdag 11 juni 2009 11:19

Acties:

0 Henk 'm!

Matis

Rubber Rocket

Cascading Stylesheet:

<style type="text/css"> 
<!--
table.uitrukken a:hover{ 
color: red; 
} 
-->
</style>

Misschien de  weghalen

Cascading Stylesheet:

<style type="text/css"> 
table.uitrukken a:hover{ 
color: red; 
} 
</style>

[ Voor 49% gewijzigd door Matis op 11-06-2009 11:19 ]

If money talks then I'm a mime
If time is money then I'm out of time

donderdag 11 juni 2009 11:19

Acties:

0 Henk 'm!

Jorcee

Kun je dan eens dit proberen?

HTML:

<style type="text/css"> 
<!-- 
table.uitrukken a:hover{ 
color: red !important; 
} 
--> 
</style>

Matis schreef op donderdag 11 juni 2009 @ 11:19:
Cascading Stylesheet:
1
2
3
4
5
<style type="text/css"> 
table.uitrukken a:hover{ 
color: red; 
} 
</style>
Misschien de  weghalen

Inderdaad zou je dat ook eens kunnen proberen

[ Voor 49% gewijzigd door Jorcee op 11-06-2009 11:20 ]

donderdag 11 juni 2009 11:22

Acties:

0 Henk 'm!

.Gertjan.

Owl!

jwkempeneers schreef op donderdag 11 juni 2009 @ 11:16:
[...]

Sorry, had ik even niet op gelet. Maar nu heb ik alles aangepast en het werkt helaas nog niet

Dit staat in de head:

code:

<style type="text/css"> 
<!-- 
table.uitrukken a:hover{ 
color: red; 
} 
--> 
</style>

Dit is de tabel-tag:

code:

1	<table border="0" class="uitrukken">

Dit is de link:

code:

<tr> <td width="70" align="center">16-02-2009</td> <td width="40" align="center">09:13</td> <td width="260"><a  class="uitrukken" style="text-decoration: none; color: black;" a href="./nieuwsitems/2009/2009februari16standbysabic.php">WVD-ploeg stand-by; gasdetectie SABIC-IP</a></td> <td width="30" align="center">2</td> <td width="110">Sint Philipsland</td> <td width="120">Brandweerkazerne</td></tr>

De inline style (dus het style="") gaat boven de style uit je stylesheet. De kleur zal dus zwart blijven.

Move de style van de link ook naar het CSS stukje (en haal het weg uit het style attribuut van je a). Dus:

Cascading Stylesheet:

table.uitrukken a {
color: black;
}
table.uitrukken a:hover{ 
color: red; 
}

Anders kun je zoals al aangegeven !important proberen, maar dat heb ik eigenlijk nooit gebruikt (vroeger was de browser support hiervoor een beetje triest).

By the way, waarom heeft je a ook de class uitrukken? In principe is het voldoende om de table de class a te geven. Misschien verklaart dat ook waarom je style niet wordt geleden. Haal de class="uitrukken" eens weg uit je link!

Een andere tip, download de Developer Toolbar voor Internet Explorer of FireBug voor Firefox. Zij kunnen je tonen welke styles worden toegepast en welke elkaar overschrijven.

[ Voor 13% gewijzigd door .Gertjan. op 11-06-2009 11:24 ]

The #1 programmer excuse for legitimately slacking off: "My code's compiling"
Firesphere: Sommige mensen verdienen gewoon een High Five. In the Face. With a chair.

donderdag 11 juni 2009 11:23

Acties:

0 Henk 'm!

jwkempeneers

Topicstarter

Jorcee schreef op donderdag 11 juni 2009 @ 11:19:
Kun je dan eens dit proberen?
HTML:
1
2
3
4
5
6
7
<style type="text/css"> 
 
</style>

Geweldig! Deze werkt! Bedankt!

donderdag 11 juni 2009 11:26

Acties:

0 Henk 'm!

Jorcee

jwkempeneers schreef op donderdag 11 juni 2009 @ 11:23:
[...]

Geweldig! Deze werkt! Bedankt!

Dit komt dan door de redenen die .Gertjan. ook al zegt, het style="" dingetje is de baas over de 'Gewone' css

Met !important; is dit echter soms te omzeilen

Maar volgens mij ondersteunen nu alle browsers dit nog steeds niet?

[ Voor 9% gewijzigd door Jorcee op 11-06-2009 11:27 ]

donderdag 11 juni 2009 11:29

Acties:

0 Henk 'm!

Matis

Rubber Rocket

Daarnaast heb je nog iets heel erg lijps in je a tag

HTML:

1	<a class="uitrukken" style="text-decoration: none; color: black;" a href="http://google.nl">

2 keer a, niet goed denk ik! Zal de tweede weghalen.

Daarnaast heb je zowel in je table als in je td een class uitrukken staan. Ook niet helemaal je van het

ik zal het persoonlijk zo doen:

HTML:

<html>
<head>
<title>test</title>
<style type="text/css">
table.uitrukken tr td a:link, table.uitrukken tr td a:active, table.uitrukken tr td a:visited {
    text-decoration: none; 
    color: black;
} 
table.uitrukken tr td a:hover {
    color: red; 
} 
</style>
</head>
<body>
<table border="1" class="uitrukken">
<tr>
    <td width="70" align="center">16-02-2009</td>
    <td width="40" align="center">09:13</td> 
    <td width="260">
        <a href="http://google.nl">
            WVD-ploeg stand-by; gasdetectie SABIC-IP
        </a>
    </td> 
    <td width="30" align="center">2</td> 
    <td width="110">Sint Philipsland</td> 
    <td width="120">Brandweerkazerne</td>
    </tr>
</table>
</body>
</html>

[ Voor 65% gewijzigd door Matis op 11-06-2009 11:34 ]

If money talks then I'm a mime
If time is money then I'm out of time

donderdag 11 juni 2009 11:33

Acties:

0 Henk 'm!

jwkempeneers

Topicstarter

Matis schreef op donderdag 11 juni 2009 @ 11:29:
Daarnaast heb je nog iets heel erg lijps in je a tag
2 keer a, niet goed denk ik! Zal de tweede weghalen

Is aangepast...

En Jorcee jij ook bedankt voor je uitleg.

donderdag 11 juni 2009 11:47

Acties:

0 Henk 'm!

jwkempeneers

Topicstarter

Matis schreef op donderdag 11 juni 2009 @ 11:29:

Daarnaast heb je zowel in je table als in je td een class uitrukken staan. Ook niet helemaal je van het

Dit had ik inmiddels zelf al gezien

Matis schreef op donderdag 11 juni 2009 @ 11:29:
ik zal het persoonlijk zo doen:

Bedankt, zal eens kijken of ik dat er nog in kan bouwen. Scheelt in ieder geval een hoop script...

Pagina: 1

Reageer