oke ik ben niet zo een hele ervaren website bouwer. Dit is denk zelfs de eerste met CSS en divs 
(frames ftw! )
Maareuh het lukt me redelijk. Maar ik zit met een probleempje.
Ik heb het gevoel dat mijn onderste menu buiten de algemene div komt (wrapper). Dit omdat de border opeens niet meer doorloopt. Het onderste menu heeft geen border meer aan de linker en rechter kant terwijl de bovenste menu wel een border krijgt (vanuit wrapper)
De margin van 20 aan de onderkant is ook verdwenen en het menu komt direct aan de onderkant van de pagina.
Zo loopt de tekst in IE (de eerste algemene tekst kop) tegen het bovenste menu aan. in FF doet de padding wel zijn werk.
Voorbeeldje
Screenshot in FF. Menu staat tegen de onderkant zonder borders...
CSS file
Pagina file
BTW nog meer op en aanmerkingen wat gewoon niet klopt in de code?
Validator's keuren het goed... maar dat zegt niet alles.
(frames ftw! )Maareuh het lukt me redelijk. Maar ik zit met een probleempje.
Ik heb het gevoel dat mijn onderste menu buiten de algemene div komt (wrapper). Dit omdat de border opeens niet meer doorloopt. Het onderste menu heeft geen border meer aan de linker en rechter kant terwijl de bovenste menu wel een border krijgt (vanuit wrapper)
De margin van 20 aan de onderkant is ook verdwenen en het menu komt direct aan de onderkant van de pagina.
Zo loopt de tekst in IE (de eerste algemene tekst kop) tegen het bovenste menu aan. in FF doet de padding wel zijn werk.
Voorbeeldje
Screenshot in FF. Menu staat tegen de onderkant zonder borders...
CSS file
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
| @import url(lightbox.css);
body {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
color: black; /*tekstkleur */
padding: 0px 0px 0px 0px; /* ruimte binnen de border boven-rechts-onder-links*/
margin: 0px auto 0px auto; /* ruimte buiten de border boven-rechts-onder-links */
}
/* foto's */
img {
border: 0; /* rand rond een image*/
}
/* de 1ste 2 foto's krijgen rechts een 80px ruimte om de pagina op te vullen, moet makkelijker en mooier kunnen.....*/
img.rechts {
padding: 0px 80px 0px 0px; /* ruimte binnen de border boven-rechts-onder-links*/
}
/*algemene div waar alles in komt */
div#wrapper{
border-top: 1px solid gray; /* rond om een border */
border-bottom: 0px solid gray; /* geen border onderaan, deze wordt al door het menu weergegeven */
border-right: 1px solid gray;
border-left: 1px solid gray;
width: 960px; /* breedte van de pagina */
margin: 20px auto 20px auto; /* ruimte buiten de border boven-rechts-onder-links */
padding: 0px 0px 0px 0px; /* ruimte binnen de border boven-rechts-onder-links*/
background-color: #eee; /* achtergrondkleur */
}
/* kopteksten*/
h1 {
margin: 0px 0px 0px 0px; /* ruimte buiten de border boven-rechts-onder-links */
padding: 20px 20px 25px 20px; /* ruimte binnen de border boven-rechts-onder-links*/
font-size: 28px;
font-weight: bold;
color: orange;
background-image:url('../images/voorpagina.jpg');
background-repeat:no-repeat;
}
/* algemene tekst*/
div#tekst {
margin: 0px 0px 0px 0px; /* ruimte buiten de border boven-rechts-onder-links */
padding: 20px 20px 20px 20px; /* ruimte binnen de border boven-rechts-onder-links*/
text-align: justify; /* tekst wordt over de complete breedte uitgesmeerd*/
}
/* menu's*/
.menu ul {
float: left; /* */
background-color: #bacde4; /* achtergrondkleur*/
border-top: 1px solid gray; /* */
border-bottom: 1px solid gray; /* */
width: 100%; /* breedte van de pagina*/
padding: 0px 0px 0px 0px; /* ruimte binnen de border boven-rechts-onder-links*/
margin: 0px 0px 0px 0px; /* ruimte buiten de border boven-rechts-onder-links*/
display:block; /* */
}
/* rechterknoppen*/
.menu ul li {
float: right;
display: inline; /* zorgt ervoor dat de knoppen naast elkaar komen en niet onder elkaar */
border-left: 1px solid gray;
border-right: 0px solid gray;
}
/* linkerknoppen*/
.menu ul li.left {
float: left; /* */
display: inline; /* zorgt ervoor dat de knoppen naast elkaar komen en niet onder elkaar */
border-left: 0px solid gray; /* */
border-right: 1px solid gray; /* */
}
/* tekst in de knoppen */
.menu ul li a {
padding: 0px 20px 0px 20px; /* ruimte binnen de border boven-rechts-onder-links*/
margin: 0px 0px 0px 0px; /* ruimte buiten de border boven-rechts-onder-links*/
font-size: 16px; /* */
text-decoration: none; /* */
color: #666; /* */
}
.menu ul li a:hover {
color: #000;
} |
Pagina file
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Marja Jager</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<body>
<div id="wrapper">
<h1>Marja Jager</h1>
<div class="menu">
<ul>
<li class="left"><a href=index.html>Home</a></li>
<li><a href=lessen.html>Lessen en Workshops</a></li>
<li><a href=contact.html>Contact</a></li>
<li><a href=nieuws.html>Nieuws</a></li>
</ul>
</div>
<div id="tekst">
<h3>
Lorem Ipsum dolor sit
</h3>
<p>
Lorem ipsum menandri instructior concludaturque quo ex, unum cetero verear mel ad. Eros autem his at, ne paulo disputationi vim, cu inermis delicatissimi vis. Amet iudico labores et eum, eu ullum inimicus eum. Cu sed iisque forensibus. Ex pro erat nonummy, quot error corpora est ne. No est albucius adipisci, ius
</p>
<p>
lorem integre an. Has te petentium delicatissimi, mel ea sumo voluptua. Dicat etiam audiam no nam, pri cu dicant noster argumentum, an perpetua incorrupte has. Abhorreant voluptatibus sed eu. Pri ex solet mucius accusata, his posse sententiae in. Ei duis labores est, eam graeci patrioque ut, sumo magna signiferumque.
</p>
</div>
<div class="menu">
<ul>
<li><a href=informatie.html>informatie</a></li>
<li><a href=educatie.html>educatie</a></li>
<li><a href=tekeningen.html>tekeningen</a></li>
<li><a href=schilderijen.html>schilderijen</a></li>
</ul>
</div>
</div>
</body>
</html> |
BTW nog meer op en aanmerkingen wat gewoon niet klopt in de code?
Validator's keuren het goed... maar dat zegt niet alles.
:strip_icc():strip_exif()/u/43400/avatar.jpeg?f=community){kind=avatar}
