HTMLHelp Forums > Footer problem

rjeeh

Nov 9 2009, 05:46 PM

I've been working on my own little project for a while now, and so far everything went pretty good. I got to the last part of the design (the footer) but I just can't seem to get it right. I've followed the CSS sticky tutorial from http://ryanfait.com/sticky-footer/ and it seems to work pretty good for everyone, but i can't get it to work!

The website is http://www.natuurlijkmiddel.nl (its in dutch)

The CSS:

CODE

* {
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
    background-color: #ffffff;
    margin: 0px;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

h1,h3,h5 {
    font:bold 1.5em Arial, Helvetica, sans-serif;
    margin:0px 0 8px 0;
    color: #179728;
}

h2 {
    font: 1.5em Arial, Helvetica, Verdana, Sans-serif;
    color: #000000;
    margin-bottom: 10px;
}

p    {
    font-size: 13px;
    line-height: 140%;
}

a:link {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #696868;
    text-decoration: none;
}

a:visited {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #696868;
    text-decoration: none;

}

a:hover {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #87d102;


}
a:active {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #696868;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -4em;
}

.footer, .push {
    height: 4em;
    width: 100%;
    color: #000;
}

.fun    {
    color: #696868;
    line-height: 110%;
    font-size: 13px;
    font-family: Arial;
}

.footnote {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

#header {
    position: absolute;
    left: 146px;
    top: 0;
}

#navtop {
    position: absolute;
    width: 85%;
    height: 21px;
    top: 231px;
    background-color: #dad8d9;
    padding-left: 15%;
    padding-top: 3px;
    margin: 0;
}

#navright1 {
    position: absolute;
    background-image: url(images/winkelwagen.jpg);
    background-repeat: no-repeat;
    width: 196px;
    height: 153px;
    top: 255px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
}

#navright2 {
    position: absolute;
    background-image: url(images/laatst.jpg);
    background-repeat: no-repeat;
    width: 196px;
    height: 153px;
    top: 454px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
    padding-right: 20px;
}

#navright3 {
    position: absolute;
    background-image: url(images/informatie2.jpg);
    background-repeat: no-repeat;
    width: 210px;
    height: 153px;
    top: 617px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
}

#top-cat {
    position: absolute;
    background-image: url(images/top-cat.jpg);
    background-repeat: no-repeat;
    font-size: 16px;
    width: 274px;
    height: 57px;
    top: 255px;
    left: 110px;
}

#mid-cat {
    position: relative;
    background-image: url(images/mid-cat.jpg);
    background-repeat: repeat;
    font-size: 16px;
    width: 274px;
    top: 312px;
    left: 110px;
    background-color: white;
    padding-left: 60px;
}

#bottom-cat {
    position: relative;
    background-image: url(images/bottom-cat.jpg);
    background-repeat: no-repeat;
    width: 274px;
    height: 38px;
    top: 312px;
    left: 110px;
}

#maincontent {
    position: absolute;
    background-color: #ffffff;
    top: 255px;
    left: 390px;
    width: 510px;
    height: 600px;
    padding-left: 10px;
    padding-top: 10px;
    z-index: 1;
}

.feature {
    float: right;
    margin: 10px;
}

And the HTML:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="nl" />
<meta name="author" content="NatuurlijkMiddel" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="NatuurlijkMiddel.nl is de website die u wetenschappelijke informatie aanbiedt voor een alledaagse natuurlijke gezondheid! Veel natuurlijke middelen bevatten namelijk stoffen die u beschermen tegen veel voorkomende gezondheidsproblemen." />

<meta name="keywords" content="natuurlijk middel, natuurlijke middelen, natuurlijk, natuurlijke, natuur, middel, middelen, natuurgeneeskrachtige middelen, leven, gezondheid, gezond, genezen, plantaardig, planten,  producten, informatie" />
<title>Natuurlijk Middel - Voor een alledaagse natuurlijke gezondheid</title>

