Opmaak problemen
- Bij de horizontale lijnen is te zien dat het blok uitsteekt naar links, ondanks dat ik de lijn breedte
smaller heb gemaakt dan 600.
- Onderaan is een paars blok. Deze is niet even breed als het witte blok daarboven (smaller). Omdat er
aan de onderkant en zijkant dus een witte baan te zien was dacht ik dat dit op te lossen was met een
border in dezelfde kleur als het blok. Maar helaas.
- Tevens wil ik een marge links van de tekst. Dus links van het "bericht" en van "tekst". Ook dit krijg
ik niet voor elkaar.
Kan iemand mij adviseren waar de fouten zitten en hoe ik dit kan oplossen. Alvast bedankt.
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
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contactformulier</title>
<style type="text/css">
a {color: #4A72AF;}
body, #header h1, #header h2, p {margin: 0; padding: 0;}
#main {border: 1px solid #cfcece;}
img {display: block;}
#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }
#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 20px; margin-bottom: 0 !important; padding-bottom: 0; }
#header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px; }
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}
h3 {font-size: 35px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
h4 {font-size: 25px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
h5 {font-size: 12px; color: #575959 !important; font-family: Arial, Helvetica, sans-serif; }
h6 {font-size: 12px; color: #FFFFFF !important; font-family: Arial, Helvetica, sans-serif; }
p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="10" bgcolor="e4e4e4"><tr><td>
<table id="main" width="600" align="center" cellpadding="10" cellspacing="0" bgcolor="FFFFFF" style="border:1px solid #FFFFFF;">
<tr>
<td>
<table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="FFFFFF">
<tr>
<td><img src="http://www.website.nl/plaatje.jpg" width="250" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td valign="top">
<table id="foto" cellpadding="5" cellspacing="5" align="center">
<tr>
<td bgcolor="575959"><img src="http://www.website.nl/plaatje.jpg" width="150"
</td></tr>
</table>
</td>
</tr>
<table id="foto" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="FFFFFF" style="border:1px solid #FFFFFF;">
<tr>
<td>
<BR>
<hr size="1" width="598" color="575959" align="center">
Bericht:
'.$_POST['bericht'].'
<hr size="1" width="598" color="575959" align="center">
<BR>
</tr>
</td>
</table>
<table id="foot" width="602" cellpadding="0" cellspacing="0" align="center" bgcolor="DD0079" style="border:4px solid #bgcolor="DD0079;">
<tr>
<td><h6>Test</h6></td>
</tr>
</table>
</td>
</body>
</table>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contactformulier</title>
<style type="text/css">
a {color: #4A72AF;}
body, #header h1, #header h2, p {margin: 0; padding: 0;}
#main {border: 1px solid #cfcece;}
img {display: block;}
#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }
#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 20px; margin-bottom: 0 !important; padding-bottom: 0; }
#header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px; }
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}
h3 {font-size: 35px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
h4 {font-size: 25px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
h5 {font-size: 12px; color: #575959 !important; font-family: Arial, Helvetica, sans-serif; }
h6 {font-size: 12px; color: #FFFFFF !important; font-family: Arial, Helvetica, sans-serif; }
p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="10" bgcolor="e4e4e4"><tr><td>
<table id="main" width="600" align="center" cellpadding="10" cellspacing="0" bgcolor="FFFFFF" style="border:1px solid #FFFFFF;">
<tr>
<td>
<table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="FFFFFF">
<tr>
<td><img src="http://www.website.nl/plaatje.jpg" width="250" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td valign="top">
<table id="foto" cellpadding="5" cellspacing="5" align="center">
<tr>
<td bgcolor="575959"><img src="http://www.website.nl/plaatje.jpg" width="150"
</td></tr>
</table>
</td>
</tr>
<table id="foto" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="FFFFFF" style="border:1px solid #FFFFFF;">
<tr>
<td>
<BR>
<hr size="1" width="598" color="575959" align="center">
Bericht:
'.$_POST['bericht'].'
<hr size="1" width="598" color="575959" align="center">
<BR>
</tr>
</td>
</table>
<table id="foot" width="602" cellpadding="0" cellspacing="0" align="center" bgcolor="DD0079" style="border:4px solid #bgcolor="DD0079;">
<tr>
<td><h6>Test</h6></td>
</tr>
</table>
</td>
</body>
</table>
</html>
Wat heb ik gedaan:
- Breedte van de lijn op 100%
- De kolom een padding gegeven van 10 pixels.
Wel wil ik zeggen dat je code slechter dan slecht is. Geen structuur en templates uitwerken doen we al jaren in divs en niet in tabellen.
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
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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contactformulier</title>
<style type="text/css">
a {color: #4A72AF;}
body, #header h1, #header h2, p {margin: 0; padding: 0;}
#main {border: 1px solid #cfcece;}
img {display: block;}
#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }
#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 20px; margin-bottom: 0 !important; padding-bottom: 0; }
#header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px; }
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}
h3 {font-size: 35px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
h4 {font-size: 25px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
h5 {font-size: 12px; color: #575959 !important; font-family: Arial, Helvetica, sans-serif; }
h6 {font-size: 12px; color: #FFFFFF !important; font-family: Arial, Helvetica, sans-serif; }
p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="10" bgcolor="e4e4e4"><tr><td>
<table id="main" width="600" align="center" cellpadding="10" cellspacing="0" bgcolor="FFFFFF" style="border:1px solid #FFFFFF;">
<tr>
<td>
<table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="FFFFFF">
<tr>
<td><img src="http://www.website.nl/plaatje.jpg" width="250" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td valign="top">
<table id="foto" cellpadding="5" cellspacing="5" align="center">
<tr>
<td bgcolor="575959"><img src="http://www.website.nl/plaatje.jpg" width="150"
</td></tr>
</table>
</td>
</tr>
<table id="foto" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="FFFFFF" style="border:1px solid #FFFFFF;">
<tr>
<td style="padding: 0 10px 0 10px;">
<BR>
<hr size="1" width="100%" color="575959" align="center">
Bericht:
'.$_POST['bericht'].'
<hr size="1" width="100%" color="575959" align="center">
<BR>
</tr>
</td>
</table>
<table id="foot" width="602" cellpadding="0" cellspacing="0" align="center" bgcolor="DD0079" style="border:4px solid #bgcolor="DD0079;">
<tr>
<td style="padding: 10px 10px 0 10px;"><h6>Test</h6></td>
</tr>
</table>
</td>
</body>
</table>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Contactformulier</title>
<style type="text/css">
a {color: #4A72AF;}
body, #header h1, #header h2, p {margin: 0; padding: 0;}
#main {border: 1px solid #cfcece;}
img {display: block;}
#top-message p, #bottom-message p {color: #3f4042; font-size: 12px; font-family: Arial, Helvetica, sans-serif; }
#header h1 {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 24px; margin-bottom: 0!important; padding-bottom: 0; }
#header h2 {color: #ffffff !important; font-family: Arial, Helvetica, sans-serif; font-size: 20px; margin-bottom: 0 !important; padding-bottom: 0; }
#header p {color: #ffffff !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; font-size: 12px; }
h1, h2, h3, h4, h5, h6 {margin: 0 0 0.8em 0;}
h3 {font-size: 35px; color: #444444 !important; font-family: Arial, Helvetica, sans-serif; }
h4 {font-size: 25px; color: #4A72AF !important; font-family: Arial, Helvetica, sans-serif; }
h5 {font-size: 12px; color: #575959 !important; font-family: Arial, Helvetica, sans-serif; }
h6 {font-size: 12px; color: #FFFFFF !important; font-family: Arial, Helvetica, sans-serif; }
p {font-size: 12px; color: #444444 !important; font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", sans-serif; line-height: 1.5;}
</style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="10" bgcolor="e4e4e4"><tr><td>
<table id="main" width="600" align="center" cellpadding="10" cellspacing="0" bgcolor="FFFFFF" style="border:1px solid #FFFFFF;">
<tr>
<td>
<table id="header" cellpadding="10" cellspacing="0" align="center" bgcolor="FFFFFF">
<tr>
<td><img src="http://www.website.nl/plaatje.jpg" width="250" /></td>
</tr>
</table>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td valign="top">
<table id="foto" cellpadding="5" cellspacing="5" align="center">
<tr>
<td bgcolor="575959"><img src="http://www.website.nl/plaatje.jpg" width="150"
</td></tr>
</table>
</td>
</tr>
<table id="foto" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="FFFFFF" style="border:1px solid #FFFFFF;">
<tr>
<td style="padding: 0 10px 0 10px;">
<BR>
<hr size="1" width="100%" color="575959" align="center">
Bericht:
'.$_POST['bericht'].'
<hr size="1" width="100%" color="575959" align="center">
<BR>
</tr>
</td>
</table>
<table id="foot" width="602" cellpadding="0" cellspacing="0" align="center" bgcolor="DD0079" style="border:4px solid #bgcolor="DD0079;">
<tr>
<td style="padding: 10px 10px 0 10px;"><h6>Test</h6></td>
</tr>
</table>
</td>
</body>
</table>
</html>
- tables gebruiken voor je pagina layout is niet meer van deze tijd. verander dat naar div's. Tables zijn namelijk erg onoverzichtelijk en dat is waarschijnlijk ook de reden waarom je HTML niet klopt.
- ga netjes inspringen, je code valt zo niet te lezen.
- inline opmaak niet meer gebruiken:
dus niet:
maar:
alle andere zaken die met stijlen te maken hebben nu in de css zetten:
Gewijzigd op 06/07/2014 16:21:31 door Frank Nietbelangrijk
Het feit dat de <table> later wordt afgesloten van de <body> zegt al genoeg.
Hoe komt die daar/wat doet die daar?
Of heb je alles in een variabele staan?
De code met de post functie gebruik ik om een opmerking te plaatsen die via php wordt verwerkt. Dit gaat goed.
Ik gebruik dit stukje html voor de opmaak van een e-mail. Wat ik bedoel met 2 is:
De tekst wil ik laten inspringen. Dus een marge links van de tekst (links van het "bericht" in witte gedeelte en van "tekst" in paarse gedeelte).
Frank, echt super goed van je. Bedankt! Ik kan zeker weer verder. Ik heb vandaag veel geleerd van jullie.