CSS - Achtergrond en link in een tabel
Ik ben nu bezig met mijn website maar ik wil nu een tabel die tegelijk een link is, EN een achtergrond plaatje geeft.
eigenlijk het resultaat van
Code (php)
1
2
3
4
5
2
3
4
5
<?php
<TD onmouseover="this.style.backgroundColor='KLEURTJE';"
onmouseout="this.style.backgroundColor='KLEURTJE';"
onclick="window.location.href='URL'">
?>
<TD onmouseover="this.style.backgroundColor='KLEURTJE';"
onmouseout="this.style.backgroundColor='KLEURTJE';"
onclick="window.location.href='URL'">
?>
maar dan zonder de kleuren die veranderen en wel een achtergrondplaatje
ik heb het in CSS nog niet helemaal goed, ik heb nu
Code (php)
1
2
3
4
5
6
2
3
4
5
6
.link_tabel {
background-image: url("./images/ster.gif");
width: 100px;
height: 100px;
background-color: #cccccc;
}
background-image: url("./images/ster.gif");
width: 100px;
height: 100px;
background-color: #cccccc;
}
Hoe doe ik dat,
bvd
edit: ook de nieuwe links naar de plaatjes kloppen gewoon
Gewijzigd op 01/01/1970 01:00:00 door Nico V.
Heb je mijn voorbeeld nog bekeken?
CSS
Code (php)
1
2
3
4
5
2
3
4
5
td.link {
background: #fff url(ster.jpg) left top no-repeat;
height:100px;
width: 100px;
}
background: #fff url(ster.jpg) left top no-repeat;
height:100px;
width: 100px;
}
Pagina
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
<html>
<table border='0' cellpadding='0' cellspacing='10'>
<tr>
<td class='link'>
<a href="index.php?pagina=home" title="">Home</a>
</td>
</tr>
</table>
</html>
<table border='0' cellpadding='0' cellspacing='10'>
<tr>
<td class='link'>
<a href="index.php?pagina=home" title="">Home</a>
</td>
</tr>
</table>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Nico V.
Mogelijk werkt dit met FireFox niet?
- URL naar de image OK
- Code OK
- link naar CSS OK
- namen in CSS + HTML OK
- Browser compatibility OK
- ideen over wat het kan zijn NEE
Gewijzigd op 01/01/1970 01:00:00 door Nico V.
maar de code staat hier boven
ps. de style.css word in de index.php geinclude, en deze pagina ook
komtie:
Menu.php
<table border="0" cellpadding="0" cellspacing="10">
<tr>
<td class="link">
<a href="index.php?pagina=home">Home</a>
</td>
</tr>
</table>
CSS
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
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
BODY {
margin-right: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
font-family: verdana;
font-size: 12;
background-color: #000333;
}
a:link, a:visited, a:active {
color: #000000;
font-weight: bold;
text-decoration: none;
font-size: 12px;
vertical-align: top;
}
.ktabel {
width: 98%;
height: 50px;
text-align: center;
vertical-align: top;
border: 0;
margin-left:auto;
margin-right:auto;
}
.htabel {
width: 98%;
height: 90%;
background-color: #191970;
text-align: center;
vertical-align: top;
border: 1;
border-width: 2px;
border-style: solid;
border-color: #FFFF00;
margin-left:auto;
margin-right:auto;
}
.titel {
color: #FFFF00;
font-size: 30px;
text-align: center;
vertical-align: top;
}
.htabel_menu {
color: #FFFF00;
height: 100px;
font-weight: bold;
vertical-align: bottom;
text-align: left;
padding-top: 0;
padding-bottom: 0;
}
td.link {
color: #000000;
text-align: center;
height:100px;
width: 100px;
}
margin-right: 0;
margin-left: 0;
margin-top: 0;
margin-bottom: 0;
font-family: verdana;
font-size: 12;
background-color: #000333;
}
a:link, a:visited, a:active {
color: #000000;
font-weight: bold;
text-decoration: none;
font-size: 12px;
vertical-align: top;
}
.ktabel {
width: 98%;
height: 50px;
text-align: center;
vertical-align: top;
border: 0;
margin-left:auto;
margin-right:auto;
}
.htabel {
width: 98%;
height: 90%;
background-color: #191970;
text-align: center;
vertical-align: top;
border: 1;
border-width: 2px;
border-style: solid;
border-color: #FFFF00;
margin-left:auto;
margin-right:auto;
}
.titel {
color: #FFFF00;
font-size: 30px;
text-align: center;
vertical-align: top;
}
.htabel_menu {
color: #FFFF00;
height: 100px;
font-weight: bold;
vertical-align: bottom;
text-align: left;
padding-top: 0;
padding-bottom: 0;
}
td.link {
color: #000000;
text-align: center;
height:100px;
width: 100px;
}
Gewijzigd op 01/01/1970 01:00:00 door Nico V.
Code (php)
1
2
3
4
5
2
3
4
5
td.link {
background: #fff url(ster.jpg) left top no-repeat;
height:100px;
width: 100px;
}
background: #fff url(ster.jpg) left top no-repeat;
height:100px;
width: 100px;
}
maar uit je laatste voorbeeld maak ik op dat die ster.jpg in de map images staat. Als dat zo is, moet het zo:
Code (php)
1
2
3
4
5
2
3
4
5
td.link {
background: #fff url(images/ster.jpg) left top no-repeat;
height:100px;
width: 100px;
}
background: #fff url(images/ster.jpg) left top no-repeat;
height:100px;
width: 100px;
}
Code (php)
1
2
3
4
5
6
2
3
4
5
6
td.link {
color: #000000;
text-align: center;
height:100px;
width: 100px;
}
color: #000000;
text-align: center;
height:100px;
width: 100px;
}
daar wordt helemaal geen background image toegekend?
En in menu.php lees ik:
Code (php)
1
<td class="link" background='ster.jpg'>
Daar moet je die code voor die background helemaal niet neer zetten. Dat hoort nou juist in je CSS bestand te staan.
meest recente versie:
Menu.php
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<table border="0" cellpadding="0" cellspacing="10">
<tr>
<td class="link">
<a href="index.php?pagina=home">Home</a>
</td>
</tr>
</table>
<tr>
<td class="link">
<a href="index.php?pagina=home">Home</a>
</td>
</tr>
</table>
CSS
Code (php)
1
2
3
4
5
2
3
4
5
td.link {
background: url(images/ster.jpg) left top no-repeat;
height:100px;
width: 100px;
}
background: url(images/ster.jpg) left top no-repeat;
height:100px;
width: 100px;
}
ik zal volgende keer iets duidelijker zijn
Gewijzigd op 01/01/1970 01:00:00 door Nico V.