Ik ben kort geleden begonnen met HTML/CSS. Nu heb ik een eenvoudige pagina met tabellen gemaakt. Dit werkt zoals ik het wil hebben. Maar nu lees je overal dat tabellen uit de mode zijn dus dacht ik; laat ik het dan maar in een keer goed doen en maken met DIV's. Echter, ik krijg mijn footer (Copyright) maar niet onderaan de pagina zoals het hoort. Die verschijnt steeds : of onderin mijn rechtse deel (blok), of naast mijn rechter deel (blok) boven in.
Echter niet onder de twee blokken.
Indeling pagina:
Header
Twee kolommen (blokken)
Footer
Kan iemand mij enigszins op weg helpen waar de fout zit.
Zowel de html als css files zijn bijgevoegd.
Dank
Johan
Echter niet onder de twee blokken.
Indeling pagina:
Header
Twee kolommen (blokken)
Footer
Kan iemand mij enigszins op weg helpen waar de fout zit.
Zowel de html als css files zijn bijgevoegd.
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
58
59
| <html> <!--------------Dit is het begin van de index pagina--------------->
<head>
<title> "Mijn eerste persoonlijke pagina"</title>
<link rel = "stylesheet"
type = "text/css"
href = "Stijl.css">
</head>
<body> <!--- Begin zichtbare gedeelte van de web pagina ---->
<div id = "container">
<div id = "header">
<H1>Pagina van Pietje puk </H1>
<H5 class = "Navigatie"> Naar de <a href = "Vakantie.html"> Vakantie pagina! </a> </H5>
</div>
<div id = "linker_blok">
<h2>Welkom</h2>
<p>
Welkom op de pagina van Pietje Puk! <br /> <br /> <!---Break--->
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. <br />
Nam euismod adipiscing mi. Donec ut magna in lorem <br />
egestas pharetra. Donec nisl justo, vulputate vehicula, <br />
suscipit suscipit, consequat et, ante. Nunc tincidunt ligula <br />
nec odio. Nam sapien leo, cursus ac, consequat vitae, <br />
posuere in, diam. Donec condimentum cursus enim. <br />
Pellentesque felis. Donec nisi sem, iaculis id, dignissim a, <br />
aliquam ac, velit. Nulla dapibus, lacus at adipiscing <br />
semper, elit metus viverra massa, et porttitor tortor nunc <br />
ut libero. Morbi fermentum suscipit nisi. Mauris magna. <br />
Vestibulum odio pede, posuere ac, vulputate vel, ornare <br />
eget, velit. Pellentesque vitae metus. Ut metus arcu, <br />
semper a, sollicitudin et, tristique sodales, augue. Morbi <br />
tortor orci, sodales ac, lacinia sed, facilisis at, nibh. <br />
</p>
</div>
<div id = "rechter_blok">
<img src = "Bloemen.gif" border = "5"
</div>
<div id = "footer">
<H5> Copyright: Pietje puk </H5>
</div>
</div>
</body> <!--- Einde zichtbare gedeelte van de web pagina ---->
</html> <!--------------Dit is het einde van de index pagina---------------> |
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
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
| /*------------- standaard stijlen -----------------*/
h1, h2, h5 {
margin-left: 50px;
}
body {
font-family: Comic Sans MS;
margin: 0;
padding: 0;
background-image: url(background.gif);
background-repeat: repeat-x-y;
}
p {
font-family: Comic Sans MS;
font-size: 10pt;
color: black;
margin-left: 50px;
margin-top: 20px;
margin-bottom: 20px;
}
a {
text-decoration: underline; /*--- Underline in hyperlinks gebruiken -------*/
}
img {
border-width: 5px;
border-color: blue;
margin: 10 px;
}
#container {
width: 100%;
}
#header {
border: 1px solid black;
margin-top: 5px;
width: 100%;
height: 40px;
}
#linker_blok {
margin-top: 1px;
border: 1px solid black; /* totale border */
float: left;
width: 550 px;
height: 500 px;
background: #ccccff;
}
#rechter_blok {
margin-top: 1px;
border: 1px solid black;
float: left;
width: 500 px;
height: 500 px;
background: #ccccff;
}
#footer {
position: absolute;
clear: both;
border: 1px solid black;
}
.Navigatie {
width: 200px; /*--- Breedte link kolom ---*/
padding-top: 5px;
padding-bottom: 5px;
padding-left: 10px;
border-style: solid;
border-color: gray;
border-width: 2px;
background: white;
}
.copyright { /* Dit is een class */
background-color: #990000;
color: white;
} |
Dank
Johan
:strip_icc():strip_exif()/u/276052/avatar_2.jpg?f=community){kind=avatar}
