[js/css] z-index probleem met fixed positioneren

[Civil]

Ik ben bezig met een site waarin ik het menu en de header van de pagina fixed op de pagina wil hebben.

Omdat IE fixed positioneren niet kent heb ik dit opgelost met een script dat ik naar aanleiding van dit topic vond.
Ik kwam door dat topic op deze pagina van crisp.
Hiermee ben ik aan de slag gegaan en heb nu dit als resultaat wat dus in ieder geval werkt in phoenix en netscape 7. In Opera werkt het niet. Maar het gaat even om IE 6.0 daar zit ik met een klein probleem.

Het probleem is namelijk dat in het navigatiemenu twee links niet werken "home en informatie". dit komt omdat de header over het menu wordt gezet ondanks dat ik in de css de z index van het menu hoger heb staan als die van de header. "het werkt dus wel goed in phoenix omdat die wel naar de z-index luisterd"

nu maak ik gebruik van dit stukje javascript:

JavaScript:

function init() {

  if (document.all) {

    document.body.style.overflow = 'hidden';
    document.getElementById('header').style.margin = '-500px 0px 0px 0px';
    document.getElementById('content').style.width = document.body.clientWidth - 150;
    document.getElementById('content').style.height = document.body.clientHeight;
    document.getElementById('content').style.overflow = 'auto';
    window.onresize = init;

  }

}

wat ook terug te vinden is in de source van de pagina!

Via deze code regel ik dus ook dat de header 500px omhoog wordt gehaald op de pagina de header staat onder het menu in de source. Als ik dit andersom doe dus, de header voor het menu en dan in de javascript 'header' vervang door 'menu' en de margin naar -182px 0px 0px 0px de header is 182px hoog dan staat alles ook goed op de pagina maar wordt de header onder de content gezet en dat wil ik dus al helemaal niet!

Nu weet ik niet zo heel veel van javascript maar is het dus zo dat layer die door javascript gepositioneerd worden boven alles geplaats worden of zoiets? dat zou verklaren dat als ik de tweede optie gebruik mijn header waar ik dan dus niets mee doe onder de content komt te liggen

ik ben aan het zoeken geweest en heb gevonden dat je in javascript z-index met zIndex aangeeft etc en ben daarmee aan de gang gegaan maar dat helpt dus allemaal niet. Nu ben ik niet zo heel erg ervaren met javascript dus daar zou het ook aan kunnen liggen

Maar heeft dus iemand een idee hoe ik eenvoudig dat menu boven die header krijg waardoor mijn mouseovers weer gaan werken?

[Verwijderd]

waarom heb je in je div-box (header) twee keer position staan.?

jaja, volgende vraag...

waarom heb je van menu niet gewoon een nieuwe box gemaakt. Why use a class?

[ Voor 46% gewijzigd door Verwijderd op 17-02-2003 00:19 ]

[Civil]

fixed werkt wel in bijv: phoenix en die gebruikt dus wel fixed. Als het goed is gebruikt IE absolute als ik de uitleg uit het topic wat ik linkte mag geloven (anders zou absolute er wel uit kunnen namelijk)

[ Voor 15% gewijzigd door Civil op 17-02-2003 00:11 ]

[crisp]

IE ondersteund inderdaad geen position: fixed, maar overschrijft wel je position: absolute uit je stylesheet.
De oplossing is dus in je stylesheet alleen position: absolute te gebruiken (tesamen met top: 0px), en voor het menu en de header de position middels scripting op 'fixed' te zetten voor non-IE browsers.
De 'IE'-manier is echter ook wel werkend te krijgen in andere browsers hoor; dan hoef je helemaal geen scripting te gebruiken.

[Civil]

Bedankt crisp het werkt nu idd in IE "te simpel eigenlijk"
Ga ik morgen wel vragen hoe ik nu die positioning 'fixed' kan krijgen in non-IE browsers nu is het al veel te laat om daar nog aan te prutsen.

[crisp]

Civil schreef op 17 February 2003 @ 00:36:
Bedankt crisp het werkt nu idd in IE "te simpel eigenlijk"
Ga ik morgen wel vragen hoe ik nu die positioning 'fixed' kan krijgen in non-IE browsers nu is het al veel te laat om daar nog aan te prutsen.