<link href="mainstyle.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div class="wrapper">

        <div id="navtop">

                   <a href="index.html"><u>Home</u></a>
                   <a href="contact.html"><u>Contact</u></a>
                <a href="informatie.html"><u>Informatie</u></a>
            <a href="winkelwagen.html"><u>Winkelwagen</u></a>
            <a href="disclaimer.html"><u>Disclaimer</u></a>
        </div>

        <div id="header"><img src="images/logo.jpg" alt="NatuurlijkMiddel.nl is de website die u wetenschappelijke informatie aanbiedt voor een alledaagse natuurlijke gezondheid! Veel natuurlijke middelen bevatten namelijk stoffen die u beschermen tegen veel voorkomende gezondheidsproblemen." /></div>

        <div id="navright1">
<p class="fun">Op dit moment bieden wij nog geen producten te koop aan.</p>
            </div>


            <div id="navright2">

            </div>

        <div id="navright3">
<a href="mailto:info@natuurlijkmiddel.nl">info@natuurlijkmiddel.nl</a>
            </div>

<div id="maincontent">

<h1>Welkom bij natuurlijk middel</h1><hr />

    <p>
    Tegenwoordig is de roep om meer <strong>natuurlijke producten</strong> en <strong>duurzame initiatieven</strong> erg groot. Dit heeft uiteraard alles te maken met de algemene trend om er een gezondere levenswijze op na te houden.
    </p>

<br />
<br />
<br />
<br />
<br />

</div>

        <div id="top-cat"></div>

            <div id="mid-cat">

<ul>
<li><img src="images/pijl.jpg" alt="" /> <a href="allergie.html">Allergie</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="dementie.html">Alzheimer</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="dementie.html">Dementie</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="gehoor.html">Gehoor</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="hersenen.html">Hersenen</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="huid.html">Huid</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="leeflanger.html">Leef langer</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="adem.html">Slechte adem</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="spiermassa.html">Spiermassa</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="rimpels.html">Rimpels</a></li>
</ul>

            </div>

        <div id="bottom-cat"></div>

    <div class="push"></div>

</div>

<div class="footer">
            <p>Copyright (c) 2009</p>
        </div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11122257-4");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

I know that the code is a bit messy, and It's probably not really difficult to get the footer at the bottom of the page but I really can't get it to work. The footer just appears under the "categorie-tabel", on the left and not where I want it (under the content, at the bottom of the page). I've just started webdesigning so any help would be really appreciated. Thanks for your reply!

aspmkt

Nov 10 2009, 02:46 PM

It might have something to do with your top and left values.

Right now the mid-cat and bottom-cat are the same, but all the rest are different based on where you want the divs on the page.

rjeeh

Nov 10 2009, 03:27 PM

QUOTE(aspmkt @ Nov 10 2009, 02:46 PM)

It might have something to do with your top and left values.

Right now the mid-cat and bottom-cat are the same, but all the rest are different based on where you want the divs on the page.

Hey first of all, thanks for the reply.

I thought something like that myself, since it said something on the ryanfait.com site like: "your div's should all be positioned absolute''. But my categorie-tabel (mid-cat div and bottom-cat div) have to be dynamic. This way, when I add 20 or so links to the navigation tabel, the thing automatically expands. This isnt possible with position: absolute; but has to be done with position: relative;

I've got no clue how to fix it though ..

rjeeh

Nov 11 2009, 07:19 AM

Alright, I developed it a bit further. The footer is now halfway on the page: http://www.natuurlijkmiddel.nl

I think the problem is caused because of the "position: relative;" in #mid-cat and #bottom-cat but I dont know what to do about it. I've tried almost every way of making a footer stick to the bottom of the page, but none of them work.

I can't understand that when I create a:
#page-wrap (the big div with all the content in it)
#footer (which I put outside the main div!)

that the footer div is still placed inside the #page-wrap div!

the new (relevant) CSS code is:

CODE

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background-color: #ffffff;
    margin: 0px;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#page-wrap {
    position: relative;
    min-height: 100%;
    height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: auto;
    background: #ffffff;
    width: 100%;
    height: 100%;
    width: auto;
    color: #000000;
}

html>body #page-wrap {
    height: auto;
    }

.fun    {
    color: #696868;
    line-height: 110%;
    font-size: 13px;
    font-family: Arial;
}

.footnote {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

#header {
    position: absolute;
    left: 146px;
    top: 0;
}

#navtop {
    position: absolute;
    width: 85%;
    height: 21px;
    top: 231px;
    background-color: #dad8d9;
    padding-left: 15%;
    padding-top: 3px;
    margin: 0;
}

