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)

sidebar schuift omlaag

None
7 antwoorden
  • Ik probeer een sidebar te maken.
    [code:1:70b7a202d8]
    <div id="wrap">
    <div id="main">
    include("$pagina.php");
    ?>
    </div>
    <div id="sidebar"><? include("sidebar.php"); ?></sidebar>
    <div id="spacer"></div>
    </div>
    [/code:1:70b7a202d8]

    [code:1:70b7a202d8]
    #sidebar {
    width: 258px;
    margin-left: 502px;
    border: 2px solid #FFFFFF;
    background-color: #3D0000;
    height: 258px;
    }
    #spacer {
    height: 2px;
    font-size: 2px;
    width: 100%;
    clear: both;
    background-color: #000000;
    }
    #main {
    width: 500px;
    float: left;
    min-height: 258px;
    }
    #wrap {
    background-color: #3D0000;
    }
    [/code:1:70b7a202d8]

    t geheel is 760px breed.
    T werkt nu in FF, maar niet in IE.
    Wat ik dus wil is eigenlijk 2 kolommen, en hun achtergrond moet doorlopen tot onderen, maar onafhankelijk van de body-back-ground-color (vandaar de wrap).

    Ik zal nog even een werkend voorbeeld online zetten, maar dat duurt ff, want t is een stukje uit een hele grote pagina. Erg onoverzichtelijk voor jullie om daar de fout in te vinden (en dus ook voor mij, ik ga er nog aan werken :D ).
    Misschien (hopelijk) kan iemand de fout alvast vinden.
  • Je code is in ieder geval niet goed..

    [code:1:7b8f74179a]
    <div id="sidebar"><? include("sidebar.php"); ?></sidebar>
    [/code:1:7b8f74179a]
    Die </sidebar> moet natuurlijk een </div> worden :), maar ik vermoed dat het een typefoutje is.

    Probeer dit voorbeeld eens na te kijken.
    De reden dat het fout gaat is dat je sidebar in IE te breed is en er dus niet meer naast past. Dit heeft te maken met het boxmodel verschil in IE. Je hebt 2 verschillende boxmodellen (W3c en standard). Op Quirksmode staat meer info. Wat je moet doen is dat je in IE de breedte van de sitebar aanpast (smaller maakt) en dat vervolgens met een truckje in CSS aanpast voor firefox:

    [code:1:7b8f74179a]
    #sidebar {
    width:235px;
    font-size: 11px;
    margin-left:500px;
    margin-top: 5px;
    margin-right: 5px;

    }
    html>body #sidebar {
    width:250px;
    }
    [/code:1:7b8f74179a]
    IE snapt html>body niet waardoor het alleeni n FF werkt. Alles hiervan staat uitgelegd in het artikel van 456bereastreet. Zorg ook dat IE in strict mode rendert zodat je geen verschil hebt in IE en FF op dat gebied.
  • Dit werkt! Bedankt!

    [quote:941373e0d1="Japaveh"]

    [code:1:941373e0d1]<div id="sidebar"><? include("sidebar.php"); ?></sidebar>[/code:1:941373e0d1]

    Die </sidebar> moet natuurlijk een </div> worden , maar ik vermoed dat het een typefoutje is. [/quote:941373e0d1]
    klopt!

    Maar ik loop nu toch weer tegen wat andere dingen aan:
    Soms is de pagina(main) naast de sidebar minder hoog dan de sidebar. Dan wil ik dat de achtergrond van de pagina doorloopt. In FF kan ik dat doen met min-height. Maar dat werkt in IE niet. In IE moet je dan uist height gebruiken, maar dat gaat dan weer mis in FF. Zijn hier ook truukjes voor?

    [edit]
    2e vraag vervalt, ik heb de fout gevonden
    [\edit]
  • Voor dit soort dingen kun je het best eens googlen op faux column
  • als je de zoekterm maar weet is alles te vinden. Dank!

    Maar ik vond dat een beetje een gedoe, dan moet ik een achtergrond gaan maken e.d.
    Dus ik heb t als volgt opgelost (mocht iemand t interessant vinden):

    [code:1:0735f927d5]
    #main {
    width: 500px;
    float: left;
    min-height: 258px;
    height: auto!important;
    height: 258px;
    }
    [/code:1:0735f927d5]
    maar t kan ook zo:
    [code:1:0735f927d5]
    #main {
    width: 500px;
    float: left;
    min-height: 258px;
    height: auto;
    }
    /* IE only */
    * html #main {
    height: 258px;
    }
    [/code:1:0735f927d5]
  • [quote:07539169dd="marientje"][code:1:07539169dd]
    /* IE only */
    * html #main {
    height: 258px;
    }
    [/code:1:07539169dd][/quote:07539169dd]
    Dat is een heerlijke truc inderdaad die je gekozen hebt. Je selecteert een element * die hoger staat dan html…dat kan natuurlijk noooit en daarom accepteert alleen IE deze waarde :)
  • [quote:887f590338="Japaveh"]…dat kan natuurlijk noooit en daarom accepteert alleen IE deze waarde :)[/quote:887f590338]

    :lol: :lol: :lol:

Beantwoord deze vraag

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