zoiets:

JavaScript:

if (!document.all) {

  document.getElementById('header').style.position = 'fixed';

}

(alleen jammer dat Opera wel document.all ondersteund).
Maar nogmaals: ik zou gewoon gaan voor 1 methode, en position: fixed gewoon niet gebruiken...

[ Voor 20% gewijzigd door crisp op 17-02-2003 00:51 ]

[Verwijderd]

Als je zelf aangeeft dat if(!document.all) niet betrouwbaar is, waarom gebruik je dan niet een IE specifieke functie om the checken of je al of niet met IE te maken hebt.

Het zou dan bovendien moeten gaan om een functie die niet ondersteund wordt door IE MAC (want die browser ondersteunt wel position:fixed).

Ik doe maar een suggestie: if(!window.ActiveXObject).

[Civil]

Ik heb nu inderdaad die javascript code overboord gegooit en het zuiver geregeld met css. (zonder fixed idd)
Ik zat weer veel te moeilijk te denken.

Maar nu kan de pagina in princiepe wel scrollen in mozilla/phoenix/netscape maar hij doet het niet (ik kan dus de schuifbalk op en neer bewegen en dat werkt! Maar via het muiswieltje doet hij dus niets)

IE scrolt verder probleemloos

pagina
css

Komt dit door de z-index van de layer content die dus altijd onder die van de header staat of zoiets? (ik denk het niet want als ik de content boven de header zet werkt het ook niet)
Of omdat ik body overflow op hidden heb staan en hij daardoor helemaal niet wil scrollen? (als ik dit uit zet scrolt hij nog niet, en krijg ik een tweede scrollbalk in IE)

Zie ik weer wat over het hoofd

[Civil]

*Kickje* ^
Ik heb in de tussentijd gezocht op zowel GoT (voor zover dat gaat vanwege de problemen met de search) als google.
Op de woorden div, scroll, layer, werkt niet, etc in diverse combo's
dingen "scroll werkt niet" als zin, maar ik kom helemaal niets tegen verder waar ik iets mee kan.
Heeft dus iemand hier een idee (liefst zonder javascropt maar gewoon zuiver css/html) hoe ik het probleem oplos?

[Civil]

iemand ? (zeker een hele moeilijke vraag )

Inmiddels gezien dat door het gebruik van bladwijzers de content layer actief maakt waardoor hij dus wel scrollt in bijv. phoenix. Is er een mogelijkheid waardoor je bijv. een linkje actief maakt in de content layer als de pagina laad?

Ik kan bijv linken naar "index.html#iets" ipv "index.html" waarmee de pagina een stukje omlaag schuift, dan werkt het scrollen.
Doe ik echter "index.html#top" werkt dit niet omdat dan de pagina niet hoeft te verplaatsen. Ik plaats dan dit bovenaan de pagina <a name="top" id="top"></a>
Maar dit is allemaal leuk en aardig.... maar als ik gewoon weer op een lege plaats in de pagina klik kan er niet meer gescrollt worden Is hier een oplossing voor?

De content layer wordt overigens ook actief als ik op een linkje klik maar daar bereik ik niet zoveel mee (of ik ga naar een andere pagina en als ik weer op een lege plaats klik wordt er ook niet meer gescrollt)

[ Voor 198% gewijzigd door Civil op 20-02-2003 00:11 . Reden: aanvulling ]

[Civil]

Ik ben wel een beetje met mezelf aan het discuseren zo hoor

[RM-rf]

code:

document.getElementById('content').style.width = document.body.clientWidth - 150;
    document.getElementById('content').style.height = document.body.clientHeight;

document.body.clientWidth is in msie6 vervangen door document.documentElement.

oplossing is de DOCTYPE te verwijderen, zodat msie6 in Quirky-mode springt (gevoelsmatig een slechte oplossing). ofwel het script aan te passen.

ik had gedacht dat de beste oplossing waarschijnlijk iets als:

code:

