links hebben zelfde kleur in tabel. hoe oplossen in css? onder html strict!

[djeric]

hallo.

op mijn webpagina: http://members.home.nl/ebosmannetjes/drivein.html

zie je dat de link text ook een blauwe kleur heeft, en de achtergrond ook blauw is.
nu zie je dit dus heel erg moelijk.

maar vind helemaal nergens waar je die kleur van aanpast.

wel vind ik in de css onderaan Letters a:link , maar deze geeft de kleurcode #000000 aan. naar mij weten is dit dus zwart en geen blauw.

kortom ik vind geen mogelijkheid om deze kleur aan te passen in me code.

html code zie bron (klik op de link hierboven)
mijn css:

body { 
background : url(index/achtergrond.jpg); 
} 
ul.navigatie { 
font-family : verdana, Arial, Helvetica, sans-serif; 
font-size : 14px; 
font-weight : bold; 
width : 12em; 
border-right : 1px solid #666; 
padding : 0; 
background-color : #9cc; 
color : #333; 
list-style : none; 
float : left; 
margin-top : 0; 
margin-right : 10px; 
margin-bottom : 1em; 
margin-left : 0; 
} 
ul.rechts { 
float : right; 
margin : 0 0 1em 10px; 
} 
ul.navigatie li { 
margin : 0; 
border-top : 1px solid #003; 
} 
ul.navigatie li a { 
display : block; 
padding : 2px 2px 2px 4px; 
border-left : 10px solid #990000; 
border-right : 1px solid #69c; 
border-bottom : 1px solid #369; 
background-color : #000099; 
color : #c0c0c0; 
text-decoration : none; 
width : 100%; 
} 
ul.rechts { 
margin : 0 0 1em 10px; 
} 
html > body ul.navigatie li a { 
width : auto; 
} 
ul.navigatie li a:hover { 
border-left : 10px solid #006600; 
border-right : 1px solid #69c; 
border-bottom : 1px solid #369; 
background-color : #ffff00; 
color : #ff1493; 
} 
div#welkom { 
text-align : center; 
} 
#inleiding { 
color : #330000; 
font-weight : bold; 
font-size : 1.6em; 
} 
h1#home { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
p#fotos { 
clear : both; 
text-align : center; 
} 
img#links { 
float : left; 
} 
img#rechts { 
float : right; 
} 
div#tip { 
color : blue; 
clear : both; 
float : left; 
width : 45%; 
} 
h2#homeupdate { 
color : #003366; 
margin : 0; 
float : left; 
} 
h2#updatecenter { 
color : #003366; 
margin : 0; 
text-align : center; 
} 
div#teller { 
float : right; 
} 
p#stealth { 
margin : 0; 
} 
table { 
text-align : center; 
border : 5px outset black; 
background : black; 
margin : 0 auto; 
} 
tr#kop { 
height : 30px; 
font-size : 1.1em; 
font-weight : bold; 
color : #c0c0c0; 
background : #c30; 
} 
tr#kop td { 
width : 200px; 
} 
tr { 
height : 40px; 
background : #00c; 
color : #ff0; 
} 
#inhoud { 
margin : 0 12.5em; 
} 
h1#kop1 { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
#inf1 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
#inf2 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
#inf3 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
h1#kop2 { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
#inf4 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
#inf5 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
#inf6 { 
color : #330000; 
font-weight : bold; 
font-size : 1.3em; 
} 
h1#nederland { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
h1#drankjes { 
color : maroon; 
font-size : 1.5em; 
text-align : center; 
} 
#apDiv1 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 1; 
left : 0; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
visibility : visible; 
} 
#apDiv2 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 2; 
left : 22px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv3 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 3; 
left : 44px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv4 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 4; 
left : 66px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv5 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 88px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv6 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 110px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv7 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 132px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv8 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 154px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv9 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 176px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv10 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 198px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv11 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 220px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv12 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 244px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv13 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 266px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv14 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 288px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv15 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 310px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv16 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 332px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv17 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 354px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv18 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 376px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv19 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 398px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv20 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 420px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv21 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 444px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv22 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 466px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv23 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 488px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv24 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 510px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv25 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 532px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#apDiv26 { 
position : absolute; 
width : 20px; 
height : 30px; 
z-index : 5; 
left : 554px; 
top : 0; 
font-size : 18px; 
font-weight : bolder; 
text-align : center; 
} 
#Letters { 
height : auto; 
position : relative; 
width : 575px; 
margin-left : auto; 
margin-right : auto; 
} 
#apDivA { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 100; 
visibility : hidden; 
left : 0; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivB { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 102; 
visibility : hidden; 
left : 22px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivC { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 103; 
visibility : hidden; 
left : 44px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivD { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 104; 
visibility : hidden; 
left : 66px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivE { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 105; 
visibility : hidden; 
left : 88px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivF { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 106; 
visibility : hidden; 
left : 110px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivG { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 107; 
visibility : hidden; 
left : 132px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivH { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 108; 
visibility : hidden; 
left : 154px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivI { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 109; 
visibility : hidden; 
left : 176px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivJ { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 110; 
visibility : hidden; 
left : 198px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivK { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 111; 
visibility : hidden; 
left : 220px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivL { 
position : absolute; 
width : 200px; 
height : auto; 
z-index : 112; 
visibility : hidden; 
left : 242px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivM { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 264; 
visibility : hidden; 
left : 264px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivN { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 114; 
visibility : hidden; 
left : 286px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivO { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 115; 
visibility : hidden; 
left : 308px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivP { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 116; 
visibility : hidden; 
left : 330px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivQ { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 117; 
visibility : hidden; 
left : 352px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivR { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 118; 
visibility : hidden; 
left : 374px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivS { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 119; 
visibility : hidden; 
left : 396px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivT { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 120; 
visibility : hidden; 
left : 418px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivU { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 121; 
visibility : hidden; 
left : 440px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivV { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 122; 
visibility : hidden; 
left : 462px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivW { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 123; 
visibility : hidden; 
left : 484px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivX { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 124; 
visibility : hidden; 
left : 506px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivY { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 125; 
visibility : hidden; 
left : 528px; 
top : 28px; 
border : 1px solid #009; 
} 
#apDivZ { 
position : absolute; 
width : auto; 
height : auto; 
z-index : 126; 
visibility : hidden; 
left : 550px; 
top : 28px; 
border : 1px solid #009; 
} 
#Letters a:link { 
color : #000000; 
text-decoration : none; 
} 
#Letters a:hover { 
color : #ff0000; 
} 
#Letters a:visited { 
color : #3300ff; 
} 
#Letters a:active { 
color : #ff0000; 
}

 

[Naarling]

Er staat #Letters a:link { color : #000000; } , dat gaat dus alleen over links die in het element met id="Letters" zitten. Op diezelfde manier kun je ook de links in je tabel aanpassen.

table a{
color:white;
}

Geeft witte links in alle tabellen (tenzij één van je tabellen id="Letters" heeft, dan worden ze zwart.
Het is trouwens wel een goed idee om a:hover ook even aan te passen. Het donkere rood dat de meeste browsers daar standaard voor gebruiken leest ook niet prettig op strak blauw.

 

[djeric]

Er staat #Letters a:link { color : #000000; } , dat gaat dus alleen over links die in het element met id="Letters" zitten.

oja tuurlijk omdat deze in de html is opgenomen ja. snap hem.

Op diezelfde manier kun je ook de links in je tabel aanpassen.

table a{
color:white;
}

Geeft witte links in alle tabellen (tenzij één van je tabellen id="Letters" heeft, dan worden ze zwart.

heb ik aangepast naar eigen wens:

table a{
color: #CCFFCC;
}

al hoewel vraag me af dat er verschillende mogelijkheden zijn om kleuren weer te geven. "white" (als naam) of #ffffff (met 6 letters) of #fff (met 3 letters)
kunnen de meest browsers alle 3 goed weergeven of moet je de ene hier voor gebruiken en de andere daarvoor? wat is juist? of maak het niets uit.
persoonlijk vind ik de #ffffff 6 letter type het makelijkste.

Het is trouwens wel een goed idee om a:hover ook even aan te passen. Het donkere rood dat de meeste browsers daar standaard voor gebruiken leest ook niet prettig op strak blauw.

wou ik wel doen maar die staat dan toch weer als een element???
dus bedacht iets van:

a:hover{
color: #CCFFCC;
}

te gebruiken, maar werkte dus niet. (gebeurde niets)

maar met al...... de links zijn veranderd in de tabel van kleur.

 

[Naarling]

al hoewel vraag me af dat er verschillende mogelijkheden zijn om kleuren weer te geven. "white" (als naam) of #ffffff (met 6 letters) of #fff (met 3 letters)
kunnen de meest browsers alle 3 goed weergeven of moet je de ene hier voor gebruiken en de andere daarvoor? wat is juist? of maak het niets uit.
persoonlijk vind ik de #ffffff 6 letter type het makelijkste.

Er zijn nog wel meer manieren hoor , maar bij mijn weten worden deze drie allen even goed ondersteund. Ik vind het zelf makkelijk om voor dit soort voorbeelden de namen te gebruiken omdat ze voor mensen beter leesbaar zijn maar dat is puur een persoonlijke voorkeur.

wou ik wel doen maar die staat dan toch weer als een element???
dus bedacht iets van:

Je bent table vergeten, het moet

table a:hover{color: #CCFFCC;}

zijn.

 

[djeric]

Je bent table vergeten, het moet

table a:hover{color: #CCFFCC;}

zijn.

stom dat je er niet op komt he......:thumb:

heb meteen de code:

table a:visited{
color: #FFFF00;
}

toegevoegd. (heb ff alles geupload in tussen)
Naar mij idee is dit toch niet helemaal een leuk idee. ik heb nu geen hover meer hierna. maakt het iets onduidelijker. vind die hover wel leuk eigenlijk + duidelijk. anders zou ik de visited code weg moeten laten.
is er dan een hover voor een visited link evt???
(wil het niet ingewikkeld gaan maken hoor, maar misschien is het iets heel simpels?)

en in deze code:

 [COLOR="red"]#Letters a:link { 
color : #000000; [/COLOR]text-decoration : none; 
} 
#Letters a:hover { 
color : #ff0000; 
} 
#Letters a:visited { 
color : #3300ff;
[COLOR="red"]#Letters a:active { 
color : #ff0000; [/COLOR]}

heb ik een element voor een link in een kleur. maar ook een element voor active in een andere kleur. is beide nodig dan??? (ben me website hier op div plekken op helpmij aan t maken hoor, dus kan zijn dat het weer iets te maken heeft met een andere pagina.)

dus ff kort samen gevat. dit is mijn huidige css over de kleuren op dit moment:

 #Letters a:link { 
color : #000000; 
text-decoration : none; 
} 
#Letters a:hover { 
color : #ff0000; 
} 
#Letters a:visited { 
color : #3300ff; 
} 
#Letters a:active { 
color : #ff0000; 
} 
table a{
color: #CCFFCC;
} 
table a:hover{
color: #000000;
}
table a:visited{
color: #FFFF00;
}

 

[djeric]

dus ff kort samen gevat. dit is mijn huidige css over de kleuren op dit moment:

 #Letters a:link { 
color : #000000; 
text-decoration : none; 
} 
#Letters a:hover { 
color : #ff0000; 
} 
#Letters a:visited { 
color : #3300ff; 
} 
#Letters a:active { 
color : #ff0000; 
} 
table a{
color: #CCFFCC;
} 
table a:hover{
color: #000000;
}
table a:visited{
color: #FFFF00;
}

zou ik nog wat moeten aanpassen hieraan? of is het toch goed zo???
als er geen optie is voor een "hover" van een "visited" link dan wil ik die optie toch weg laten. want vind het dan mooier als je een "hover" hebt. ongeacht of je een link hebt bezoekt of niet.

edit:

heb die "visited" link toch weg gehaald.