Footer / Sidebar Positionering

[ErikBooy007]

Dag jongens en meiden,

Ik heb een probleempje op m'n site ( www.jev-s.nl/temp/index.php ).

Zoals jullie kunnen zien, heb ik een 'sidebar' in oranje en een footer in oranje. Nu is mijn probleem de positionering hiervan.

Wat ik eigenlijk zou willen, is dat wanneer de inhoud niet tot de vouw (onderkant van het scherm) komt, de de onderkant van de footer 50px boven de vouw staat en de sidebar de hele hoogte van het scherm inneemt. Dit is op zich geen probleem, door absoluut te positioneren, maar als de inhoud wel voorbij de vouw gaat, blijven de footer en sidebar ongewijzigd. Dat is dus een probleem.

Nu is mijn vraag:


Hoe zorg ik dat de footer 50px van onderkant scherm staat bij weinig content en 50px van de onderkant van de content staat bij veel content? Zelfde geldt natuurlijk voor de sidebar, maar die oplossing zal analoog zijn aan de footer.

 

[dragonsna]

ik snap niet echt wat je bedoeld maar hier kan je mooie menu's vinden

http://www.javascriptkit.com/script/cutindex23.shtml

 

[ErikBooy007]

Wat moet ik hier nu mee? Volgens mij heeft dat echt helemaal NIETS met mijn vraag te maken?

 

[ErikBooy007]

Ik heb het inmiddels redelijk opgelost.

Ik had min-height op het verkeerde element toegepast. Nu werkt het wel. Alleen geloof ik niet dat min-height goed werkt in IE6...

Als iemand hier nog ideeën over heeft, zijn die ook welkom. Ook als iemand de site even in IE6 kan bekijken en een screenshot wil uploaden

EDIT: Ik heb het al met browsershots.org geprobeerd, maar volgens mij gaat daar iets helemaal mis.

 

[Goeroeboeroe]

De screenshot zit hierbij. Dat is dus IE 6. (Ga wel even stevig zitten voor je 'mbekijkt :shocked: )

Je weet trouwens dat header.png 1,38 MB is? Dacht even dat IE 6 de hik had of zo...
Ik vermoed dat je doorzichtige png's gebruikt? Dat werkt niet in IE 6. (Ik weet niet precies wat jij wel of niet weet, en anders is 't voor eventuele meelezers). Als je zoekt naar 'pngfix' vind je trucs om 't te laten werken in IE 6.

Wat betreft die min-height: dat mist in IE 6. Maar height werkt, volkomen foutief, hetzelfde als min-height in alle andere browsers. Als je dus voor IE 6 gewoon height gebruikt is 't opgelost.
Dat kan eventueel via conditional comment (alweer, misschien weet je dat al, maar voor de volledigheid):

<!--[if IE 6]>
		<link rel="stylesheet" type="text/css" href="ie6.css"/>
	<![endif]-->

En dan daarin gewoon height gebruiken. De spaties moeten precies zo als hier staat (binnen <!--...>), anders werkt 't niet.

P.S.: de vreemde breuk in de scrollbalk rechts komt omdat ik 't even snel aan elkaar heb geplakt. 't Was te veel voor 1 screenshot.

 

[ErikBooy007]

Hartstikke bedankt voor de screenshot en je tips. IE 6 moet ik dus nog wel even wat aan doen... Draai je trouwens IE6 naast IE 7/8? Zou je me nog kort kunnen uitleggen hoe je dat doet?

Ik wist inderdaad dat IE6 transparante png's niet goed ondersteunt. Maar ik had er niet meer aan gedacht. Ik moet inderdaad nog even zien wat ik met de header ga doen. Ik wist dat ie groot was, maar niet zo groot :shocked:. Waarschijnlijk ga ik een klein beetje kwaliteit moet inleveren voor usability, maar dat is dan nog niet zo'sn probleem.

Ik heb nu ook gewoon height gebruikt voor IE, maar ik wist niet dat die zich net als min-height gedraagt. Weer wat geleerd

Ik had voor de min-height nu dit gevonden, na een beetje googleen:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Dat schijnt ook te werken, hoewel ik het niet heb kunnen testen.

Bedankt voor je commentaar, dit zijn nog eens nuttige reacties! :thumb:

 

[Goeroeboeroe]

Die oplossingen voor min-height voor IE 6 zijn nog van voor de tijd dat iemand gewoon height 'ns probeerde, denk ik. Ik bedoel: wie komt er nou op 't idee dat height werkt als min-height? Dat met important! zou best kunnen werken, omdat er ook met important! fouten in IE 6 zitten. Er zijn zelfs JavaScript-oplossingen bedacht, grinnik.
Persoonlijk houd ik die omwegen voor IE 6 altijd apart, omdat ze vaak helemaal nergens op slaan en ik de andere browsers niet overstuur wil maken van dergelijke bagger

Dat naast elkaar draaien is 'n klein drama. Ik heb Linux. Daarop draait IE 6, maar niet helemaal volledig, want opacity bijvoorbeeld werkt niet. Dus heb ik in VMWare Windows 98 met IE 6 geïnstalleerd, voor die enkele keer dat 't in Linux niet goed werkt.
Daarnaast heb ik dan nog 'n VMWare met Windows XP en IE 7, want als je IE 6 en 7 naast elkaar draait werkt 't toch net niet helemaal 'echt', toch nog kleine verschillen met 'n aparte installatie.
Daarnaast had ik VMWare met IE 8. En toen werd ik depressief vanwege de traagheid, dus nu staat er 'n netbook met XP en IE 8.
En dat allemaal omdat Microsoft drie compleet verschillende monsters meende te moeten maken (waarvan IE 8 dan eindelijk enigszins goed werkt).

Ik ben altijd 'n beetje huiverig dat 't als reclame wordt gezien, maar ik ga toch weer 'n link naar 'n rijtje links geven over IE naast elkaar. Om nou alles steeds over te typen...
De enige die écht goed schijnt te werken is IE 6, 7 en 8 elk in VirtualPC. Dat is gratis en komt bij Microsoft vandaan. Moet alleen wel elk halfjaar worden vervangen.
Bij mij werkt dat niet vanwege de restricties aan XP op 'n netbook...
http://www.css-voorbeelden.nl/links.html#a-ger-meerdere