function msie_init() {
   if (!document.documentElement && document.body) document.documentElement = document.body
}
window.onload = msie_init()

zou zijn, maar recentelijk had ik juist daar wat problemen mee, alhoewel ik niet de tijd had te ontdekken wat precies het probleem was en dus alsnog mn getWindowHeight en getWinWidth() domweg heb aangepast, met een extra check voor msie6.

[ Voor 7% gewijzigd door RM-rf op 20-02-2003 09:00 ]

[crisp]

RM-rf schreef op 20 February 2003 @ 09:00:
[...]
document.body.clientWidth is in msie6 vervangen door document.documentElement.

oplossing is de DOCTYPE te verwijderen, zodat msie6 in Quirky-mode springt (gevoelsmatig een slechte oplossing). ofwel het script aan te passen.

ik had gedacht dat de beste oplossing waarschijnlijk iets als:

code:

function msie_init() {
   if (!document.documentElement && document.body) document.documentElement = document.body
}
window.onload = msie_init()

zou zijn, maar recentelijk had ik juist daar wat problemen mee, alhoewel ik niet de tijd had te ontdekken wat precies het probleem was en dus alsnog mn getWindowHeight en getWinWidth() domweg heb aangepast, met een extra check voor msie6.

Mmmz, zelfs in XHTML strict mode kan ik in IE6 gewoon nog document.body.clientWidth gebruiken hoor:

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN">
<head>
<title>clientWidth</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">

function init() {

  alert(document.body.clientWidth);

}
</script>
</head>
<body onload="init()">
<div>blaatieblaat</div>
</body>
</html>

Maar ik geloof ook niet dat dit echt veel met het probleem van TS te maken heeft.
Het lijkt me toch de enige oplossing om met scripting te gaan werken om position: fixed te gebruiken met scrolling op de body zelf voor browsers die het ondersteunen, en voor IE de truuk met de scrollable div te gebruiken.
Blijkbaar zijn sommige browsers nog niet zo ver dat het scrollwheeltje bruikbaar is voor scrollable divs...

[RM-rf]

crisp schreef op 20 februari 2003 @ 09:54:
[...]

Mmmz, zelfs in XHTML strict mode kan ik in IE6 gewoon nog document.body.clientWidth gebruiken hoor:

HTML:

<?xml version="1.0" encoding="iso-8859-1"?>

msie6 herkent de <?xml>-tag niet en springt dan alsnog in Quirky-mode:
haal hem weg en waarschijnlijk werkt het niet.

Valid, Quirky, Doctype's, tag-declarations; * RM-rf volgt dagelijks de soap-serie Goede Validaties, Slechte Validaties

[ Voor 7% gewijzigd door RM-rf op 20-02-2003 10:06 ]

[crisp]

RM-rf schreef op 20 February 2003 @ 10:06:
[...]


msie6 herkent de <?xml>-tag niet en springt dan alsnog in Quirky-mode:
haal hem weg en waarschijnlijk werkt het niet.

Valid, Quirky, Doctype's, tag-declarations; * RM-rf volgt dagelijks de soap-serie Goede Validaties, Slechte Validaties

Wat je zegt klopt, maar ook zonder de <?xml>-tag werkt het, en ik heb nog even gechecked en IE rendert dan 100% zeker in strict mode.
Enige verschil is dat hij in quircky mode de default margin van de body meerekent, en in strict mode niet.

[crisp]

Voor TS: er is waarschijnlijk nog wel een mogelijkheid om het met CSS op te lossen. IE ondersteund in CSS nl het gebruik van selectors nog niet volledig, waardoor je zoiets zou kunnen doen:

code:

div.header {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1;
}
div[class=header] {
  position: fixed;
}

Het is dan echter wel te hopen dat IE tegen de tijd dat het selectors volledig gaat ondersteunen, ze ook fixed positioning hebben ingebouwd

[Civil]

Ik ga het morgen allemaal nog eens doorlezen, vandaag geen tijd om te kijken of ik het werkend kan krijgen met de aangedragen oplossingen. Bedankt voor de suggesties en jullie horen het wel als het allemaal naar behoren werkt