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 zweeft over andere div's

None
13 antwoorden
  • Ik heb een pagina gemaakt die is opgebouwd zoals zovele sites.
    -een banner
    -2 kollommen (menu en content)
    -een footer

    Nu is de footer hetgeen wat me problemen opleverd. Ik heb even een screenshot gemaakt. De footer beweegt bij een verkleind vennster over de content heen.

    Website: Klik hier
    Screenshot: Klik hier

    Css:
    [code:1:bd2e657f7f]
    /*************************************************************HTML*/
    html, body{
    height: 100%;
    }
    /*************************************************************Site*/

    .site {
    height: 90%;
    width: 775px;
    border: 1px solid #666666;
    position: absolute;
    background-image: url(../images/bg_content.gif);
    background-repeat: repeat-y;
    left: 50%;
    margin-left: -387px;
    }

    /***********************************************************Banner*/
    .banner {
    height: 170px;
    width: 775px;
    background-image: url(../images/banner.jpg);
    }

    /*************************************************************Menu*/
    .menu {
    position: absolute;
    top: 170px;
    left: 0px;
    width: 184px;
    padding: 49px 0 0 0;
    voice-family: "\"}\"";
    voice-family: inherit;
    }
    .nix{}

    .mItem {
    width: 184px;
    height: 18px;
    padding: 2px 20px 0 0;
    border-bottom: 1px solid #666666;
    border-top: 1px solid #666666;
    margin-bottom: 15px;
    background-color: #CCCCCC;
    text-align: right;
    voice-family: "\"}\"";
    voice-family: inherit;
    width: 164px;
    height: 16px;
    }
    .nix{}

    .mItem a {
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    color: #E41B1B;
    }

    .mItem a:hover {
    color: #FFFFFF;
    }

    /**********************************************************Content*/
    .content {
    position: absolute;
    top: 170px;
    left: 185px;
    width: 590px;
    }

    .pic {
    width: 590px;
    height: 50px;
    }

    .txt {
    width: 590px;
    height: 313px;
    padding: 10px 10px 10px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #333333;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 293px;
    width: 570px;
    }
    .nix{}

    .txt a {
    text-decoration: none;
    color: #E41B1B;
    font-weight: bold;
    }

    .txt input {
    height: 15px;
    width: 200px;
    margin-right: 15px;
    border: 1px solid #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    background-color: #ffffff;
    }

    .txt textarea {
    width: 422px;
    border: 1px solid #666666;
    font-family: Century Gothic, Arial;
    font-size: 11px;
    font-weight: bold;
    color: #000000;
    background-color: #ffffff;
    }
    .txt table{
    margin-left: 60px;
    }
    .txt td {
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    }

    .txt form{
    background-image:url(../images/box_shadow.gif);
    background-position:top;
    background-repeat:repeat-x;
    background-color:#F6F6F6;
    padding: 5px 0 5px 0px;
    }

    /***********************************************************Footer*/
    .footer {
    position: absolute;
    bottom: 0;
    clear: both;
    height: 20px;
    width: 775px;
    padding-top: 2px;
    background-color: #666666;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    font-weight: bold;
    color: #FFFFFF;
    voice-family: "\"}\"";
    voice-family: inherit;
    height: 18px;
    }
    .nix{}
    [/code:1:bd2e657f7f]

    Ik hoop dat iemand me met dit probleem kan helpen, want ik heb er al eerder last van gehad en toen heb ik besloten om de footer maar weg te laten. Maar dat is natuurlijk geen oplossing. :)
  • Die websitelink werkt niet, hij verwijst naar localhost.

    Jouw layout heeft wel weg van deze layout, bestudeer de code die daarvoor is gebruikt eens, misschien helpt je dat verder. Positionering van de twee kolommen wordt gedaan met floats en de footer wordt naar beneden gedrukt door de floats te eindigen/clearen.
    Er is ook een bijbehorende uitleg.
  • [quote:2be92da0df="boelieboelie"]Die websitelink werkt niet, hij verwijst naar localhost.

    Jouw layout heeft wel weg van deze layout, bestudeer de code die daarvoor is gebruikt eens, misschien helpt je dat verder. Positionering van de twee kolommen wordt gedaan met floats en de footer wordt naar beneden gedrukt door de floats te eindigen/clearen.
    Er is ook een bijbehorende uitleg.[/quote:2be92da0df]

    Dankje voor je uitleg. Ik heb de link naar de website aangepast. Op zich heeft mijn lay-out wel iets weg van het door jou geschetste voorbeeld. Ik wil echter dat mijn footer altijd onderaan de pagina staat, onafhankelijk van de resolutie en of grootte van de div's main en of sidebar. (deze heten bij mij menu en content)

    Ik dacht dus dat ik met position moest werken. Kan dit echt niet dan zal ik de div's een float geven en een min-height. Maar mij lijkt de oplossing met absoluut positioneren mooier…. toch?
  • [quote:b2de67afb4="bierk"]Ik wil echter dat mijn footer altijd onderaan de pagina staat, onafhankelijk van de resolutie en of grootte van de div's main en of sidebar. (deze heten bij mij menu en content) [/quote:b2de67afb4]Wat bedoel je met "altijd onderaan de pagina"? Dat het altijd zichtbaar moet zijn, ook al is de pagina langer dan in het beeldscherm past? Of altijd onder de langste kolom op de pagina?

    Ik probeer even het probleem voor mezelf te schetsen voor ik antwoord geef. ;)

    - Bas
  • Even tussen 2 haakjes:

    Ik zou je willen aanraden om deze pagina eens te lezen :)
  • [quote:182248bc69="BasHamar"][quote:182248bc69="bierk"]Ik wil echter dat mijn footer altijd onderaan de pagina staat, onafhankelijk van de resolutie en of grootte van de div's main en of sidebar. (deze heten bij mij menu en content) [/quote:182248bc69]Wat bedoel je met "altijd onderaan de pagina"? Dat het altijd zichtbaar moet zijn, ook al is de pagina langer dan in het beeldscherm past? Of altijd onder de langste kolom op de pagina?

    Ik probeer even het probleem voor mezelf te schetsen voor ik antwoord geef. ;)

    - Bas[/quote:182248bc69]

    Eigenlijk zijn er 2 mogelijkheden. Wanneer de content langer is dan het scherm, moet de footer onderaan de webpagina staan. Wanneer de inhoud korter is dan het scherm moet de footer onderaan het scherm zijn.

    Ik heb nog wat verder gelezen en kwam deze website tegen:
    http://css-discuss.incutio.com/?page=FooterBeneathSidebar

    Het blijkt dus, denk ik, dat wat ik graag zou willen bijna niet op te lossen is wanneer je gebruik maakt van absolute positioning.

    Klopt dit?

    [quote:182248bc69="Japaveh"]Even tussen 2 haakjes:

    Ik zou je willen aanraden om deze pagina eens te lezen :)[/quote:182248bc69]

    Leuk artikel, en het klopt wel wat gezegd wordt, maar dan nog niet echt een oplossing voor mijn probleem denk ik.
  • [quote:ebbf59b9dd="bierk"]
    [quote:ebbf59b9dd="Japaveh"]Even tussen 2 haakjes:

    Ik zou je willen aanraden om deze pagina eens te lezen :)[/quote:ebbf59b9dd]

    Leuk artikel, en het klopt wel wat gezegd wordt, maar dan nog niet echt een oplossing voor mijn probleem denk ik.[/quote:ebbf59b9dd]
    Daarom stond het ook tussen 2 haakjes :)
  • Absolute positionering is sowieso niet de manier waarop ik een website in elkaar zou zetten. Laat alles in de normale flow staan, gebruik waar nodig relatieve positionering (of float) en alleen in uitzonderingen absolute positionering. Op deze manier voorkom je veel onnodige problemen.

    Bedenk ook dat de positionering afhankelijk is van het omsluitende parent-element, indien je dit aangeeft. Dit opent namelijk perspectief, door bijvoorbeeld een div om je complete content te gooien en er dan onderaan een divje met de footer te plakken.

    't Is maar een ideetje, maar waarschijnlijk wel haalbaarder dan jouw huidige aanpak.

    - Bas
  • oke, bedankt voor jullie hulp. Ik heb de absolute zooi eruit gegooid. Ik dacht eigenlijk dat absolute the way to go was, maar jullie hebben me op andere gedachten gebracht :lol: :lol:
  • Nee, absolute is absoluut niet de way to go…
    Wat jij wilt is een beetje ingewikkeld, maar zeker wel mogelijk. Kijk maar eens naar deze demo's:
    http://stijlstek.nl/demo/aleppo/
    http://stijlstek.nl/demo/damascus/

    en de toepassing daarvan in mijn WordPress Neptune theme:
    http://dev.d10e.net/wordpress/index.php?wptheme=Neptune
  • Ik ga dit eens lekker op mijn gemak bestuderen, bedankt
  • Offtopic//
    @ :ben:
    Wat is die Neptune site ontzettend mooi zeg…..
    In een woord: prachtig!
  • Ik vind Out There wel mooi, alleen komt de rechter kolom onder de body. Wellicht even kijken naar de width/margin/padding van die kolom?

    - Bas

Beantwoord deze vraag

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