Ey,
Ik heb een probleempje welke me al uren bezig houd. Nu ben ik ook al geen expert met CSS, maar na enkele Lynda.com cursussen gevolgd te hebben weet ik i.i.g. wel de basisbeginselen. Althans hoop ik.
Wat mij probleem nu is, is dat een achtergrond image van een div (incl. 3 horizontale floats) overruled wordt door de body image in FF. Explorer geeft weer zoals ik het wil hebben, maar in design view in DreamWeaver 8 weer niet. Ik denk dat dit echter een IE bug is - dat deze het wel 'correct' weergeeft - gepaard met mijn onjuiste CSS.
Screenshot Explorer: [url=http://#]link[/url] (link verwijderd)
Screenshot FireFox: [url=http://#]link[/url] (link verwijderd)
Live voorbeeld: [url=http://#]link[/url] (link verwijderd)
Onderstaand de CSS. Ik heb er nog geen opmaak in verwerkt omdat ik graag eerst de opbouw afgerond wil hebben.
De code binnen de body tags is als volgt:
Excuus voor de lange post. Ik weet niet hoe ik het beknopter kan vermelden zonder onvolledig te worden.
Wat ik nu probeer te bereiken is dat de 3 kolommen onderaan een grijze achtergrond krijgen, zoals te zien in de screenshot van IE. Dit d.m.v. xtracontent.bg.gif' welke de hele breedte van de body bestrijkt. Echter wilt me dit maar niet lukken. De body achtergrond image overheerst alles. Zo ook de footer maar daar is de footer image (gelukkig) hoog genoeg. Maar dat terzijde.
Zou ik een minuutje van jullie tijd mogen vragen om hier even naar te kijken waar het precies fout gaat? Waardeer het zeer.
Alvast bedankt.
Ik heb een probleempje welke me al uren bezig houd. Nu ben ik ook al geen expert met CSS, maar na enkele Lynda.com cursussen gevolgd te hebben weet ik i.i.g. wel de basisbeginselen. Althans hoop ik.
Wat mij probleem nu is, is dat een achtergrond image van een div (incl. 3 horizontale floats) overruled wordt door de body image in FF. Explorer geeft weer zoals ik het wil hebben, maar in design view in DreamWeaver 8 weer niet. Ik denk dat dit echter een IE bug is - dat deze het wel 'correct' weergeeft - gepaard met mijn onjuiste CSS.
Screenshot Explorer: [url=http://#]link[/url] (link verwijderd)
Screenshot FireFox: [url=http://#]link[/url] (link verwijderd)
Live voorbeeld: [url=http://#]link[/url] (link verwijderd)
Onderstaand de CSS. Ik heb er nog geen opmaak in verwerkt omdat ik graag eerst de opbouw afgerond wil hebben.
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
| body {
margin:20px 0;
padding:0;
font-family:'Lucida Grande', Verdana, Arial, Sans-Serif;
font-size:62.5%; /* Resets 1em to 10px */
text-align:center;
color:#000000;
background-color:#CCCCCC;
}
#page {
margin:20px auto;
padding:0;
width:660px;
font-size:1.2em;
text-align:left;
background-color:#FFFFFF;
background:url("img/content.bg.gif");
background-position:top;
background-repeat:repeat-y;
}
#header {
margin:0 auto;
padding:0;
width:660px;
background-color:#FFFFFF;
}
#maincontent {
margin :10px 0 10px 0;
padding:0;
width:660px;
text-align:left;
}
#xtraContent {
clear:both;
margin:0;
padding:0;
width:660px;
background: url("img/xtracontent.bg.gif");
background-position:top;
background-repeat:repeat-y;
}
#xtraContent img {
margin-bottom: 2px;
}
#xtraLine {
clear:both;
margin:0 auto;
padding:0;
width:660px;
height:5px;
background: url("img/xtracontent.line.gif");
background-position:top;
background-repeat:no-repeat;
}
#columnA {
float:left;
width:308px;
padding:0;
margin:10px 5px 10px 17px;
display: inline;
}
#columnB {
float:left;
width:308px;
margin:10px 0 10px 5px;
padding:0;
}
#columnC {
float:left;
width:202px;
margin:5px 10px 10px 17px;
padding:0 0 10px 0;
display: inline;
}
#columnD {
float:left;
width:202px;
margin:5px 10px 10px 0;
padding:0;
}
#columnE {
float:left;
width:202px;
margin:5px 0 10px 0;
padding:0;
}
#footer {
clear:both;
margin:0;
padding:0;
width:660px;
background: url("img/footer.gif");
background-position:top;
background-repeat:no-repeat;
}
#footer p {
margin-right:17px;
font-size:11px;
text-align:right;
} |
De code binnen de body tags is als volgt:
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
| <div id="page">
<div id="header">
<a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash "><img src="img.noflashA.gif" width="660" height="100" border="0"></a>
</div>
<script type="text/javascript">
var so = new SWFObject("img/header.swf", "movie", "660", "400", "6", "#000000");
so.write("header");
</script>
<div id="mainContent">
<div id="columnA">Dolore praesent ut veniam commodo in autem nisl ullamcorper. Delenit, autem aliquam. At consequat vero dolor esse consequat minim tation vel sed. Velit augue praesent, iriure dolor, ut eros facilisi, et consectetuer vel dolore et blandit enim euismod. Ipsum, feugait duis. Feugiat in eros, eum ad dignissim diam aliquip facilisis. Illum augue quis laoreet sed nulla dolore esse, exerci et hendrerit. Vel esse, luptatum at vel, praesent erat diam feugait ut sit lorem vel illum dignissim delenit nonummy illum. Vero ut in duis at, tincidunt wisi, duis elit, amet feugiat laoreet. Blandit nisl tincidunt nulla nulla minim, vulputate nulla et dolore eros nulla in dolor aliquam erat dolore ex vel.</div>
<div id="columnB">Dolore praesent ut veniam commodo in autem nisl ullamcorper. Delenit, autem aliquam. At consequat vero dolor esse consequat minim tation vel sed. Velit augue praesent, iriure dolor, ut eros facilisi, et consectetuer vel dolore et blandit enim euismod. Ipsum, feugait duis. Feugiat in eros, eum ad dignissim diam aliquip facilisis. Illum augue quis laoreet sed nulla dolore esse, exerci et hendrerit. Vel esse, luptatum at vel, praesent erat diam feugait ut sit lorem vel illum dignissim delenit nonummy illum. Vero ut in duis at, tincidunt wisi, duis elit, amet feugiat laoreet. Blandit nisl tincidunt nulla nulla minim, vulputate nulla et dolore eros nulla in dolor aliquam erat dolore ex vel.</div>
</div>
<div id="xtraContent">
<div id="xtraLine">
</div>
<div id="columnC"><p><img src="img/about.Slippens.jpg" alt="Robert Slippens" width="202" height="72" class="illusC" /><img src="img/about.Stam.jpg" alt="Danny Stam" width="202" height="72" class="illusC" />
<img src="img/bullet-1.gif" width="9" height="9" /> Nulla augue enim sed autem tation enim aliquip lobortis et eum facilisi vero, autem, eum accumsan, consequat. Facilisis quis nibh, iriure blandit quis dolore. Adipiscing in hendrerit ad et dolor hendrerit, dignissim eu commodo, odio consequat consectetuer augue odio facilisi te velit iriure, feugiat. Facilisi nulla, iriure accumsan nonummy. </p>
</div>
<div id="columnD">
<p>Nulla augue enim sed autem tation enim aliquip lobortis et eum facilisi vero, autem, eum accumsan, consequat. Facilisis quis nibh, iriure blandit quis dolore. Adipiscing in hendrerit ad et dolor hendrerit, dignissim eu commodo, odio consequat consectetuer augue odio facilisi te velit iriure, feugiat. Facilisi nulla, iriure accumsan nonummy. At accumsan vulputate ipsum blandit accumsan, nisl. Iriure hendrerit amet vero, wisi consequat. Et dolor, ut dolore minim consequat vel molestie odio ea ut elit elit. Praesent veniam eum nostrud vulputate. Duis nulla exerci nisl in illum vulputate autem ea. Exerci vulputate, minim iusto. Ad, suscipit consequat, nulla enim suscipit ea velit. Exerci molestie wisi nulla. </p>
</div>
<div id="columnE">
<p>Nulla augue enim sed autem tation enim aliquip lobortis et eum facilisi vero, autem, eum accumsan, consequat. Facilisis quis nibh, iriure blandit quis dolore. Adipiscing in hendrerit ad et dolor hendrerit, dignissim eu commodo, odio consequat consectetuer augue odio facilisi te velit iriure, feugiat. Facilisi nulla, iriure accumsan nonummy. At accumsan vulputate ipsum blandit accumsan, nisl. Iriure hendrerit amet vero, wisi consequat. Et dolor, ut dolore minim consequat vel molestie odio ea ut elit elit. Praesent veniam eum nostrud vulputate. </p>
</div>
</div>
<div id="footer">
<p>Copyright</p>
</div>
</div> |
Excuus voor de lange post. Ik weet niet hoe ik het beknopter kan vermelden zonder onvolledig te worden.
Wat ik nu probeer te bereiken is dat de 3 kolommen onderaan een grijze achtergrond krijgen, zoals te zien in de screenshot van IE. Dit d.m.v. xtracontent.bg.gif' welke de hele breedte van de body bestrijkt. Echter wilt me dit maar niet lukken. De body achtergrond image overheerst alles. Zo ook de footer maar daar is de footer image (gelukkig) hoog genoeg. Maar dat terzijde.
Zou ik een minuutje van jullie tijd mogen vragen om hier even naar te kijken waar het precies fout gaat? Waardeer het zeer.
Alvast bedankt.
:strip_exif()/u/50656/andre-scholten-avatar.gif?f=community){kind=avatar}
:strip_exif()/u/3333/pumpkin_avatar.gif?f=community){kind=avatar}
. Muchos gracias. Ik heb ook de clear property gebruikt: na de floats, over de floats heen en na de containter #xtraContent. Alle 3 wilden niet werken. Ik gebruikte het volgende: