![[RSS]](http://tweakimg.net/g/if/v2/icons/rss_small.png){kind=icon}
![[quick]](http://tweakimg.net/g/if/icons/world_link.png){kind=icon}
Berichten: 60
Reg. datum: 09 januari 2001
Reg. datum: 09 januari 2001
Ik wil een tabel maken waarin de hoeken van de cellen zijn afgerond. Nu is dit op zich niet zo een heel groot probleem aangezien ik dit kan maken door de tabel uit te breiden met meer cellen en binnen deze cellen een witte pixel te plaatsen. Het probleem hierbij is echter dan ik hiermee een enorme lap html code krijg en dit werkt niet in het content management system dat ik gebruik.
De oplossing voor mijn probleem is het gebruik van een stylesheet, hiermee kan ik de afgeronde hoeken definieren in de css code en zo de html zo simpel mogelijk houden.
Ik heb de volgende code bedacht:
code:
Het probleem is zoals jullie kunnen zien dat het me alleen lukt om de pixel in de linkerbovenhoeken van de cellen te plaatsen. Met 'background-image' kan ik namelijk slechts één pixel plaatsen.
Iemand een idee hoe dit op te lossen (zonder gif's te gebruiken in de html code) ik denk aan verschillende layers, maar dan moet ik met div's gaan werken en ik wil de html echt zo eenvoudig mogelijk houden.
De oplossing voor mijn probleem is het gebruik van een stylesheet, hiermee kan ik de afgeronde hoeken definieren in de css code en zo de html zo simpel mogelijk houden.
Ik heb de volgende code bedacht:
code:
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Rounded Corner Test Using CSS</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.header {
font-weight: bold;
color: #FFFFFF;
background-color: #666666;
padding: 2px;
background-image: url(dot.gif);
background-position: left top;
background-repeat: no-repeat;
}
.light {
background-color: #CCCCCC;
padding: 2px;
background-image: url(dot.gif);
background-position: left top;
background-repeat: no-repeat;
}
.dark {
background-color: #999999;
padding: 2px;
background-image: url(dot.gif);
background-position: left top;
background-repeat: no-repeat;
}
.rounded {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 9px;
}
-->
</style>
</head>
<body>
<table width="75%" border="0" cellspacing="1" cellpadding="0" class="rounded">
<tr class="header">
<td>Title</td>
<td> </td>
<td> </td>
</tr>
<tr class="light">
<td>Text</td>
<td>More text </td>
<td>Contents</td>
</tr>
<tr class="dark">
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html> |
Het probleem is zoals jullie kunnen zien dat het me alleen lukt om de pixel in de linkerbovenhoeken van de cellen te plaatsen. Met 'background-image' kan ik namelijk slechts één pixel plaatsen.
Iemand een idee hoe dit op te lossen (zonder gif's te gebruiken in de html code) ik denk aan verschillende layers, maar dan moet ik met div's gaan werken en ik wil de html echt zo eenvoudig mogelijk houden.
spocky wijzigde dit bericht 12-02-2006 14:00 (26%)
