Hallo allemaal 
Sinds kort ben ik aan het stoeien met DIV opmaak i.p.v. de vervloekte TABLES (al hebben die mij nooit in de steek gelaten
)
Ik ben bezig met een website waarin het de bedoeling is dat, ongeacht de inhoud, de pagina altijd netjes gevuld is. Staat er geen tekst dan lopen de afbeeldingen netjes door naar de onderkant van de pagina. Staat er wel tekst dan wordt de pagina langer en komt de achtergrond aan de onderkant te staan. (Volgen jullie het nog?
)
Tijd om het verhaal visueel te maken:
Klik hier om de opmaak te bezichtigen
In IE wordt de pagina wonder boven wonder goed weergegeven. In FF loopt de achtergrond niet netjes door.
Naar mijn mening ligt het aan een van de CSS declaraties (heb er meuk uitgehaald):
En de body bevat:
Wellicht heeft een doorgewinterde CSS heerser een oplossing. Of misschien doe ik iets fout? Ik heb het antwoord iig niet kunnen vinden.
Bedankt voor je hulp!
p.s. de PNG afbeeldingen worden door een javascript netjes weergegeven in IE
Sinds kort ben ik aan het stoeien met DIV opmaak i.p.v. de vervloekte TABLES (al hebben die mij nooit in de steek gelaten
Ik ben bezig met een website waarin het de bedoeling is dat, ongeacht de inhoud, de pagina altijd netjes gevuld is. Staat er geen tekst dan lopen de afbeeldingen netjes door naar de onderkant van de pagina. Staat er wel tekst dan wordt de pagina langer en komt de achtergrond aan de onderkant te staan. (Volgen jullie het nog?
Tijd om het verhaal visueel te maken:
Klik hier om de opmaak te bezichtigen
In IE wordt de pagina wonder boven wonder goed weergegeven. In FF loopt de achtergrond niet netjes door.
Naar mijn mening ligt het aan een van de CSS declaraties (heb er meuk uitgehaald):
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
| html, body {
font-family: Verdana, Arial;
background-color: #8cb4e8;
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-position: center bottom;
text-align: center;
height: 100%;
margin:0;
padding:0;
}
#container {
background-image: url(images/vis_25.png);
text-align: left;
width: 795px;
margin: auto;
padding-top: 160px; /* De padding top declaratie zorgt voor lager begin content */
padding-bottom: 100px; /* De padding bottom declaratie zorgt voor hoger einde content */
}
#content {
font-size: 11px;
background-image: url(images/vis_25.png);
margin-left: 210px;
margin-right: 5px;
margin-bottom: 5px;
padding: 5px;
}
#navigation {
font-size: 11px;
background-image: url(images/vis_25.png);
width: 190px;
float: left;
margin-bottom: 5px;
margin-left: 5px;
padding: 5px;
}
#clear {
clear: both;
margin: 0px;
}
* html #container, #content, #navigation {
height: 100%;
min-height: 100%;
} |
En de body bevat:
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <div id="container">
<div id="header">
<img src="images/logo.png" alt="Chinese tekens">
<h1>Header</h1>
</div>
<p id="clear"></p>
<div id="navigation">
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</div>
<div id="content">
Tekst meuk
</div>
</div> |
Wellicht heeft een doorgewinterde CSS heerser een oplossing. Of misschien doe ik iets fout? Ik heb het antwoord iig niet kunnen vinden.
Bedankt voor je hulp!
p.s. de PNG afbeeldingen worden door een javascript netjes weergegeven in IE
Webdeveloping... -counts to 10- Sigh...