#navright1 {
    position: absolute;
    background-image: url(images/winkelwagen.jpg);
    background-repeat: no-repeat;
    width: 196px;
    height: 153px;
    top: 255px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
}

#navright2 {
    position: absolute;
    background-image: url(images/laatst.jpg);
    background-repeat: no-repeat;
    width: 196px;
    height: 153px;
    top: 454px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
    padding-right: 20px;
}

#navright3 {
    position: absolute;
    background-image: url(images/informatie2.jpg);
    background-repeat: no-repeat;
    width: 210px;
    height: 153px;
    top: 617px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
}

#top-cat {
    position: absolute;
    background-image: url(images/top-cat.jpg);
    background-repeat: no-repeat;
    font-size: 16px;
    width: 274px;
    height: 57px;
    top: 255px;
    left: 110px;
}

#mid-cat {
    position: relative;
    background-image: url(images/mid-cat.jpg);
    background-repeat: repeat;
    font-size: 16px;
    width: 274px;
    top: 312px;
    left: 110px;
    background-color: white;
    padding-left: 60px;
}

#bottom-cat {
    position: relative;
    background-image: url(images/bottom-cat.jpg);
    background-repeat: no-repeat;
    width: 274px;
    height: 38px;
    top: 312px;
    left: 110px;
}

#maincontent {
    position: absolute;
    background-color: #ffffff;
    top: 255px;
    left: 390px;
    width: 510px;
    height: 600px;
    padding-left: 10px;
    padding-top: 10px;
    z-index: 1;
}

#footer {
    position: relative;
    bottom: 0px;
    background-color: #dad8d9;
    font-style: #CCC;
    height: 42px;
    width: 100%;
    text-align: center;
    padding-top: 2px;
}

And the HTML is something like:

<div id="page-wrap">
<div id="main-content">ALL CONTENT HERE</div>
</div> 

<div id="footer">Copyright lalalala </div>

Could someone please help me

rjeeh

Nov 11 2009, 07:26 AM

I've posted a topic in the HTML XHTML markup forum already, but I think this is more of a CSS problem.

My problem is with the footer, i just cant get it to stick to the bottom of the page. I've tried almost every way, but it still wont work.

The website is: http://www.natuurlijkmiddel.nl

I think the problem is caused because of the "position: relative;" in #mid-cat and #bottom-cat but I dont know what to do about it.
I just can't understand that when I create a:
#page-wrap (the big div with all the content in it)
#footer (which I put outside the main div!)

that the footer div is still placed inside the #page-wrap div!

the (relevant) CSS code is:

CODE

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    background-color: #ffffff;
    margin: 0px;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

#page-wrap {
    position: relative;
    min-height: 100%;
    height: 100%;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: auto;
    background: #ffffff;
    width: 100%;
    height: 100%;
    width: auto;
    color: #000000;
}

html>body #page-wrap {
    height: auto;
    }

.fun    {
    color: #696868;
    line-height: 110%;
    font-size: 13px;
    font-family: Arial;
}

.footnote {
    font-family: Tahoma, Arial, Helvetica, sans-serif;
    font-size: 10px;
}

#header {
    position: absolute;
    left: 146px;
    top: 0;
}

#navtop {
    position: absolute;
    width: 85%;
    height: 21px;
    top: 231px;
    background-color: #dad8d9;
    padding-left: 15%;
    padding-top: 3px;
    margin: 0;
}

#navright1 {
    position: absolute;
    background-image: url(images/winkelwagen.jpg);
    background-repeat: no-repeat;
    width: 196px;
    height: 153px;
    top: 255px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
}

#navright2 {
    position: absolute;
    background-image: url(images/laatst.jpg);
    background-repeat: no-repeat;
    width: 196px;
    height: 153px;
    top: 454px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
    padding-right: 20px;
}

#navright3 {
    position: absolute;
    background-image: url(images/informatie2.jpg);
    background-repeat: no-repeat;
    width: 210px;
    height: 153px;
    top: 617px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
}

#top-cat {
    position: absolute;
    background-image: url(images/top-cat.jpg);
    background-repeat: no-repeat;
    font-size: 16px;
    width: 274px;
    height: 57px;
    top: 255px;
    left: 110px;
}

#mid-cat {
    position: relative;
    background-image: url(images/mid-cat.jpg);
    background-repeat: repeat;
    font-size: 16px;
    width: 274px;
    top: 312px;
    left: 110px;
    background-color: white;
    padding-left: 60px;
}

