Verschillende kleuren hyperlinks
Ik gebruik CSS om verschillende tabellen in mijn website een kleurtje te kunnen geven. Sommige lichtblauw (class rand_lb), sommige donkerblauw (class rand_db) en andere standaard (zonder class)
ik gebruik de lichtblauwe tabellen als een rand om mijn website.
Nu heb ik een probleem bij het gebruik van class-loze tabellen binnen de lichtblauwe tabellen. Hyperlinks krijgen dan automatisch de kleur die is aangegeven bij de lichtblauwe td.rand_lb in mijn CSS, en niet die bij de gewone td.
Mijn CSS (ingekort voor alleen de td):
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
td {
padding: 1px 1px 1px 1px;
border-left: 1px solid #369;
border-right: 1px solid #369;
border-bottom: 1px solid #369;
border-top: 1px solid #369;
background-color: #036;
color: #9cc;
font-family: Verdana;
font-size: 10pt;
}
.rand_db {
padding: 0px 0px 0px 0px;
border-top: 0px solid #369;
border-left: 0px solid #369;
border-right: 0px solid #69c;
border-bottom: 0px solid #369;
background-color: #9cc;
color: #fff;
}
.rand_lb {
padding: 0px 0px 0px 0px;
border-top: 0px solid #369;
border-left: 0px solid #369;
border-right: 0px solid #69c;
border-bottom: 0px solid #369;
background-color: #9cc;
color: #000066;
}
td a:link {color: #330099}
.rand_db a:link, .rand_db a:visited, .rand_db a:active {color: #FF0000}
.rand_lb a:link, .rand_lb a:visited, .rand_lb a:active {color: #CCFF33}
padding: 1px 1px 1px 1px;
border-left: 1px solid #369;
border-right: 1px solid #369;
border-bottom: 1px solid #369;
border-top: 1px solid #369;
background-color: #036;
color: #9cc;
font-family: Verdana;
font-size: 10pt;
}
.rand_db {
padding: 0px 0px 0px 0px;
border-top: 0px solid #369;
border-left: 0px solid #369;
border-right: 0px solid #69c;
border-bottom: 0px solid #369;
background-color: #9cc;
color: #fff;
}
.rand_lb {
padding: 0px 0px 0px 0px;
border-top: 0px solid #369;
border-left: 0px solid #369;
border-right: 0px solid #69c;
border-bottom: 0px solid #369;
background-color: #9cc;
color: #000066;
}
td a:link {color: #330099}
.rand_db a:link, .rand_db a:visited, .rand_db a:active {color: #FF0000}
.rand_lb a:link, .rand_lb a:visited, .rand_lb a:active {color: #CCFF33}
De enige oplossing die ik kan bedenken is iedere 'gewone' tabel ook een class meegeven, maar gezien de omvang van mijn site heb ik liever een andere oplossing
Gewijzigd op 01/06/2010 18:53:52 door Tobias Tobias
Tobias Witmer op 31/05/2010 21:40:37:
ik gebruik de lichtblauwe tabellen als een rand om mijn website.
Begrijp ik goed dat je echt tabellen voor lay-out gebruikt?
Jan Koehoorn op 31/05/2010 22:09:06:
Begrijp ik goed dat je echt tabellen voor lay-out gebruikt?
Tobias Witmer op 31/05/2010 21:40:37:
ik gebruik de lichtblauwe tabellen als een rand om mijn website.
Begrijp ik goed dat je echt tabellen voor lay-out gebruikt?
Volgens mij ook... En dat is volgens mij ook de oorzaak van het probleem (njah)...
Bijvoorbeeld:
Code (php)
1
<td id="rand_lb">
Code (php)
1
td#rand_lb {}
Code (php)
1
#rand_lb {}
En:
Code (php)
1
<td class="rand_lb">
Code (php)
1
td.rand_lb {}
Code (php)
1
.rand_lb {}
Om je hyperlinks de goede kleur te geven moet je je CSS gaan nesten. Dat doe je zo:
Code (php)
1
2
3
2
3
td.classNaamEersteNiveau a {color: #F00}
td.classNaamEersteNiveau td a {color: #0F0}
/* Is een TD in de TD met class 'classNaamEersteNiveau', mooier is om het helemaal uit te schrijven --> table tbody tr td.classNaamEersteNiveau table tbody tr td {} */
td.classNaamEersteNiveau td a {color: #0F0}
/* Is een TD in de TD met class 'classNaamEersteNiveau', mooier is om het helemaal uit te schrijven --> table tbody tr td.classNaamEersteNiveau table tbody tr td {} */
Verder kom ik graag terug op het eerste stuk van deze reactie, en op de bovenstaande reacties; Als je een tabel in een tabel hebt, bijvoorbeeld voor de opmaak van de lay-out, dan gaat er iets mis.
Gewijzigd op 01/06/2010 09:56:00 door Elwin - Fratsloos
Als ik geen tabel in een tabel kan gebruiken, hoe kan ik het dan het beste aanpakken? Ik gebruik dit omdat ik niet anders gewend ben, en omdat ik zo 'vierkanten' met afgeronde hoeken kan maken.
Ik merk wel dat de site er in GC anders uitziet dan in IE (7?), dus geloof ik meteen dat dit niet de mooiste oplossing is.
Ik zit nog in de testfase van de site, dus nu kan ik de boel nog omgooien.
Als je gewoon div's gebruikt ben je van al het gedonder af.
In tabellen horen alleen dingen als adressenlijsten, kandidatenlijsten, resultatenlijsten (daarvoor zijn ze oorspronkelijk bedacht), dingen die je normaal ook in een tabel ziet.
Een website hoort dus niet in een tabel.
Het lijkt misschien makkelijk, maar dat is het dus niet. Het resultaat wordt bijna altijd verschillend in verschillende browsers (dan sluit het bijvoorbeeld voor geen meter op elkaar aan) en het is ontzettend moeilijk te onderhouden. Het is een hel.
Verder kan je gewoon de css3 border radius methode gebruiken om ronde hoeken te krijgen.
Ik begrijp dat je met div's een 'vierkant'zoals ik ze maar noem kunt maken met een vooraf opgegeven hoogte en breedte, vastgelegd in CSS (hier dan wel ID gebruiken?), voor bijvoorbeeld de head of het menu.
Wat ik heb kunnen vinden over de css3 border radius: Dit wordt (nog?) niet ondersteunt door IE, en dan ziet het geheel er ook crap uit.
Dit lijkt me wel een mooie oplossing: http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/
Ben inmiddels bezig de website aan te passen naar divjes. Werkt prima in zowel GC als IE7.
Iedereen bedankt!