Ik zit met een probleem en word er inmiddels helemaal tureluurs van. Het zit zo, ik ben sinds kort in de weer met CSS (na jarenlang tabellen gebruikt te hebben) voor positionering, op zich werkt het allemaal aardig, maar het is even een switch en een hoop 'bugtracking'. Het probleem waarmee ik zit is dat een achtergrondafbeelding in de body over de inhoud van de pagina gaat wanneer ik het venster resize. De afbeelding zit onderaan (met background-position: bottom) en als ik het venster kleiner maak in de hoogte gaat 'ie dus over de rest heen.
In IE7 heb ik dat nu op kunnen lossen door een padding-bottom te gebruiken, maar in Firefox werkt dat dus niet, trekt zich er niets van aan. Wat ik dus wil is dat wanneer je het venster minder hoog maakt alles blijft staan, dus ook de achtergrondafbeelding.
Hieronder mijn code. Ik neem aan dat het allemaal nog niet zo zuivere CSS code is, aangezien ik er pas een dag of 2 echt mee in de weer ben, opmerkingen zijn altijd welkom
De index.php
En de CSS file:
Alvast heel erg bedankt! Ik zit er nu al twee dagen mee te klooien en heb meerdere malen op het punt gestaan terug te gaan naar tabellen
In IE7 heb ik dat nu op kunnen lossen door een padding-bottom te gebruiken, maar in Firefox werkt dat dus niet, trekt zich er niets van aan. Wat ik dus wil is dat wanneer je het venster minder hoog maakt alles blijft staan, dus ook de achtergrondafbeelding.
Hieronder mijn code. Ik neem aan dat het allemaal nog niet zo zuivere CSS code is, aangezien ik er pas een dag of 2 echt mee in de weer ben, opmerkingen zijn altijd welkom
De index.php
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div class="bovenbalk">
<div class="balk_inhoud">
<img src="afbeeldingen/im_logo.gif" class="logo" />
</div> <!-- einde balk_inhoud -->
</div> <!-- einde bovenbalk -->
<div class="gradient">
<div class="pagina">
<img src="afbeeldingen/welkom_blok.png" />
<div class="watwijdoen_inhoud">
<img src="afbeeldingen/monitor_explosie.png" class="monitor" />
</div> <!-- einde watwijdoen_inhoud -->
</div> <!-- einde pagina -->
</div> <!-- einde gradient --> |
En de 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
| html { height: 100%;
}
body { text-align: center;
margin: 0 0 0 0;
cursor: default;
background: url(afbeeldingen/onder_gradient.gif) repeat-x bottom;
height: 100%;
}
div.bovenbalk { width: 100%;
height: 41px;
background: url(afbeeldingen/balk_achtergrond.gif);
}
div.balk_inhoud { width: 680px;
height: 41px;
margin-left: auto;
margin-right: auto;
}
img.logo { float: left;
margin-left: 50px;
}
div.gradient { position: absolute;
top: 41px;
left: 0;
width: 100%;
height: 300px;
background: url(afbeeldingen/boven_gradient.gif);
}
div.pagina { width: 680px;
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}
div.watwijdoen_inhoud { width: 320px;
text-align: left;
float: left;
}
img.monitor { float: left;
margin-left: 10px;
margin-right: 10px;
} |
Alvast heel erg bedankt! Ik zit er nu al twee dagen mee te klooien en heb meerdere malen op het punt gestaan terug te gaan naar tabellen