Position fixed e z-index

[Ufobm]

Ciao a tutti!
Vi spiego brevemente il mio problema. Vorrei creare un sito non troppo convenzionale, che sia visualizzabile con monitor con larghezza superiore a 1000px. Per monitor con larghezza minore la pagina deve essere scrollata orizzontalmente. Allo stesso tempo, vorrei che la parte di sito a sinistra (larga circa 500px e alta tutta la finestra) non scorra verticalmente. La soluzione che ho trovato è stata quella di mettere "position: fixed", semplicemente. Però in questo modo per monitor in cui la pagina deve essere scrollata orizzontalmente la parte a destra finisce sopra quella a sinistra, che infatti è fissa sia verticalmente che orizzontalmente... Ho risolto inserendo per la parte sinistra uno z-index negativo (così almeno viene coperta dal contenuto di destra).

Con tutto quello che ho fatto ho però un grave problema... Con z-index negativo, sulla parte sinistra non funziona l'evento "onMouseOver", necessario per quello che devo fare!

In poche parole vi chiedo se esista un modo per far funzionare lo stesso il mouseover o, meglio ancora, per rendere fissa la parte sinistra solo verticalmente...

Spero di essermi spiegato a sufficienza...

Grazie anticipatamente!
Ufo

[karl94]

Puoi indicare una pagina di esempio?

[Ufobm]

Purtroppo no, perché non è online. Posso però darti degli stralci di codice (puoi facilmente ricreare il sito in locale).

  <div id="menu"><img src="img/menu.png" alt="Men&ugrave" id="menuimg" onMouseOver="menuChange('chi_sono')"></div>
  <div id="content">[...]</div>

/* Menu a sinistra */

#menu {
	width: 500px;
	min-width: 500px;
	height: 100%;
	min-height: 600px;
	float: left;
	text-align: center;
	vertical-align: middle;
	padding: 0px 20px 0px 20px;
	position: fixed;
}

#menuimg {
	border: 0px;
}

/* Contenuto a destra */

#content {
	width: auto;
	min-width: 500px;
	height: 100%;
	float: right;
	text-align: center;	
	position: absolute;
	padding: 0px 20px 0px 540px;
}

[karl94]

Continuo ancora a non comprendere molto. Potresti pubblicare l'intero sorgente o caricare momentaneamente una pagina di esempio?

[Ufobm]

Ecco qui:
http://ufobm.altervista.org/marcellobucchi

[karl94]

Una soluzione alquanto brutta è questa:

#menu {
    height: 100%;
    overflow: hidden;
    padding: 0 20px;
    position: absolute;
    text-align: center;
    vertical-align: middle;
    width: 500px;
}
#content {
    height: 100%;
    min-width: 500px;
    overflow: auto;
    padding: 0 20px 0 540px;
    position: absolute;
}

La cosa migliore sarebbe usare le CSS media query per adattare la larghezza dell'immagine in base alla larghezza dello schermo.

[Ufobm]

Mmm... Interessanti le media query... Ci penserò su!