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: automatisch aanpassen aan resolutie scherm

awinkel
4 antwoorden
  • Ik ben bezig om een website die in frames gemaakt is om te zetten naar een website die opgebouwd is m.b.v. CSS.
    Nu loop ik tegen het probleem aan dat de lay-out zich niet aanpast aan de resolutie van het scherm.
    Ik kan door het aantal pixels op te geven de lay-out wel vast gaan zetten, maar dit is niet de bedoeling.
    Dit is het ontwerp wat ik tot nu toe heb:

    [img:588b9e167b]http://members.upc.nl/a.winkel4/forum/site_css.jpg[/img:588b9e167b]

    De stylesheet ziet er als volgt uit:
    ===========================
    @charset "utf-8";
    body {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #666666;
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000000;
    }


    .thrColHybHdr #container {
    width: 100%;
    background: #FFFFFF;
    margin: 0 auto;
    text-align: left;
    }
    .thrColHybHdr #header {
    background: #DDDDDD;
    padding: 0 10px;
    }
    .thrColHybHdr #header h1 {
    margin: 0;
    padding: 10px 0;
    }


    .thrColHybHdr #sidebar1 {
    float: left;
    width: 11em;
    background: #0099FF;
    padding: 15px 0;
    }
    .thrColHybHdr #sidebar2 {
    float: right;
    width: 11em;
    padding: 15px 0;
    background-color: #0099FF;
    }
    .thrColHybHdr #sidebar1 h3, .thrColHybHdr #sidebar1 p, .thrColHybHdr #sidebar2 p, .thrColHybHdr #sidebar2 h3 {
    margin-left: 10px;
    margin-right: 10px;
    }

    .thrColHybHdr #mainContent {
    margin: 0 12em 0 12em;
    padding: 0 2em 0 2em;
    }
    .thrColHybHdr #footer {
    padding: 0 10px;
    background:#DDDDDD;
    }
    .thrColHybHdr #footer p {
    margin: 0;
    padding: 10px 0;
    }

    .clearfloat {
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
    }
    ===========================

    Het probleem is dat de footer niet tot op de grond komt, maar net zover zakt als nodig is om de tekst weer te geven.
    Ik heb height: 100% al eens geprobeerd in de body, maar dat had geen effect.
    Ik zie even niet waar het fout gaat. Iemand een idee?
  • Wat jij wil lastig. Lees dit artikel maar eens: http://www.alistapart.com/articles/holygrail volgens mij is dat een antwoord op je zoektocht.

    O ja.. voor de luie mensen onder ons: http://www.code-sucks.com/css%20layouts/faux-css-layouts/
  • Oeps…het zal weer eens niet. :)
    Ik ga de links even bekijken.
  • Wat je wilt kan wel, alleen moet je kiezen of je wilt dat de footer altijd op de bodem zit of alleen als de rest ven de inhoud minder groot is al het browser venster. Voor het eerste geval kan je fixed position gebruiken voor het tweede is iets meer werk nodig, zie hier het principe, en klik op "terug naar vorige pagina" voor een volledige uitleg van een 3 kolom layout met een 100% hoogte.

Beantwoord deze vraag

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