#bottom-cat {
    position: relative;
    background-image: url(images/bottom-cat.jpg);
    background-repeat: no-repeat;
    width: 274px;
    height: 38px;
    top: 312px;
    left: 110px;
}

#maincontent {
    position: absolute;
    background-color: #ffffff;
    top: 255px;
    left: 390px;
    width: 510px;
    height: 600px;
    padding-left: 10px;
    padding-top: 10px;
    z-index: 1;
}

#footer {
    position: relative;
    bottom: 0px;
    background-color: #dad8d9;
    font-style: #CCC;
    height: 42px;
    width: 100%;
    text-align: center;
    padding-top: 2px;
}

And the HTML:

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="nl" />
<meta name="author" content="NatuurlijkMiddel" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="NatuurlijkMiddel.nl is de website die u wetenschappelijke informatie aanbiedt voor een alledaagse natuurlijke gezondheid! Veel natuurlijke middelen bevatten namelijk stoffen die u beschermen tegen veel voorkomende gezondheidsproblemen." />

<meta name="keywords" content="natuurlijk middel, natuurlijke middelen, natuurlijk, natuurlijke, natuur, middel, middelen, natuurgeneeskrachtige middelen, leven, gezondheid, gezond, genezen, plantaardig, planten,  producten, contact, contactinformatie" />
<title>Natuurlijk Middel - Voor een alledaagse natuurlijke gezondheid</title>

<link href="mainstyle.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="page-wrap">

        <div id="navtop">

                   <a href="index.html"><u>Home</u></a>      
                   <a href="contact.html"><u>Contact</u></a>      
                <a href="informatie.html"><u>Informatie</u></a>      
            <a href="winkelwagen.html"><u>Winkelwagen</u></a>      
            <a href="disclaimer.html"><u>Disclaimer</u></a>
        </div>

        <div id="header"><img src="images/logo.jpg" alt="NatuurlijkMiddel.nl is de website die u wetenschappelijke informatie aanbiedt voor een alledaagse natuurlijke gezondheid! Veel natuurlijke middelen bevatten namelijk stoffen die u beschermen tegen veel voorkomende gezondheidsproblemen." /></div>

        <div id="navright1">
<p class="fun">Op dit moment bieden wij nog geen producten te koop aan.</p>
            </div>


            <div id="navright2">

            </div>

        <div id="navright3">
<a href="mailto:info@natuurlijkmiddel.nl">info@natuurlijkmiddel.nl</a>
            </div>

<div id="maincontent">

<h1>Informatie</h1><hr />

    <p>
    Voor al uw vragen, opmerkingen en/of tips *beep* u mailen naar: <a href="mailto:info@natuurlijkmiddel.nl">info@natuurlijkmiddel.nl</a>
    </p>

<br />
<br />
<br />

</div>

        <div id="top-cat"></div>

            <div id="mid-cat">

<ul>
<li><img src="images/pijl.jpg" alt="" /> <a href="allergie.html">Allergie</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="dementie.html">Alzheimer</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="dementie.html">Dementie</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="gehoor.html">Gehoor</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="hersenen.html">Hersenen</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="huid.html">Huid</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="leeflanger.html">Leef langer</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="adem.html">Slechte adem</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="spiermassa.html">Spiermassa</a></li>
<li><img src="images/pijl.jpg" alt="" /> <a href="rimpels.html">Rimpels</a></li>
</ul>

            </div>

        <div id="bottom-cat"></div>

</div>

    <div id="footer">
        <p class="footer2">
        © 2009 | www.natuurlijkmiddel.nl | <a href="http://www.internetrechten.nl/disclaimer" target="_blank">disclaimer</a> <br />
        Valid <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.natuurlijkmiddel.nl%2F" target="_blank">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.natuurlijkmiddel.nl%2F" target="_blank">CSS</a>
        </p>

    </div>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-11122257-4");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>

Thanks in advance for anyone who can help me

pandy

Nov 11 2009, 08:21 AM

The footer is not inside #page-wrap. Give #page-wrap a background color and you'll se that it isn't so.

Hey, watch out for Codex Alimentarius!

rjeeh

Nov 11 2009, 08:35 AM

thanks for the reply. I just some changes (the once you suggested) and have a look at the page now:

http://www.natuurlijkmiddel.nl

The footer is now on top of the 'nav-top' div!

How can it get there if the CSS code is:

#footer {
position: relative;
bottom: 0%;
background-color: #dad8d9;
height: 42px;
width: 100%;
text-align: center;
padding-top: 2px;
}

And about the Codex Alimentarius

I will, can you read what the page is about?

Frederiek

Nov 11 2009, 09:40 AM

You really do have the footer in the page-wrap div.

Hence this:

CODE

<div id="footer">
        <p class="footer2">
        © 2009 | www.natuurlijkmiddel.nl | <a href="http://www.internetrechten.nl/disclaimer" target="_blank">disclaimer</a> <br />
        Valid <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.natuurlijkmiddel.nl%2F" target="_blank">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fwww.natuurlijkmiddel.nl%2F" target="_blank">CSS</a>
        </p>

    </div>

</div>

which says it all.

rjeeh

Nov 11 2009, 10:09 AM

yeah I just did that since someone on the forum told me to do that. Now the footer is on top of the "nav-top" div .. When I put the footer under the page-wrap div, it still doesnt work..

thanks for looking at the code though

pandy

Nov 11 2009, 10:28 AM

The content DIV is positioned absoute, thus takes up no space. It's higher than the wrapper and sticks out of it. It won't affect the placement of the footer because of the AP, so the footer is derectly below the wrapper

QUOTE

And about the Codex Alimentarius

I will, can you read what the page is about?

No, but our languages are similar enough for me to understand a few words. You domain would be called naturläkemedel in Swedish. Close enough to understand.

BTW they decide on Codex any day now, don't they?

rjeeh

Nov 11 2009, 11:12 AM

Hey ! I stripped everything from the site just to test:

I got this http://www.natuurlijkmiddel.nl/test/

The markup is like this:

CODE

* {
    margin: 0;
}
html, body {
    height: 100%;
    background-color: #ffffff;
    margin: 0px;
    padding: 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

.wrapper {
    position: relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    background-color: #CCC;
    margin: 0 auto -4em;
}

.footer {
    position: relative;
    height: 4em;
    text-align: center;
    background-color: #999;
    bottom: 0;
}

.push {
    height: 4em;
}

#header {
    position: absolute;
    left: 146px;
    top: 0;
}

#navtop {
    position: absolute;
    width: 85%;
    height: 21px;
    top: 231px;
    background-color: #dad8d9;
    padding-left: 15%;
    padding-top: 3px;
    margin: 0;
}

#top-cat {
    position: absolute;
    background-image: url(images/top-cat.jpg);
    background-repeat: no-repeat;
    font-size: 16px;
    width: 274px;
    height: 57px;
    top: 255px;
    left: 110px;
}

#mid-cat {
    position: relative;
    background-image: url(images/mid-cat.jpg);
    background-repeat: repeat;
    font-size: 16px;
    width: 274px;
    top: 312px;
    left: 110px;
    background-color: white;
    padding-left: 60px;
}

#bottom-cat {
    position: relative;
    background-image: url(images/bottom-cat.jpg);
    background-repeat: no-repeat;
    width: 274px;
    height: 38px;
    top: 312px;
    left: 110px;
}

#navright1 {
    position: absolute;
    background-image: url(images/winkelwagen.jpg);
    background-repeat: no-repeat;
    width: 196px;
    height: 153px;
    top: 255px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
}

#navright2 {
    position: absolute;
    background-image: url(images/laatst.jpg);
    background-repeat: no-repeat;
    width: 196px;
    height: 153px;
    top: 454px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
    padding-right: 20px;
}

#navright3 {
    position: absolute;
    background-image: url(images/informatie2.jpg);
    background-repeat: no-repeat;
    width: 210px;
    height: 153px;
    top: 617px;
    left: 920px;
    padding-left: 10px;
    padding-top: 50px;
}

#maincontent {
    position: absolute;
    background-color: #09F;
    top: 255px;
    left: 390px;
    width: 510px;
    height: 600px;
    padding-left: 10px;
    padding-top: 10px;
    z-index: 1;
}

And HTML

CODE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Natuurlijk Middel - Voor een alledaagse natuurlijke gezondheid</title>

<link href="mainstyle.css" rel="stylesheet" type="text/css" />

</head>

<body>

     <div class="wrapper">

            <div id="header"><img src="images/logo.jpg" alt="NatuurlijkMiddel.nl is de website die u wetenschappelijke informatie aanbiedt voor een     alledaagse natuurlijke gezondheid! Veel natuurlijke middelen bevatten namelijk stoffen die u beschermen tegen veel voorkomende gezondheidsproblemen." /></div>


        <div id="navtop">

                   <a href="index.html"><u>Home</u></a>      
                   <a href="contact.html"><u>Contact</u></a>      
                <a href="informatie.html"><u>Informatie</u></a>      
                <a href="winkelwagen.html"><u>Winkelwagen</u></a>      
                <a href="disclaimer.html"><u>Disclaimer</u></a>
        </div>


        <div id="top-cat"></div>

        <div id="mid-cat">lala</div>

       <div id="bottom-cat"></div>

            <div id="maincontent">  lalala</div>

            <div id="navright1">
            <p class="fun">Op dit moment bieden wij nog geen producten te koop aan.</p>
            </div>


            <div id="navright2">

            </div>

            <div id="navright3">
            <a href="mailto:info@natuurlijkmiddel.nl">info@natuurlijkmiddel.nl</a>
            </div>


            <div class="push"></div>
</div>
        <div class="footer">
          <p>Copyright (c) 2008</p>
</div>
</body>
</html>

You see how the footer (the dark grey div) is just refusing (ha) to go down, and sit below the maincontent. As long as the page doesnt have a vertical scrollbar the footer will indeed sit at the bottom. But the maincontent div will definitly get much and much larger than just 1 screen, so the scrollbar is necessary. Why is it all overlapping?

Maybe you could try and fix the code

hehe.

And about codex, what do you mean they are going to decide on it? I thought the Codex was already in place; being a guidance for everyone who offers food to the consumer. You have to keep certain standards. Quality control as you will

pandy

Nov 11 2009, 12:10 PM

OK, once again. #maincontent is positioned absoute. It won't make the wrapper expand. It won't affect the position of other boxes around it as for example #footer. #footer is directy below the wrapper. #maincontent hangs out over it.

Why do you position #mainciontent absolute in the first place? K.I.S.S.

rjeeh

Nov 11 2009, 12:47 PM

alright, I must admit: im quite new with the tableless design and working with div's. The positioning of the div's was abit of a trial and error situation..

The left "categorie-tabel" is dynamic. So when I add 30 or so links, the table automatically expands. To show this I just put in alot of <br /> tags and lala's. You see the div is expanding downwards. When I put the maincontent div to absolute, it stays perfectly in plays when I add alot of links to the 'categorie-tabel', when I put it to relative (like I did now : http://www.natuurlijkmiddel.nl/test/ ) it goes down (for some reason).

I do see now that the footer is going down along the wrapper div, but the maincontent div is screwing it all up. How to fix this?

EDIT: even when I remove the top: 255px; from the maincontent id, there's still a big margin between the navtop and maincontent (which shouldnt be there

)

Oh end I just came back from a couple of months in norway and sweden! its was beautifull, but pretty rainy though

rjeeh

Nov 11 2009, 01:34 PM

When maincontent is set to position: relative; it moves down when you add more links to the #mid-cat div!
Without links at all, the maincontent div is positioned perfectly under #navtop...

rjeeh

Nov 11 2009, 02:15 PM

came to the conclusion that it's not possible in this setting.. even installed dreamweaver CS4 for it to check.

Frederiek

Nov 12 2009, 03:33 AM

I don't see that. The #footer div is below and contained in the #maincontent div. At least in my browser (Safari/Mac).

Yeah, I think the two threads on the same subject should be merged. Pandy?

Darin McGrew

Nov 12 2009, 12:27 PM

QUOTE

Yeah, I think the two threads on the same subject should be merged.

I agree. I've merged them.

pandy

Nov 13 2009, 03:26 AM

QUOTE(Frederiek @ Nov 12 2009, 09:33 AM)

I don't see that. The #footer div is below and contained in the #maincontent div. At least in my browser (Safari/Mac).

In the version of the page you saw maybe? It seems to be everchanging. I don't know where it's at now, but in the first version in the original thread it was as I describe. Never looked at the other one.