Hallo,
Ik ben bezig met een kleine portfolio website voor een kennis. Het is voor mij de eerste keer dat ik serieus met webpagina's dus ik ben nog aan het leren.
Ik heb een simpel ontwerp in Photoshop met een header, een content-gedeelte, een side-menu, en een footer. Deze wil ik met CSS en div' jes maken.
Voor de header heb ik een class(weet niet of het zo heet) aangemaakt die ik een top-margin van 10px geef. Deze header is in een andere div genest genaamd page. De top margin van 10px is wel in IE te zien maar niet in Firefox. Zie onderstaand codevoorbeeld.
Ik heb de div'jes een border gegeven om ze zichtbaar te maken.
De header zou nu aan alle kanten een margin van 10px moeten hebben. In IE (of in design weergave van dreamweaver) is de top-margin wel te zien. In Firefox niet.
Iemand een idee?
Ik ben bezig met een kleine portfolio website voor een kennis. Het is voor mij de eerste keer dat ik serieus met webpagina's dus ik ben nog aan het leren.
Ik heb een simpel ontwerp in Photoshop met een header, een content-gedeelte, een side-menu, en een footer. Deze wil ik met CSS en div' jes maken.
Voor de header heb ik een class(weet niet of het zo heet) aangemaakt die ik een top-margin van 10px geef. Deze header is in een andere div genest genaamd page. De top margin van 10px is wel in IE te zien maar niet in Firefox. Zie onderstaand codevoorbeeld.
Cascading Stylesheet:
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
| /* Begin typography & colors */ body { font-family: arial; background-color: #333333; color: #748084; } #page { background-color: #bdb5a3; text-align: center; } #header { text-align: center; border: 1px solid #000000; } #content{ border: 1px solid #000000; } /* End typography & colors */ /* Begin structure */ #page { width: 900px; height: 700px; margin: 100px auto; } #header { border: 1px solid #959596; margin: 10px; } /* End structure */ |
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Homage</title> <link href="styles.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="page"> <div id="header"> <p>This is the header</p> </div> </div> </body> </html> |
Ik heb de div'jes een border gegeven om ze zichtbaar te maken.
De header zou nu aan alle kanten een margin van 10px moeten hebben. In IE (of in design weergave van dreamweaver) is de top-margin wel te zien. In Firefox niet.
Iemand een idee?
[ Voor 11% gewijzigd door Verwijderd op 16-11-2007 13:58 ]