Forum Moderators: not2easy
I'm stuck with quite an annoying problem. I started working with CSS (the positioning part) only two days ago really, always used tables before. I know, a nasty habbit. However, I've come accross some issues and I've spent a lot of my time 'bugtracking'. Most things I managed to fix myself, however not this time. Feel free to point me on all the nasty CSS I've wrote though ;)
To come to point: my background image in the bottom of the screen (which is in the BODY tag) overlaps my content as soon as I resize the browser window vertically. After some fooling around I managed to get the desired effect in IE7, however not in Firefox. What I want, obviously, is the background image in the bottom to stay on its spot and gradually disappear as soon as the window gets smaller.
I'll give you my code below, I really hope you guys can help me out as I've pretty much spent a day on this...
Btw: I removed some code for stuff like fonts (things that shouldn't matter for this case). Also names are in Dutch, if you want to have something translated for the sake of understanding, ask me. Last thing, hope the mark-up is readable, indenting wasn't really working :)
Index HTML file:
<body>
<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 class="watwijdoen_tekst">
<img src="afbeeldingen/watwijdoen.gif" class="watwijdoen_titel" />
</div> <!-- einde watwijdoen_tekst -->
</div> <!-- einde watwijdoen_inhoud -->
</div> <!-- einde pagina -->
</div> <!-- einde gradient -->
</body>
And the CSS file:
html { height: 100%; }body { text-align: center; margin: 0 0 0 0; cursor: default; height: 100%; background: url(afbeeldingen/onder_gradient.gif) repeat-x bottom; }
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%;
background: url(afbeeldingen/boven_gradient.gif) repeat-x; }
div.pagina { width: 680px; margin-left: auto; margin-right: auto; margin-top: 50px; padding-bottom: 100px; }
div.watwijdoen_inhoud { width: 360px; text-align: left; float: left; }
img.monitor { float: left; margin-left: 10px; margin-right: 10px; }
img.watwijdoen_titel { margin-top: 35px; margin-bottom: 16px; }
img.pijl { margin-right: 6px; position: relative; top: 1px; }
div.watwijdoen_tekst { line-height: 14pt; }
Welcome to WebmasterWorld.
Putting images in the <body> to do what you want is problematical at best. Your best bet is to enclose your entire page in a <div> that contains the background image. Remove this: background: url(afbeeldingen/onder_gradient.gif) repeat-x bottom; from the <body> and create a div like:
CSS
#background {
url(afbeeldingen/onder_gradient.gif)repeat-x bottom left;
margin: 0;
padding: 0 0 WhatEverTheHeightOfTheImageIspx 0;
}
HTML
<div id="background">
<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 class="watwijdoen_tekst">
<img src="afbeeldingen/watwijdoen.gif" class="watwijdoen_titel" />
</div> <!-- einde watwijdoen_tekst -->
</div> <!-- einde watwijdoen_inhoud -->
</div> <!-- einde pagina -->
</div> <!-- einde gradient -->
<br style="clear:both;">
</div> <!-- end background div -->
Two more questions however: first, will it place the background image entirely at the bottom (because I tried something similar but didn't know how to stretch the div completely to the bottom of the screen) and secondly, what does that "clear: both" do at the end?
Sorry for asking perhaps quite obvious things...
Marshall
[edited by: Marshall at 11:54 pm (utc) on Sep. 4, 2007]
Marshall, I would really appreciate if you could have another look at my code. So to restate: when resizing the window vertically the background image in the bottom (and in the back z-axis wise) moves along and goes underneath the context but suddenly stops moving. I really think posting a link here would illustrate and help understanding the case better, but I've read this is against the forum rules... an (abstract) image/sketch perhaps?
Thanks again for your time!
Marshall
Anyway, I found out the lower background gradient stops moving when it 'meets' the background image (also a gradient) in the div.gradient. So to sketch the situation: I have two gradients, one in div.background and one in div.gradient. The first one is placed, obviously, in the top, the other one in the bottom.
I assume the bottom gradient stops here because it goes behind this other gradient then. So when resizing it goes behind the content first and when it moves next to the top gradient it goes behind this one itself. At least that is what I think happens. And, from my (limited) experience makes sense because the structure is like:
<div class="background">
<div class="gradient>
...
</div>
</div>
Anyone a simple solution?
div.gradient {
position: absolute;
top: 41px;
bottom: 0;
left: 0;
width: 100%; background: url(afbeeldingen/boven_gradient.gif) left bottom repeat-x;
}
Marshall
[edited by: Marshall at 3:39 pm (utc) on Sep. 10, 2007]
Marshall
The problem is that when the window is resized down, the pagina and watwijdoen_tekst <div> extend beyond the achtergrond and gradient <div>. As an FYI, I put borders around the <div> to see where they ended. Useful trick. Anyway, to solve the problem, you have to add the following:
to div.achtergrond
min-height 500px;
to div.gradient
min-height: 459px; /* 500px less the top margin of 41px */
Marshall
By the way, really nice design.
[edited by: Marshall at 5:24 pm (utc) on Sep. 10, 2007]
One small question to end this though: is there a way without defining it exactly by pixels? I mean, the content could (and will) vary on the different pages, if the content exceeds 500px I assume I have to raise that value as well? Makes it a bit inflexible if you know what I mean... Ideally you would want the content to determine the height of the boxes.
Marshall
