[css/overflow] 100% hoog, anders scrollbar in body, niet div

[Alexanderrr]

Mijn doel is om mijn site beeldvullend te maken als de hoogte kleiner of gelijk aan 100% is, en om een verticale scrollbar te tonen als de hoogte groter dan 100% is.

Voor het middengedeelte gebruik ik de div container. In deze container staan tekst en hyperlinks, als je klikt op een hyperlink wordt een onzichtbare div zichtbaar. Inmiddels is het me gelukt om met onderstaande css-elementen de container zo hoog te maken als de hoogste onzichtbare div.

body {
background:#57191C;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 10pt;
font-family: Arial,Helvetica,sans-serif;
text-align: center;
overflow: hidden;
}
#container {
width: 800px;
margin: 0 auto;
position: relative;
text-align: left;
background-image:url(images/lgrey053.jpg);
height: 100%;
overflow: scroll;
overflow-x: hidden;
}

Het enige wat me nog niet lukt, is de scrollbar in de body te krijgen, in plaats van in de container. Ik wil de scrollbar dus helemaal rechts op het scherm. Enig idee hoe ik dit kan aanpakken?

[ Voor 9% gewijzigd door Alexanderrr op 01-04-2008 08:29 . Reden: site is gewijzigd, links werken niet meer ]

[doxick]

je hebt nu de container een overflow staan. dit betekent:
wanneer groter (als de data de container 'over spoelt'), doe dan dit: <actie>

nu staat daar scroll. haal je scroll weg dan zul je zien dat de scrollbar in de body komt.

voeg tevens even toe:
html, body { height: 100%; width: 100%}

dit om aan te geven dat die 100% van de parent zijn (er is geen parent) en dan heb je meteen een referentie voor de childs

[Fuzzillogic]

Zoals dit?

[Onbekend]

Hier staat ook een uitleg:
http://www.gigadesign.be/2006/07/layout-met-100-hoogte/

[Alexanderrr]

Okee, nu staat de scrollbar waar ik hem hebben wil, alleen kan je al scrollen als de blokken (onzichtbare divs) nog onzichtbaar zijn. En gaat de background van de container niet mee. Vreemd, want het voorbeeld van Fuzzillogic lijkt hetzelfde. Waar gaat het fout?

html, body {
height: 100%;
}
body {
background:#57191C;
margin: 0 0 0 0;
padding: 0 0 0 0;
font-size: 10pt;
font-family: Arial,Helvetica,sans-serif;
text-align: center;
overflow-x: hidden;
}
#container {
width: 800px;
margin: 0 auto 0 auto;
position: relative;
text-align: left;
background-image:url(images/lgrey053.jpg);
min-height: 100%;
}

Dit is de code van de blokken (onzichtbare divs):

<div id="div<?php echo $i ?>" class="blok" style="position: absolute; visibility: hidden">

en hier het script waar ik het mee zichtbaar maak:

<script type="text/javascript">
<!--
var ie=document.all?1:0; // test for IE 4+
var ns=document.layers?1:0; // test for NS 4
var dom=document.getElementById?1:0; // test for NS6/IE5+
var visible='div0';

var showHide=
ie?function(obj) {
document.all[visible].style.visibility='hidden';
document.all[obj].style.visibility='visible';
visible=obj;
}:
ns?function(obj) {
document.layers[visible].visibility='hide';
document.layers[obj].visibility='show';
visible=obj;
}:
function(obj) {
document.getElementById(visible).style.visibility='hidden';
document.getElementById(obj).style.visibility='visible';
visible=obj;
};

function checkform(form) {
if (form.reserveerder.value == "" || form.reserveerder.value == "Je naam") {
alert("Vul a.u.b. eerst je naam in!");
return false;
}
}
//-->
</script>

[ Voor 1% gewijzigd door Alexanderrr op 01-04-2008 08:29 . Reden: site is gewijzigd, links werken niet meer ]

[Fuzzillogic]

Hmm, allereerst, kun je je code eens in [code]-blokken zetten hier op GoT? Zo is het lastig leesbaar..

Met visibility: hidden worden nemen je "verborgen" divs nog steeds ruimte in. Je ziet ze alleen niet. Waarschijnlijk is display: none de betere oplossing.

Je site zelf wordt in quirksmode gerenderd. Dan wordt het aanzienlijk lastiger om te zien waar het misgaat. Gebruik een HTML4 of XHTML1.0 doctype en zorg ook dat de HTML dan valid is. En probeer die archaïsche <font>-tags en inline styles eruit te werken

offtopic:
Is Sebastiaan familie van je?

[ Voor 5% gewijzigd door Fuzzillogic op 11-03-2007 12:50 ]

[Alexanderrr]

Fuzzillogic schreef op zondag 11 maart 2007 @ 12:48:
Hmm, allereerst, kun je je code eens in [code]-blokken zetten hier op GoT? Zo is het lastig leesbaar..

Dank, zal ik doen, ben nog newbie.

Met visibility: hidden worden nemen je "verborgen" divs nog steeds ruimte in. Je ziet ze alleen niet. Waarschijnlijk is display: none de betere oplossing.

Check, en hoe! Dit deel van mijn code is al een paar jaar oud, goed dat je het aangeeft. Het heeft deels het gewenste effect, de scrollbar wordt nu alleen maar zichtbaar als de div inderdaad > 100% is. Dat is stap 1. Nu stap 2, de achtergrond ook nog mee laten gaan. Nog meer goede ideeën?

Je site zelf wordt in quirksmode gerenderd. Dan wordt het aanzienlijk lastiger om te zien waar het misgaat. Gebruik een HTML4 of XHTML1.0 doctype en zorg ook dat de HTML dan valid is. En probeer die archaïsche <font>-tags en inline styles eruit te werken

Hier was je me even kwijt. Ik weet inmiddels wat meer over quirksmode en XHTML1.0 doctype. Kan ik gewoon <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> in mijn pagina's zetten? Wat is een alternatief voor de tags en styles?

Voor het archief: het verschil tussen Display en Visibility wordt hier goed zichtbaar gemaakt: http://www.quirksmode.org/js/blockinvi.html

offtopic:
Yep, dat is hij. Iets met 'wereld' en 'klein' :-)

[Fuzzillogic]

Die doctype kun je bovenaan je pagina's zetten, boven het HTML-elememt. Let op, bij IE (het zal ook eens niet) mag er niets voor de doctype staan, anders gooit-ie em alsnog in quirksmode.

Het grootste verschil is hoe de browsers met de width en height omgaan. In standards-mode is dat in eerste instatie een beetje vreemd, maar width en height van een element is exclusiev paddings en borders, terwijl dat in quirksmode inclusief is.

De inline stijlen kun je het beste gewoon verplaatsen naar de CSS-file. Het uiteindelijke doel is om je HTML compleet verschoond te houden van elk stukje informatie dat alleen iets over het uiterlijk zegt; een webpagina zou ook te gebruiken moeten zijn als je CSS en javascript uitzet. Maar dat zijn zorgen voor later, lijkt me zo

Edit: ik zag je probleem met de achtergrond helemaal niet. Maar toen ik de site eens in antieke browser opende (IE6) werd het me duidelijk... Sja, dat is ook een probleem dat met quirks/standardsmode te maken heeft. Zet de doctype er eens boven, misschien is het dan al goed.

[ Voor 15% gewijzigd door Fuzzillogic op 13-03-2007 18:54 ]