Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

sidebar schuift omlaag

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 [url=http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/]voorbeeld [/url] 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 [url=http://www.quirksmode.org/css/modes/box_quirks.html]Quirksmode[/url] 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

Weet jij het antwoord op deze vraag? Registreer of meld je aan met je account

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