CSS luistert niet naar class
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<table class="main">
<tr>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='pages.php'">
<img src="./images/document.png" alt="" height="48" /><br />
Pagina's
</td>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='menu.php'">
<img src="./images/text_tree.png" alt="" height="48" /><br />
Menu
</td>
</tr>
</table>
<tr>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='pages.php'">
<img src="./images/document.png" alt="" height="48" /><br />
Pagina's
</td>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='menu.php'">
<img src="./images/text_tree.png" alt="" height="48" /><br />
Menu
</td>
</tr>
</table>
en
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
* {
margin:0px;
padding:0px;
}
body {
font:12px Verdana, Sans-Serif;
color:#036;
background:#3588bc;
}
td {
font:12px Verdana, Sans-Serif;
}
h4, th {
font:13px Verdana, Sans-Serif;
font-weight:bold;
}
[..]
#content {
border:solid 1px #000;
margin:10px;
padding:5px;
background:#99cee6;
}
[..]
table.menu {
border:solid 1px #000;
background:#CCC;
}
table.menu th {
height:25px;
}
table.menu td, table.menu th {
border:solid 1px #000;
background:#FFF;
text-align:center;
padding:2px;
}
table.menu .small {
width:25px;
}
table.menu .big {
width:300px;
text-align:left;
padding-left:10px;
}
table {
margin:20px;
}
table.main td {
text-align:center;
width:80px;
height:80px;
border:solid 1px #99cee6;
cursor:pointer;
font:12px Verdana, Sans-Serif;
color:#036;
}
table.main td.hover {
background:#369;
border:solid 1px #000;
color:#FFF;
}
[..]
margin:0px;
padding:0px;
}
body {
font:12px Verdana, Sans-Serif;
color:#036;
background:#3588bc;
}
td {
font:12px Verdana, Sans-Serif;
}
h4, th {
font:13px Verdana, Sans-Serif;
font-weight:bold;
}
[..]
#content {
border:solid 1px #000;
margin:10px;
padding:5px;
background:#99cee6;
}
[..]
table.menu {
border:solid 1px #000;
background:#CCC;
}
table.menu th {
height:25px;
}
table.menu td, table.menu th {
border:solid 1px #000;
background:#FFF;
text-align:center;
padding:2px;
}
table.menu .small {
width:25px;
}
table.menu .big {
width:300px;
text-align:left;
padding-left:10px;
}
table {
margin:20px;
}
table.main td {
text-align:center;
width:80px;
height:80px;
border:solid 1px #99cee6;
cursor:pointer;
font:12px Verdana, Sans-Serif;
color:#036;
}
table.main td.hover {
background:#369;
border:solid 1px #000;
color:#FFF;
}
[..]
Maar toch wordt de style niet toegepast. Als ik in de de CSS gewoon 'table td' ipv table.main td dan werkt het wel, maar dan worden alle tabellen aangepast, en dat is niet de bedoeling.
Ziet iemand wat ik verkeerd doe? Of weet iemand wat er mis gaat? Het probleem doet zich in alle browsers voor die ik getest heb (Opera, FireFox en IE)
Betreffende pagina
Edit
Oke, en blijf verder lekker van de pagina af. Het is alleen om de bron te kunnen bekijken, niet om te testen!
Gewijzigd op 01/01/1970 01:00:00 door Willem Jan Z
edit
getest in ie en ff
Gewijzigd op 01/01/1970 01:00:00 door bart van der veen
@bart, het ziet er misschien goed uit, maar het hoort anders :) Ik zal het even toelichten, ookal zou je het ook uit de CSS kunnen halen.
De bedoeling is, dat ze wat verder van elkaar komen te staan (80px breed en hoog), en met mouseover (dus .hover) de achtergrond verandert en je muis een handje wordt. Maar dat gebeurt dus niet.
Edit:
sorry ik zag je post er na nog niet!!
anders gebruik je inplaats van classes id's
sorry ik zag je post er na nog niet!!
anders gebruik je inplaats van classes id's
Gewijzigd op 01/01/1970 01:00:00 door DirkJan Heinen
bart:
bij mij doet hij het prima.
edit
getest in ie en ff
edit
getest in ie en ff
bij mij ook als ik hem lokaal test.
Edit: Hmmm, bij jullie werkt het dus normaal :S
Gewijzigd op 01/01/1970 01:00:00 door Willem Jan Z
check anders mijn testje:
http://nvmac.nl/test.htm
Gewijzigd op 01/01/1970 01:00:00 door bart van der veen
Hij gaat pas oplichten als de td class in de tabel main zit en je hebt die geen class toegewezen.
als je de tabel, waar de knoppen inzitten, class='main' geeft doe hij het
Edit: Beetje laat *-)
Edit 2: Het script bij je eerste post heeft wel class='main' maar je voorbeeld niet
Edit 3: Hij doet het nu wel. (je hebt table.main td.hover veranderd naar table td.hover) ;)
Nog even een kleine aanvulling
Quote:
<table> Ik denk dat dit <table class='main'> Moet worden
<tr>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='pages.php'">
<img src="./images/document.png" alt="" height="48" /><br />
Pagina's
</td>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='menu.php'">
<img src="./images/text_tree.png" alt="" height="48" /><br />
Menu
</td>
</tr>
</table>
<tr>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='pages.php'">
<img src="./images/document.png" alt="" height="48" /><br />
Pagina's
</td>
<td onmouseover="this.className='hover'" onmouseout="this.className=''" onclick="self.location.href='menu.php'">
<img src="./images/text_tree.png" alt="" height="48" /><br />
Menu
</td>
</tr>
</table>
Gewijzigd op 01/01/1970 01:00:00 door Han eev
plaatje aan het brouwen was, daarom klopt het voorbeeld weer wel/niet etc :)Maar hier zie je dus wat er bij mij fout gaat. Maar bij jullie gaat het dus goed? (Code is weer zoals het hoort)
Maar ben blij dat het wel werkt nu.
Bedankt allemaal voor het meedenken!