Hulp nodig met DIV's!!!
Code van php/html gebeuren:
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
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
<?php
echo '<body>
<div class="website">
<div class="header">
<div class="container-header">
<div class="header2">
<div class="header-left"></div>
<div class="header-midden">
<div class="header-logo"><a href="#"><img src="images/Hugo_03.jpg" border="0" alt="Startpagina"></a></div>
<div class="header-midden2"></div>
<div class="header-content"></div>
<div class="header-menu">
</div>
</div>
<div class="header-right"></div>
</div>
</div>
</div>
<div class="content">
<div class="container-content">
<div class="content2">
<div class="content-left"></div>
<div class="content3">
<div class="content-midden-left">';
include('includes/agenda.php');
include('includes/banners.php');
echo '</div>
<div class="content-midden-right">
<div class="titel">
<div class="titel-1"></div>
<div class="titel-2">Lorem Ipsum</div>
<div class="titel-3"></div>
<div class="titel-4"></div>
<div class="titel-5"></div>
</div>
<div style="width: 655px; text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, nunc id pharetra pulvinar, neque nisi posuere ligula, eu euismod eros nisl vitae metus. Nam ultricies erat non libero euismod ultrices. Suspendisse diam pede, pulvinar nec, blandit vitae, mollis non, mi. Aliquam non dolor. Fusce molestie, leo vitae viverra feugiat, nunc nibh tincidunt lacus, ac vestibulum sapien libero id lorem. Nulla scelerisque commodo mauris. Aliquam commodo metus eu lacus. Curabitur in pede. Cras porta ornare urna. Cras quis leo et justo dignissim fringilla. Integer sapien.
<p>
Duis tellus enim, vulputate ac, laoreet sed, tincidunt vel, dui. Sed massa. Nam elit dui, elementum fringilla, volutpat vel, malesuada sed, lorem. Maecenas lacus turpis, eleifend vitae, convallis sit amet, feugiat ac, ante. Nunc sed mi porttitor enim hendrerit pellentesque. Morbi dapibus dolor in enim. Quisque dignissim, erat non euismod sodales, risus arcu hendrerit dui, feugiat porttitor erat mi a lacus. Curabitur sodales nisl nec mauris. Sed sit amet orci porttitor nunc congue fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Maecenas commodo. Quisque arcu quam, condimentum a, luctus nec, porta quis, lectus.
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus interdum. Nunc sollicitudin eros vel arcu. Nulla facilisi. Mauris elementum, dolor eget laoreet tempus, orci purus ornare magna, et sagittis tortor magna id ipsum. Etiam tincidunt felis fermentum nulla. Cras suscipit massa id odio. Aenean magna pede, sagittis non, pretium ac, tincidunt a, ante. Duis vitae magna vestibulum odio dictum porttitor. Sed pharetra magna et lacus. Vivamus rhoncus, justo ut tempus ornare, pede mauris gravida felis, at aliquam nibh arcu in est. Phasellus id est. Ut vestibulum sodales est. Praesent urna neque, accumsan et, molestie vitae, dapibus et, sem.
<p>
Duis pellentesque, nisl eget dictum pretium, nunc velit porta arcu, id sodales sem nisi non est. Duis facilisis justo ut mi. Sed tincidunt dignissim erat. Morbi ullamcorper, lorem vitae pulvinar pharetra, dolor nisl dictum ipsum, sagittis tristique neque elit eget pede. Proin tortor magna, tincidunt in, commodo sit amet, condimentum malesuada, turpis. Morbi tempus bibendum nunc. Nunc sollicitudin. Vestibulum adipiscing urna nec dolor. Pellentesque tincidunt, velit vitae tristique dapibus, leo augue mollis lectus, non malesuada augue pede et leo. Vivamus venenatis, augue vitae tincidunt malesuada, massa lacus eleifend ante, et commodo diam eros eu purus. Curabitur metus enim, mattis sed, viverra sit amet, posuere non, lectus. Nulla facilisi.
<p>
Mauris lacus urna, laoreet sit amet, pulvinar a, fermentum in, enim. In eleifend turpis at pede. Integer nibh. Phasellus nisl ante, cursus sed, bibendum id, ornare et, dui. Nunc ullamcorper pretium purus. Cras adipiscing, purus eu dapibus rhoncus, est augue congue nibh, ut egestas lacus sem ac libero. Nulla facilisi. Cras eleifend nulla ac felis. Phasellus ac tellus. Duis pretium. Quisque semper ultrices ante.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, nunc id pharetra pulvinar, neque nisi posuere ligula, eu euismod eros nisl vitae metus. Nam ultricies erat non libero euismod ultrices. Suspendisse diam pede, pulvinar nec, blandit vitae, mollis non, mi. Aliquam non dolor. Fusce molestie, leo vitae viverra feugiat, nunc nibh tincidunt lacus, ac vestibulum sapien libero id lorem. Nulla scelerisque commodo mauris. Aliquam commodo metus eu lacus. Curabitur in pede. Cras porta ornare urna. Cras quis leo et justo dignissim fringilla. Integer sapien.
<p>
Duis tellus enim, vulputate ac, laoreet sed, tincidunt vel, dui. Sed massa. Nam elit dui, elementum fringilla, volutpat vel, malesuada sed, lorem. Maecenas lacus turpis, eleifend vitae, convallis sit amet, feugiat ac, ante. Nunc sed mi porttitor enim hendrerit pellentesque. Morbi dapibus dolor in enim. Quisque dignissim, erat non euismod sodales, risus arcu hendrerit dui, feugiat porttitor erat mi a lacus. Curabitur sodales nisl nec mauris. Sed sit amet orci porttitor nunc congue fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Maecenas commodo. Quisque arcu quam, condimentum a, luctus nec, porta quis, lectus.
</div>
</div>
<div class="content-bottom"></div>
</div>
<div class="content-right"></div>
</div>
</div>
</div>
<div class="footer">
<div class="container-footer">
<div class="footer2">
<div class="footer-left"></div>
<div class="footer-midden"></div>
<div class="footer-right"></div>
</div>
</div>
</div>
</div>
</body>';
?>
echo '<body>
<div class="website">
<div class="header">
<div class="container-header">
<div class="header2">
<div class="header-left"></div>
<div class="header-midden">
<div class="header-logo"><a href="#"><img src="images/Hugo_03.jpg" border="0" alt="Startpagina"></a></div>
<div class="header-midden2"></div>
<div class="header-content"></div>
<div class="header-menu">
</div>
</div>
<div class="header-right"></div>
</div>
</div>
</div>
<div class="content">
<div class="container-content">
<div class="content2">
<div class="content-left"></div>
<div class="content3">
<div class="content-midden-left">';
include('includes/agenda.php');
include('includes/banners.php');
echo '</div>
<div class="content-midden-right">
<div class="titel">
<div class="titel-1"></div>
<div class="titel-2">Lorem Ipsum</div>
<div class="titel-3"></div>
<div class="titel-4"></div>
<div class="titel-5"></div>
</div>
<div style="width: 655px; text-align: left;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, nunc id pharetra pulvinar, neque nisi posuere ligula, eu euismod eros nisl vitae metus. Nam ultricies erat non libero euismod ultrices. Suspendisse diam pede, pulvinar nec, blandit vitae, mollis non, mi. Aliquam non dolor. Fusce molestie, leo vitae viverra feugiat, nunc nibh tincidunt lacus, ac vestibulum sapien libero id lorem. Nulla scelerisque commodo mauris. Aliquam commodo metus eu lacus. Curabitur in pede. Cras porta ornare urna. Cras quis leo et justo dignissim fringilla. Integer sapien.
<p>
Duis tellus enim, vulputate ac, laoreet sed, tincidunt vel, dui. Sed massa. Nam elit dui, elementum fringilla, volutpat vel, malesuada sed, lorem. Maecenas lacus turpis, eleifend vitae, convallis sit amet, feugiat ac, ante. Nunc sed mi porttitor enim hendrerit pellentesque. Morbi dapibus dolor in enim. Quisque dignissim, erat non euismod sodales, risus arcu hendrerit dui, feugiat porttitor erat mi a lacus. Curabitur sodales nisl nec mauris. Sed sit amet orci porttitor nunc congue fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Maecenas commodo. Quisque arcu quam, condimentum a, luctus nec, porta quis, lectus.
<p>
Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus interdum. Nunc sollicitudin eros vel arcu. Nulla facilisi. Mauris elementum, dolor eget laoreet tempus, orci purus ornare magna, et sagittis tortor magna id ipsum. Etiam tincidunt felis fermentum nulla. Cras suscipit massa id odio. Aenean magna pede, sagittis non, pretium ac, tincidunt a, ante. Duis vitae magna vestibulum odio dictum porttitor. Sed pharetra magna et lacus. Vivamus rhoncus, justo ut tempus ornare, pede mauris gravida felis, at aliquam nibh arcu in est. Phasellus id est. Ut vestibulum sodales est. Praesent urna neque, accumsan et, molestie vitae, dapibus et, sem.
<p>
Duis pellentesque, nisl eget dictum pretium, nunc velit porta arcu, id sodales sem nisi non est. Duis facilisis justo ut mi. Sed tincidunt dignissim erat. Morbi ullamcorper, lorem vitae pulvinar pharetra, dolor nisl dictum ipsum, sagittis tristique neque elit eget pede. Proin tortor magna, tincidunt in, commodo sit amet, condimentum malesuada, turpis. Morbi tempus bibendum nunc. Nunc sollicitudin. Vestibulum adipiscing urna nec dolor. Pellentesque tincidunt, velit vitae tristique dapibus, leo augue mollis lectus, non malesuada augue pede et leo. Vivamus venenatis, augue vitae tincidunt malesuada, massa lacus eleifend ante, et commodo diam eros eu purus. Curabitur metus enim, mattis sed, viverra sit amet, posuere non, lectus. Nulla facilisi.
<p>
Mauris lacus urna, laoreet sit amet, pulvinar a, fermentum in, enim. In eleifend turpis at pede. Integer nibh. Phasellus nisl ante, cursus sed, bibendum id, ornare et, dui. Nunc ullamcorper pretium purus. Cras adipiscing, purus eu dapibus rhoncus, est augue congue nibh, ut egestas lacus sem ac libero. Nulla facilisi. Cras eleifend nulla ac felis. Phasellus ac tellus. Duis pretium. Quisque semper ultrices ante.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc convallis, nunc id pharetra pulvinar, neque nisi posuere ligula, eu euismod eros nisl vitae metus. Nam ultricies erat non libero euismod ultrices. Suspendisse diam pede, pulvinar nec, blandit vitae, mollis non, mi. Aliquam non dolor. Fusce molestie, leo vitae viverra feugiat, nunc nibh tincidunt lacus, ac vestibulum sapien libero id lorem. Nulla scelerisque commodo mauris. Aliquam commodo metus eu lacus. Curabitur in pede. Cras porta ornare urna. Cras quis leo et justo dignissim fringilla. Integer sapien.
<p>
Duis tellus enim, vulputate ac, laoreet sed, tincidunt vel, dui. Sed massa. Nam elit dui, elementum fringilla, volutpat vel, malesuada sed, lorem. Maecenas lacus turpis, eleifend vitae, convallis sit amet, feugiat ac, ante. Nunc sed mi porttitor enim hendrerit pellentesque. Morbi dapibus dolor in enim. Quisque dignissim, erat non euismod sodales, risus arcu hendrerit dui, feugiat porttitor erat mi a lacus. Curabitur sodales nisl nec mauris. Sed sit amet orci porttitor nunc congue fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam erat volutpat. Maecenas commodo. Quisque arcu quam, condimentum a, luctus nec, porta quis, lectus.
</div>
</div>
<div class="content-bottom"></div>
</div>
<div class="content-right"></div>
</div>
</div>
</div>
<div class="footer">
<div class="container-footer">
<div class="footer2">
<div class="footer-left"></div>
<div class="footer-midden"></div>
<div class="footer-right"></div>
</div>
</div>
</div>
</div>
</body>';
?>
Code van CSS:
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
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
html, body {
margin: auto;
background: #CECECE;
font-family: Verdana;
font-size: 11px;
color: #000000;
text-decoration: none;
}
div.website {
height: 100%;
width: 100%;
text-align: center;
}
div.content {
height: 515px;
width: 100%;
background: url(../images/Hugo_10.jpg) repeat-x 0 0;
text-align: center;
}
div.container-content {
height: auto;
width: 918px;
margin: 0 auto;
}
div.content2 {
height: 515px;
width: 918px;
}
div.content3 {
float: left;
height: auto;
width: 870px;
background-color: #FFFFFF;
}
div.content-left {
float: left;
height: 515px;
width: 26px;
background: url(../images/Hugo_11.jpg) no-repeat 0 0;
margin: 0;
}
div.content-midden-left {
float: left;
height: 515px;
width: 214px;
background-color: #FFFFFF;
text-align: left;
}
div.content-midden-right {
float: left;
height: auto;
width: 656px;
background-color: #FFFFFF;
text-align: left;
}
div.content-bottom {
height: auto;
width: 870px;
background-color: #FFFFFF;
text-align: center;
}
div.content-right {
float: left;
height: 515px;
width: 22px;
background: url(../images/Hugo_14.jpg) no-repeat 0 0;
}
div.footer {
height: 73px;
width: 100%;
background-color: #CECECE;
margin: 0 auto;
}
margin: auto;
background: #CECECE;
font-family: Verdana;
font-size: 11px;
color: #000000;
text-decoration: none;
}
div.website {
height: 100%;
width: 100%;
text-align: center;
}
div.content {
height: 515px;
width: 100%;
background: url(../images/Hugo_10.jpg) repeat-x 0 0;
text-align: center;
}
div.container-content {
height: auto;
width: 918px;
margin: 0 auto;
}
div.content2 {
height: 515px;
width: 918px;
}
div.content3 {
float: left;
height: auto;
width: 870px;
background-color: #FFFFFF;
}
div.content-left {
float: left;
height: 515px;
width: 26px;
background: url(../images/Hugo_11.jpg) no-repeat 0 0;
margin: 0;
}
div.content-midden-left {
float: left;
height: 515px;
width: 214px;
background-color: #FFFFFF;
text-align: left;
}
div.content-midden-right {
float: left;
height: auto;
width: 656px;
background-color: #FFFFFF;
text-align: left;
}
div.content-bottom {
height: auto;
width: 870px;
background-color: #FFFFFF;
text-align: center;
}
div.content-right {
float: left;
height: 515px;
width: 22px;
background: url(../images/Hugo_14.jpg) no-repeat 0 0;
}
div.footer {
height: 73px;
width: 100%;
background-color: #CECECE;
margin: 0 auto;
}
Alvast bedankt!
Gewijzigd op 01/01/1970 01:00:00 door Joakim Broden
HTML: 56 Errors
CSS: 5 Errors.
Edit:
En ik raad je ook aan niet zoveel div's te gebruiken. Als ik de div's omlijn met behulp van de Webdeveloper's Toolbar extensie (Information -> Display Div Order) in Firefox lijkt het wel een werk van Piet Mondriaan, zoveel lijntjes en blokjes :P
Gewijzigd op 01/01/1970 01:00:00 door Winston Smith
Gewijzigd op 01/01/1970 01:00:00 door Joakim Broden
Een header
Een content
Een footer
Maar als ik iets verkeerd doe of de opbouw kan beteren moet je het zeggen, want ik ben net met DIV's begonnen dus zullen er nog veel fouten inzitten.
Globaal
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
<div id="container">
<div id="header"></div>
<div id="main">
<div id="kolomzijkant"></div>
<div id="content"></div>
</div>
</div>
<div id="header"></div>
<div id="main">
<div id="kolomzijkant"></div>
<div id="content"></div>
</div>
</div>
Dan ben je er al bijna
Over het algemeen zijn er overigens meerdere wegen die naar Rome leiden; in het bovenstaande voorbeeld van Niek (zo had ik het overigens ook in mijn hoofd ongeveer) kan je bijvoorbeeld ook nog een div gebruiken die de "kolomzijkant" (die ik anders zou noemen) en de "content" div's omsluiten. Wat je je vooral moet afvragen is of het toevoegen van een div nuttig is, waarom zou je hem erbij doen, of waarom niet?
Edit:
Je manier van inspringen is trouwens wel erg netjes! :D
En een div voor ieder plaatje hoeft dus echt niet! Dat is 'divitis' (zie link in mijn eerste reactie), je kan een img ook zonder div prima opmaken met CSS (evt. met behulp van een class of id).
Gewijzigd op 01/01/1970 01:00:00 door Winston Smith
Je hebt gelijk dat de naamgeving van kolomzijkant niet erg goed is gekozen, maar dat deed ik even voor de duidelijkheid nu.
En het is inderdaad zo dat je als beginneling nog te veel divs gaat gebruiken. Eigenlijk is dat alleen maar lastiger om te bouwen. Je leert er inderdaad van. Je moet heel simpel denken, gebruik niet voor elk randje ed weer een div, maar regel dit bijv met backgrounds of borders.
Als ik nieuwsberichten heb, zet ik er toch wel een container omheen, zelfde geldt voor een forumbericht. Dat komt in een div terecht. De opmaak en tekst en dergelijke komt natuurlijk door p`s en <h> en dergelijke, maar div staat zoals jullie weten voor divisions. En als ik iets moet groeperen, wat veel voorkomt, doe ik dat
Quote:
Ah ja, niet gezien, excuses. Maar je kan die div dus inderdaad ook weghalen, dat maakt in principe niet zoveel uit (alhoewel ik het 'veiliger'-argument wel snap, dat heb ik zelf ook).Kasper, kijk eens goed, ik gebruik ook een div (main) die die andere 2 om sluit. Dit doe ik omdat de kolomzijkant en de content zullen gaan floaten. Het hoeft niet perse, maar ik vind het wel 'veiliger'.
Quote:
Dat is natuurlijk ook de juiste instelling, maar ik denk wel dat je je dan moet afvragen of 'iets' wel een groep vormt. Het is een beetje te vergelijken met tabellen, die werden vroeger (en helaas tegenwoordig ook nog) te pas en te onpas gebruikt - zelfs voor de opmaak van websites. <table> moet je natuurlijk ook enkel gebruiken voor tabulaire gegevens, <p> enkel voor paragrafen en <h1>, <h2> et cetera enkel voor koppen. Overigens betrap ik mijzelf ook nog wel op het verkeerde gebruik van div's en dergelijke.En als ik iets moet groeperen, wat veel voorkomt, doe ik dat