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] position: absolute; bottom: 0px;

bierk
9 antwoorden
  • Ik heb een website met een footer. Deze wil ik graag helemaal onderaan de pagina hebben staan. Bij een kleine resolutie verschijnt er een vert. scrollbalk omdat de inhoud langer is dan het scherm, nu wil ik dat de footer, onder de inhoud van de site komt.

    Ik heb de volgende css gebruikt:
    [code:1:abe09356c1]
    .footer{
    margin-left: -389px;
    position: absolute;
    height: 19px;
    width: 775px;
    left: 50%;
    bottom: 0px;
    background-image: url(images2/footer.jpg);
    font-size: 12px;
    color: #FFFFFF;
    text-align: center;
    font-weight: 700;
    }
    [/code:1:abe09356c1]
    Hier is een voorbeeld van de totale pagina:

    click

    Alleen de links in het menu werken…
  • Zoals je het nu gedaan hebt, zorg je ervoor dat de footer altijd tegen de onderkant van het venster wordt geplakt. Ongeacht de lengte van de pagina.
    Je zou de content kunnen laten schalen naar het vensterformaat (zie hier voor een voorbeeld van wat ik bedoel.
    Of je haalt de "bottom: 0px;" weg. Dan zal de footer vanzelf (volgens mij) onderaan de pagina verschijnen.
  • [quote:777a1653fa]Zoals je het nu gedaan hebt, zorg je ervoor dat de footer altijd tegen de onderkant van het venster wordt geplakt. Ongeacht de lengte van de pagina.[/quote:777a1653fa]Klopt, en als je pagina langer is, komt vooral voor bij een resolutie van 800X600, dan scrollt de footer mee naar boven

    en dat was vast niet je bedoeling :roll:

    vr.gr. smeenk :wink:
  • [quote:6d777c1201]
    Of je haalt de "bottom: 0px;" weg
    [/quote:6d777c1201]

    Dat werkt niet, dan wordt de footer bij top:0 geplaatst…
  • Er zullen meer oplossingen zijn, maar deze twee lijken mij voor de hand te liggen:
    1. Maak een container-div met vaste afmetingen en laat, als dat nodig is, in die div scrollen (overflow:auto).
    2. Mooier, beter (?) en ook lastiger: maak een container-div. Positioneer daarin de andere div's, dus ook de footer, dmv float (niet absoluut dus). Dan maak je gebruik van de standaard-scrollbalk wanneer dat nodig is en blijft de footer aan de onderkant van de container-div.
    Succes.
  • Maar als ik het begrijp hebben mijn Faux Columns dan geen nut meer, of wel??

    Je oplossing is opzicht niet zo ingewikkeld, maar ik heb dan geen 100% hoogte meer, en dat wilde ik eigenlijk wel graag :D
  • De methode om een background-plaatje te gebruiken om de kolommen te 'stretchen' kan natuurlijk ook. En dan is een footer ook geen probleem:
    http://www.prism.gatech.edu/~gte207x/examples/pyro.html
    Wat bedoel je met 100%? Volgens mij is de content op jouw site nogal variabel. En gebruikersschermen varieren ook. Dus waarom zou je dan 100% hoogte willen hebben? Alleen voor de index-pagina? Ik zou gaan voor een minimale hoogte van het content-gedeelte en de hoogte gewoon af laten hangen van de inhoud van de pagina.
  • [quote:41b6a952fb]
    voor een minimale hoogte van het content-gedeelte en de hoogte gewoon af laten hangen van de inhoud van de pagina.[/quote:41b6a952fb]

    Stel dat ik dat zou doen he, dan zweeft mijn footer ergens halverwege de pagina, bij een pagina met weinig inhoud. Zoals bij de "home pagina".

    Dit was het idee achter dit design, ik wilde een pagina maken met de min-height van schermresolutie, maar wanneer de inhoud de schermresolutie overschreid dat de pagina nog langer wordt.

    Dit is zoals je in het voorbeeld kan zien ook deels gelukt, maar bij een pagina met veel inhoud, zoals "stoelen zonder armleuning" krijg je een raar effect met die foter, die als het ware over de inhoud van de pagina heen schuift.

    edit:
    Het andere voorbeeld op de site waarnaar je verwees komt overeen met mijn voorbeeld. Kijk maar. Maar ook hier schuift die footer over de inhoud heen, iets wat ik dus niet mooi vind.
  • [quote:9661ed6cc4="bierk"]Het andere voorbeeld op de site waarnaar je verwees komt overeen met mijn voorbeeld. Kijk maar. Maar ook hier schuift die footer over de inhoud heen, iets wat ik dus niet mooi vind.[/quote:9661ed6cc4]Op deze site zie ik een paars balkje, links in het browserscherm (dus niet gecentreerd), wat ook niet over de tekst schuift. :-?

Beantwoord deze vraag

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