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)

Meegroeien met gepositioneerde children, of helemaal anders?

BasHamar
6 antwoorden
  • Tip: lees eerst het hele stuk, en denk dan pas na over een eventueel antwoord. Anders ga je je misschien kapot zitten piekeren en blijkt verderop dat het niet nodig was ;)

    Wat ik (voorlopig) wil:
    Een standaard header - left sidebar - main content (right column) - footer setup.

    Omdat ik later nog een ander element met bijzondere eigenschappen toe ga voegen, dien ik de sidebar en right column dit keer absoluut te positioneren. (Ik ben gewend dit normaal gesproken met een float op te lossen)

    Om de boel te centreren heb ik de hele boel in een #wrapper div gezet, die vanwege een faux column setup ook nog eens "mee moet groeien" met de hele content. (Om zijn achtergrond met valse kolommen te kunnen tonen)

    Het probleem is dat de wrapper div niet meegroeit. Normaal gesproken los ik dat heel handig op door het ding geen hoogte, maar wel een overflow property mee te geven (meestal 'hidden'). Doe ik dat nu echter dan gaat de wrapper niet meegroeien, maar hide de content daadwerkelijk.

    Ik vermoed dat dit te maken heeft met het absoluut positioneren. Daardoor plaats ik elementen 'buiten de flow' en ziet de wrapper ze wellicht niet langer als inhoud van hemzelf(?)

    Dus een eventueel eerste vraag is, hoe laat ik die wrapper nu 'meegroeien'. ondanks de gepositioneerde elementen.

    Hier mijn experiment

    Maar dan nu, wat ik uiteindelijke echt wil. (Want misschien zit ik wel compleet op het foute spoor)
    Dezelfde header - left sidebar - main content (right column) - footer setup als hierboven, maar dan met een extra blokje (div, section, whatever) ONDER de linker sidebar, dat altijd op de basislijn blijft uitgelijnd. (M.a.w. dat ongeacht de hoogte van de pagina, altijd boven op de footer plakt. Ik zou het ook anders kunnen omschrijven als: een flexibele linker sidebar, waarvan het bovenste gedeelte altijd helemaal bovenaan staat, het onderste gedeelte altijd helemaal onderaan staat, en waarvan de lege tussenruimte flexibel is.

    Normaal gesproken los ik dat onderaan uitlijnen altijd op met een margin-bottom:0 maar dat is in dit geval niet mogelijk. (althans, het is me nog niet gelukt)
    Doe ik het BINNEN de linker sidebar, dan bepaalt de sidebar section of div de onderkant, die dan nog steeds ergens bovenaan zweeft. Oplossing: doe het BUITEN de linker sidebar. Maar dan gaat het floaten fout. Want het ding moet links onderaan komen, en op het moment dat mijn content/ right column minder hoog is dan de linker sidebar, gaat hij dat blokje onder de main content, rechts tegen de linker sidebar aan floaten, en dat is dus niet de bedoeling. Dat bracht me tot poging nummer drie: dat blokje dan maar clearen. Maar dan wil de main content er (uiteraard) niet meer tegenaan floaten.

    Met absoluut positioneren kwam ik er het dichtste bij, vandaar dat ik op dat spoor ben gekomen.
  • Volgens mij heb ik de oplossing gevonden, maar JSfiddle werkt even niet meer mee (Gateway timeout), dus ik ga het voor je beschrijven.

    Ik een hekel aan absoluut positioneren, dus dat gaan we niet doen. ;)

    Maak een div die om je sidebar en je content heen gaat. Geef deze met CSS de eigenschap "overflow: hidden;" mee. Float de sidebar en content op de manier zoals je dat normaal gesproken zou doen. De div zorgt ervoor dat de footer altijd onder beide kolommen staat. Met de wetenschap dat floats een natuurlijke flow hebben plaatsen we het optionele blokje ná de content en de sidebar in de HTML-code, geven we die een float:left en een clear:left en als het goed is heb je dan wat je wil bereiken.

    Zodra JSfiddle weer werkt geef ik je de werkende code.

    [b:7e62964d9e]Edit: hier mijn gebruikte code[/b:7e62964d9e]

    HTML:
    [code:1:7e62964d9e]<!DOCTYPE HTML>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="term, term, term" />
    <meta name="description" content="Website description" />
    <title>Website</title>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <script type="text/javascript" src="functions.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css" media="screen" />
    <link rel="shortcut icon" href="/favicon.ico" />
    </head>

    <body>
    <div id="container">

    <header>
    Header
    </header>
    <div class="wrapper">
    <section id="sidebar">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa quam, hendrerit ac volutpat egestas, auctor in orci. Suspendisse nisl nulla, viverra non elementum ac, tincidunt sit amet mi. Curabitur iaculis feugiat leo ac semper. Suspendisse potenti.
    </section><!– sidebar –>


    <div id="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis massa quam, hendrerit ac volutpat egestas, auctor in orci. Suspendisse nisl nulla, viverra non elementum ac, tincidunt sit amet mi. Curabitur iaculis feugiat leo ac semper. Suspendisse potenti.

    Vivamus diam tortor, facilisis sed feugiat sit amet, mattis quis odio. Nulla id nunc nec erat pretium facilisis. Aenean vestibulum lectus nec augue adipiscing interdum non in orci. Vestibulum ultrices neque sed odio aliquet sit amet vestibulum erat placerat.
    </div><!– content –>

    <div id="block">
    Block
    </div>
    </div><!– wrapper –>

    <footer>
    Footer
    </footer>

    </div><!– container –>
    </body>
    </html>[/code:1:7e62964d9e]

    CSS:
    [code:1:7e62964d9e]/* CSS reset */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }

    /* HTML elements */
    body {

    }

    /* Layout blocks */
    #container{
    width: 960px;
    margin: 5px auto 5px auto;
    background: pink;
    overflow: hidden;
    position: relative;
    }
    header {
    background-color: lightblue;
    }
    #sidebar {
    width: 260px;
    background-color: #ddd;
    float: left;
    }
    #content {
    width: 700px;
    float: right;

    }
    .wrapper {
    float: left;
    overflow: hidden;
    position: relative;
    }
    #block {
    width: 260px;
    float: left;
    clear: left;
    background-color: #dd0;
    }
    footer {
    background-color: green;
    clear: both;
    }[/code:1:7e62964d9e]

    Ik heb je divs hernoemd, sorry daarvoor, dat kan even verwarrend zijn. Ik heb het resultaat van mijn laatste aanpassingen niet in JSfiddle kunnen controleren, maar als het goed is moet het werken…

    [b:7e62964d9e]Nog een edit: er zat toch een foutje in[/b:7e62964d9e]

    Zie de werkende versie hier. De truc zat 'm in het feit dat ik alle divs nu float:left meegeef. Overigens is de oplossing nog niet helemaal ideaal, maar ik hoop je hiermee een zetje in de goede richting te hebben gegeven.

    - Bas
  • Ziet er goed uit Bas, many Tnx voor je moeite :)
    Ik kom net binnengevallen na een horrordag at work, maar morgenochtend duik ik er vol in :)
  • Die doet helaas ook niet wat de bedoeling is. De rechterkolom duwt dat blokje als het ware onder hem uit. In het voorbeeld is de hoogte van dat blokje nagenoeg niks, en dus resulteert het hooguit in een flinke marge aan de onderkant van de rechter kolom.
    Maar het betreffende blokje links onder, krijgt een hoogte van 160 pixels, wat dan resulteert in 160 pixels wit onder de rechterkolom.
    Voor de duidelijkheid, zowel dat blokje als de rechterkolom moeten samen onderaan uitlijnen.

    Dessalnietemin fantastisch dat je er zo in bent gedoken, bedankt!
  • En als je de sidebar een vaste bottom-margin van 160px geeft en het blokje een vaste negatieve top-margin geeft van 160px? Werkt uiteraard alleen als het blokje een vaste grootte heeft en is misschien niet heel mooi als de content niet zo lang is, maar verder zie ik zo snel geen problemen…

    - Bas
  • Dat ik daar zelf niet op kwam :)
    Works like a charm! Bedankt!

Beantwoord deze vraag

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