button links instellen.
ik heb deze code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<tr>
<td rowspan="12">
<img src="images/index_03.gif" width="28" height="674" alt=""></td>
<td colspan="3" background="images/index_04.gif"><a href="index.html">Home</a></td>
<td rowspan="2">
<img src="images/index_05.gif" width="4" height="81" alt=""></td>
<td colspan="3" background="images/index_06.gif"><a href="tab2.html">Producten</a></td>
<td rowspan="2">
<img src="images/index_07.gif" width="4" height="81" alt=""></td>
<td colspan="3" background="images/index_08.gif"><a href="tab3.html">Diensten</a></td>
<td rowspan="2">
<img src="images/index_09.gif" width="5" height="81" alt=""></td>
<td colspan="2" background="images/index_10.gif"><a href="tab4.html">Links</a></td>
<td rowspan="2">
<img src="images/index_11.gif" width="4" height="81" alt=""></td>
<td colspan="2" background="images/index_12.gif"><a href="contact.html">Contact</a></td>
<td rowspan="12">
<img src="images/index_13.gif" width="31" height="674" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="61" alt=""></td>
</tr>
<td rowspan="12">
<img src="images/index_03.gif" width="28" height="674" alt=""></td>
<td colspan="3" background="images/index_04.gif"><a href="index.html">Home</a></td>
<td rowspan="2">
<img src="images/index_05.gif" width="4" height="81" alt=""></td>
<td colspan="3" background="images/index_06.gif"><a href="tab2.html">Producten</a></td>
<td rowspan="2">
<img src="images/index_07.gif" width="4" height="81" alt=""></td>
<td colspan="3" background="images/index_08.gif"><a href="tab3.html">Diensten</a></td>
<td rowspan="2">
<img src="images/index_09.gif" width="5" height="81" alt=""></td>
<td colspan="2" background="images/index_10.gif"><a href="tab4.html">Links</a></td>
<td rowspan="2">
<img src="images/index_11.gif" width="4" height="81" alt=""></td>
<td colspan="2" background="images/index_12.gif"><a href="contact.html">Contact</a></td>
<td rowspan="12">
<img src="images/index_13.gif" width="31" height="674" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="61" alt=""></td>
</tr>
en wil in de .css de font, grootte, italic, etc. instellen
moet ik het dan tussen div zetten om het in 1 keer te doen voor alle button links/tekst?
en wat zet ik voor de tekst zodat ik het in .css kan aanpassen? en wat zet ik dan in .css
kom er niet uit kan iemand helpen?
Groeten,
Stef ter Braak
Over CSS : http://www.w3schools.com/css/
Hoe je font etc kunt gebruiken in css, kun je echt wel opzoeken.
<style type="text/css">
body {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : italic;
font-size : 12px;
}
</style>
Dit plaats je in de <head> van je site en gelden deze instellingen voor je hele site. Je kunt "body" veranderen in "table" om 't alleen voor tables te gebruiken. Je kunt 't ook in een div zetten zoals:
<style type="text/css">
#content {
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : italic;
font-size : 12px;
}
</style>
<div id="content">
Nu gelden bovenstaande instellingen alleen in deze div.
</div>
Gewijzigd op 09/07/2010 17:23:47 door Michael -
Ik heb nu inderdaad al het text schuin op index door deze code:
<style type="text/css">
table { //table!!
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : italic;
font-size : 12px;
}
</style>
Hoe kan het dat ik dit niet in het style.css bestand kan doen?
(terwijl ik <link href="style.css" rel="stylesheet" type="text/css" /> heb geplaats onder head en de rest wel via .css gaat).
En hoe voorkom ik dat link tekst niet meer underlined is? van b.v. buttons.
Groetjes!
P.S. ik wil het liefst alles met div. doen in plaat van td. maar hoe kan ik dat krijgen als ik een template inlaad?
ik heb nu: (sorry voor de lange code)
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico">
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (index.psd) -->
<table width="1025" height="769" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="14">
<img src="images/index_01.gif" width="1" height="768" alt=""></td>
<td colspan="19">
<img src="images/index_02.gif" width="1023" height="25" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<td rowspan="12">
<img src="images/index_03.gif" width="28" height="674" alt=""></td>
<td colspan="3" background="images/index_04.gif"><a href="index.html">Home</a></td>
<td rowspan="2">
<img src="images/index_05.gif" width="4" height="81" alt=""></td>
<td colspan="3" background="images/index_06.gif"><a href="tab2.html">Producten</a></td>
<td rowspan="2">
<img src="images/index_07.gif" width="4" height="81" alt=""></td>
<td colspan="3" background="images/index_08.gif"><a href="tab3.html">Diensten</a></td>
<td rowspan="2">
<img src="images/index_09.gif" width="5" height="81" alt=""></td>
<td colspan="2" background="images/index_10.gif"><a href="tab4.html">Links</a></td>
<td rowspan="2">
<img src="images/index_11.gif" width="4" height="81" alt=""></td>
<td colspan="2" background="images/index_12.gif"><a href="contact.html">Contact</a></td>
<td rowspan="12">
<img src="images/index_13.gif" width="31" height="674" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="61" alt=""></td>
<tr>
<td colspan="3">
<img src="images/index_14.gif" width="197" height="20" alt=""></td>
<td colspan="3">
<img src="images/index_15.gif" width="197" height="20" alt=""></td>
<td colspan="3">
<img src="images/index_16.gif" width="193" height="20" alt=""></td>
<td colspan="2">
<img src="images/index_17.gif" width="192" height="20" alt=""></td>
<td colspan="2">
<img src="images/index_18.gif" width="168" height="20" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_19.gif" width="8" height="206" alt=""></td>
<td colspan="8">
<img src="images/index_20.gif" width="471" height="167" alt=""></td>
<td rowspan="3">
<img src="images/index_21.gif" width="9" height="214" alt=""></td>
<td colspan="6">
<img src="images/index_22.gif" width="465" height="167" alt=""></td>
<td rowspan="6">
<img src="images/index_23.gif" width="11" height="289" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="167" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/index_24.gif" width="471" height="39" alt=""></td>
<td colspan="6" rowspan="2">
<img src="images/index_25.gif" width="465" height="47" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3" bgcolor="#360A4B"> </td>
<td colspan="7">
<img src="images/index_27.gif" width="359" height="8" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="4">
<img src="images/index_28.gif" width="128" height="82" alt=""></td>
<td colspan="10" bgcolor="#260735">Welkom!</td>
<td>
<img src="images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td colspan="10" rowspan="2">
<img src="images/index_30.gif" width="705" height="29" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/index_31.gif" width="120" height="30" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/index_32.gif" width="448" height="7" alt=""></td>
<td colspan="4" rowspan="3">
<img src="images/index_33.gif" width="268" height="260" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_34.gif" width="8" height="297" alt=""></td>
<td colspan="4" bgcolor="#84539C">blab</td>
<td rowspan="3">
<img src="images/index_36.gif" width="40" height="297" alt=""></td>
<td colspan="7" bgcolor="#84539C">blablabla</td>
<td>
<img src="images/spacer.gif" width="1" height="243" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/index_38.gif" width="200" height="54" alt=""></td>
<td colspan="7" rowspan="2">
<img src="images/index_39.gif" width="448" height="54" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_40.gif" width="268" height="44" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td colspan="19" bgcolor="#260735">© Copyright 2010 Uw website/bedrijf. All Rights Reserved</td>
<td>
<img src="images/spacer.gif" width="1" height="69" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="77" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="150" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="77" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="107" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="96" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="96" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="157" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="31" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="shortcut icon" href="images/favicon.ico">
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (index.psd) -->
<table width="1025" height="769" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
<td rowspan="14">
<img src="images/index_01.gif" width="1" height="768" alt=""></td>
<td colspan="19">
<img src="images/index_02.gif" width="1023" height="25" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<td rowspan="12">
<img src="images/index_03.gif" width="28" height="674" alt=""></td>
<td colspan="3" background="images/index_04.gif"><a href="index.html">Home</a></td>
<td rowspan="2">
<img src="images/index_05.gif" width="4" height="81" alt=""></td>
<td colspan="3" background="images/index_06.gif"><a href="tab2.html">Producten</a></td>
<td rowspan="2">
<img src="images/index_07.gif" width="4" height="81" alt=""></td>
<td colspan="3" background="images/index_08.gif"><a href="tab3.html">Diensten</a></td>
<td rowspan="2">
<img src="images/index_09.gif" width="5" height="81" alt=""></td>
<td colspan="2" background="images/index_10.gif"><a href="tab4.html">Links</a></td>
<td rowspan="2">
<img src="images/index_11.gif" width="4" height="81" alt=""></td>
<td colspan="2" background="images/index_12.gif"><a href="contact.html">Contact</a></td>
<td rowspan="12">
<img src="images/index_13.gif" width="31" height="674" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="61" alt=""></td>
<tr>
<td colspan="3">
<img src="images/index_14.gif" width="197" height="20" alt=""></td>
<td colspan="3">
<img src="images/index_15.gif" width="197" height="20" alt=""></td>
<td colspan="3">
<img src="images/index_16.gif" width="193" height="20" alt=""></td>
<td colspan="2">
<img src="images/index_17.gif" width="192" height="20" alt=""></td>
<td colspan="2">
<img src="images/index_18.gif" width="168" height="20" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="20" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/index_19.gif" width="8" height="206" alt=""></td>
<td colspan="8">
<img src="images/index_20.gif" width="471" height="167" alt=""></td>
<td rowspan="3">
<img src="images/index_21.gif" width="9" height="214" alt=""></td>
<td colspan="6">
<img src="images/index_22.gif" width="465" height="167" alt=""></td>
<td rowspan="6">
<img src="images/index_23.gif" width="11" height="289" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="167" alt=""></td>
</tr>
<tr>
<td colspan="8">
<img src="images/index_24.gif" width="471" height="39" alt=""></td>
<td colspan="6" rowspan="2">
<img src="images/index_25.gif" width="465" height="47" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="39" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="3" bgcolor="#360A4B"> </td>
<td colspan="7">
<img src="images/index_27.gif" width="359" height="8" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="8" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="4">
<img src="images/index_28.gif" width="128" height="82" alt=""></td>
<td colspan="10" bgcolor="#260735">Welkom!</td>
<td>
<img src="images/spacer.gif" width="1" height="46" alt=""></td>
</tr>
<tr>
<td colspan="10" rowspan="2">
<img src="images/index_30.gif" width="705" height="29" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="6" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<img src="images/index_31.gif" width="120" height="30" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="23" alt=""></td>
</tr>
<tr>
<td colspan="7">
<img src="images/index_32.gif" width="448" height="7" alt=""></td>
<td colspan="4" rowspan="3">
<img src="images/index_33.gif" width="268" height="260" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/index_34.gif" width="8" height="297" alt=""></td>
<td colspan="4" bgcolor="#84539C">blab</td>
<td rowspan="3">
<img src="images/index_36.gif" width="40" height="297" alt=""></td>
<td colspan="7" bgcolor="#84539C">blablabla</td>
<td>
<img src="images/spacer.gif" width="1" height="243" alt=""></td>
</tr>
<tr>
<td colspan="4" rowspan="2">
<img src="images/index_38.gif" width="200" height="54" alt=""></td>
<td colspan="7" rowspan="2">
<img src="images/index_39.gif" width="448" height="54" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="10" alt=""></td>
</tr>
<tr>
<td colspan="4">
<img src="images/index_40.gif" width="268" height="44" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="44" alt=""></td>
</tr>
<tr>
<td colspan="19" bgcolor="#260735">© Copyright 2010 Uw website/bedrijf. All Rights Reserved</td>
<td>
<img src="images/spacer.gif" width="1" height="69" alt=""></td>
</tr>
<tr>
<td>
<img src="images/spacer.gif" width="1" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="28" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="8" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="112" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="77" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="7" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="40" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="150" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="77" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="9" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="107" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="5" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="96" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="96" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="4" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="157" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="11" height="1" alt=""></td>
<td>
<img src="images/spacer.gif" width="31" height="1" alt=""></td>
<td></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
Gewijzigd op 09/07/2010 17:41:53 door Stef ter Braak
table { /*table!!*/
font-family : Verdana, Arial, Helvetica, sans-serif;
font-style : italic;
font-size : 12px;
}
"En hoe voorkom ik dat link tekst niet meer underlined is? van b.v. buttons."
Je mag best iets meer googlen hoor. Dit is allemaal makkelijk te vinden door bijvoorbeeld te zoeken op "a underline" of zo.
A {
text-decoration : underline;
}
A:hover {
text-decoration : underline;
}
De bovenste is voor alle links, en de onderste voor als je er over heen gaat.
Wat je template betreft, dan zou je je heel site opnieuw moeten maken in div's. Ik raad je eerst aan wat beter CSS te leren (Als je engels kunt, neem dan deze site door)
Gewijzigd op 09/07/2010 17:48:34 door Michael -
Ik kán het underlinen ook na hover.. maar bedoel juist de standaard underlining van een link weghalen (is lelijk). zeg maar UNunderline ik dacht het op false zetten!?
En over het in het CSS gebruiken, ik had niet begrepen dat je <style type="text/css"> weg moest laten in .css (ben een ongelovelijke noob) ik vond het al raar die doorverwijzing :P
ik heb ook je eerste link eens doorgelezen maar hoe kan ik td vervangen door div (ken div beter maar weet niet hoe ik het moet vervangen)
Groetjes en heeeel erg bedankt voor je lessen!
Stef
Gewijzigd op 09/07/2010 18:02:06 door Stef ter Braak
text-decoration : none;
}
A:hover {
text-decoration : none;
}
Je kunt td niet eventjes veranderen in div. Je zou alle table/td/tr dingen weg moeten halen, en moeten kijken waar je je div's plaatst en hoe je dit weer op z'n plek gaat krijgen. Of terwijl, gewoon opnieuw maken zonder tables.