Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

[CSS] footer div komt niet onderaan te staan.

The_Ultimate
5 antwoorden
  • ik heb een probleempje met mijn css code. Ik heb het voor elkaar dat de footer mooi meegaat met de hoogte van de website (grotere resulutie is achtergrond meelopend)

    helaas werkt het niet zoals ik wil. Wanneer ik mijn maincontent invul, loopt deze door achter de footer. De achtergrond blijft meelopen naar beneden de footer blijft op de plek staan waar ie in de eerste instantie hoort te staan.

    dit is de huidige code:

    xhtml:
    [code:1:8f1a3c420d]<!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" />
    <title>unknown</title>
    <link href= "pob.css" rel="stylesheet" type="text/css" />
    </head>

    <body class="page">

    <div id="shadow">
    <div id="container">
    <div id="header">
    <?php
    $nr = rand(1,9);
    echo '<img src="images/'.$nr.'.jpg">';
    ?></div>
    <div id="header2">menu</div>
    <div id="sidebar1">
    <kopje>SubMenu/Updates</kopje>
    <p>text </p>
    </div>
    <div id="mainContent">
    <span class="Kop">Home</span>
    <p>text</p>
    </div>
    </div>
    <div id="footer">
    <p> &copy; text</p>
    </div>
    </div>[/code:1:8f1a3c420d]

    en de CSS:

    [code:1:8f1a3c420d]@charset "utf-8";
    html, body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #3a94f9;
    color: #000000;
    height: 100%;
    margin: auto;
    }
    .page #shadow {
    width: 865px;
    background-image:url(images/mid.jpg);
    min-height:100%;
    height:auto !important;
    margin: auto;
    text-align: center;
    border: 1px solid #ffffff;
    }
    .page #container {
    width: 802px;
    margin: auto;
    text-align: left;
    border: 1px solid #ffffff;
    }
    .page #header {
    height: 150px;
    border: 1px solid #ffffff;
    }
    .page #header2{
    text-align: center;
    color:#ffffff;
    background: #000000;
    border: 1px solid #ffffff;
    }
    .page #sidebar1 {
    float: left;
    width: 150px;
    height: auto;
    background: #EBEBEB;
    margin: 10px 0 0 20px;
    font-size: x-small;
    }
    .page #mainContent {
    margin: 10px 0 0 200px;
    padding: 0 20px;
    font-size: x-small;
    border: 1px solid #ffffff;
    overflow:auto;
    }
    .page #footer {
    position:absolute;
    width: 865px;
    text-align: center;
    bottom: 0;
    font-size: x-small;
    font-style: italic;
    border: 1px solid #ffffff;
    }
    .Kop {
    font-weight: bold;
    font-size: x-large;
    }
    .kopje {
    font-size: small;
    }[/code:1:8f1a3c420d]

    wanneer ik de position verander in relative. Gaat de footer wel mooi onderaan staan. op 1 uitzondering na: wanneer de inhoud van de maincontent kleiner is dan de ruimte tussen de onderkant van de site en de header2 (het menu)

    als ik hem verander naar fixed gaat ie mooi onderaan staan, maar vast, dus hij blijft altijd op dezelfde plek staan, niet onderaan de pagina maar op de laagst mogelijke plaats in het browser. Tekst loopt er dus nog achterdoor wanneer deze te lang is.
  • ja dat blijft een lastig dingetje! Ik heb het ook na veel klooien voor elkaar gekregen, maar ik zou zeggen googel even. Er zijn verschillende manieren, elk met voor en nadelen:

    http://www.google.nl/#hl=nl&source=hp&q=footer+css+bottom+of+page&btnG=Google+zoeken&meta=&aq=0&oq=footer+css+&fp=b9c6b55ccb32cb3a

    Succes!
  • Probeer het eens met overflow:hidden; ipv overflow:auto;
  • [quote:9f3ca0df93="Gooly"]Probeer het eens met overflow:hidden; ipv overflow:auto;[/quote:9f3ca0df93]
    dit heeft totaal geen effect. overflow zou ervoor moeten zorgen dat wanneer er meer in de content staat dan de hoogte van de content, de inhoud met een schuifbalk moet worden bekeken.
    Daar ik straks mysql tabellen wil gaan laden, is het niet handig om die lijsten allemaal onder elkaar te laten staan. Dan zou de pagina superlang worden en dan is het niet leuk meer om terug naar boven te scrollen als je een andere pagina wil bezoeken.

    ik ga de link die blackhawkdesign heeft gepost eens lezen.

    edit: dit is ongeveer wat ik zoek, header en footer vast (content is groter als je op f11 duwd, of een groter scherm hebt) maar de content is op zichzelf scrollbaar

    http://limpid.nl/lab/css/fixed/header-and-footer
  • [quote:560f140c87="The_Ultimate"]
    overflow zou ervoor moeten zorgen dat wanneer er meer in de content staat dan de hoogte van de content, de inhoud met een schuifbalk moet worden bekeken[/quote:560f140c87]
    Dat klopt niet (helemaal), het hangt er maar net van af welke aktie je aan je overflow verbind. Maar fijn dat je een oplossing hebt gevonden.

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.