abbassare z-index di un position:fixed

[Petro_suse91]

Ciao,
vorrei fare in modo che i link di un box FLOAT possano essere cliccati, e il testo selezionato, anche quando questo box si trova sovrapposto a un box con position:FIXED (e semitrasparente).

Come potrei fare? Ho provato ad assegnare z-index più alti al box FIXED ma non c'è verso... mi aiutate?

[Mich_]

Posta il codice HTML e CSS relativo al pezzetto.
Nota che la semitrasparenza non esiste (ancora) negli standard e in qualche browser non c'e` proprio.

[Petro_suse91]

div#sidebar,div#sidebar2 {
float:left;
border:1px solid #000;
width:165px;
text-align:right;
z-index:1;
margin:10px;
margin-right:0
}

/* stili delle liste di link */
div#sidebar ul,div#sidebar2 ul {
list-style-type:none;
}

div#sidebar h5,div#sidebar2 h5 {
text-align:right;
background-color:#55828C;
cursor:help;
display:list-item;
font:bold 0.8em Georgia, "Times New Roman", Times, serif;
color:#fff;
margin:0 0 0 -40px;
padding:8px 4px 4px 4px;
}

div#sidebar h5:hover,div#sidebar2 h5:hover {
background-color:#386570;
}

div#sidebar ul.menubox,div#sidebar2 ul.menubox {
margin-top:-10px;
}

div#sidebar li.box li a,div#sidebar2 li.box li a, li.text {
border-bottom:1px solid #C5C8B7;
display:list-item;
width:157px;
margin-left:-80px;
font:0.75em Verdana;
text-decoration:none;
color:#1E1B2D;
background-color:#E1E4D2;
z-index:10;
padding:3px 5px 3px 3px;
}

div#sidebar li.box li a:hover,div#sidebar2 li.box li a:hover {
background-color:#C5C8B7;
cursor:crosshair;
color:#00F;
}

/* terzo div fixed */
div#footer {
opacity:0.45;
position:fixed;
bottom:10px;
right:10px;
z-index:30;
background:url(images/gecko2.gif);
height:109px;
width:250px;
margin:15px 0 0 15px;
}

I tre div (sidebar, sidebar2 e footer) sono semplicemente uno dietro l'altro, nel markup, nell'ordine del css. i primi due contengono liste annidate con link, il terzo è vuoto. Ecco un esempio del codice delle liste di link (evito di mettere TUTTO)

<div id="sidebar2">
<ul class="sideul">

	<li class="box">
		<h5 title="Terms of use for this website's contents">Licensing</h5>

		<ul>
			[*]Creative Commons
		[/list]
	

....[/list]
</div>

Già mi ero accorto che con IE l'opacity va a farsi benedire

[indigoindigo]

con IE devi utilizzare

filter: Alpha(Opacity=100);

dove il valoe di opacità è uguale a quello che assegni nella proprietà opacity per FF moltiplicato per 100..

[Mich_]

con IE devi utilizzare

E per Mozilla, devi usare moz-opacity (stessi parametri di opacity).
In Safari e Opera mi pare che non esista l'opacita`.
Il bello e` che l'opacita degrada bene, cioe` i browser che non la conoscono la ignorano.
Puoi inserire le tre sintassi assieme: ognuno capisce la sua e solo quella.

Il tuo codice avra` problemi con IE, dato che usi la pseudoclasse :hover su un oggetto che non e` un link.

Ma il footer deve stare SOPRA gli altri blocchi? (hai dato z-index maggiore)
Tieni presente che il fixed potrebbe non essere riconosciuto in IE: credo si possa fare un hack con JS.

[Petro_suse91]

Ehm, ho fatto un errore io nel riscrivere il codice: Z-index è più alto su Sidebar che su Footer.

Grazie inoltre per le info sulla trasparenza!

Quello che vorrei ottenere io è ben esemplificato dallo screenshot:

Il lucertolone è immobile in quel punto e i menu ci scorrono sopra in trasparenza.

Anche se, a pensarci, mi rendo conto che in realtà i menu scorrono SOTTO il lucertolone, e si vedono solo perchè quest'ultimo è trasparente... me ne sono accorto solo adesso

Uhm, dovrei fare quindi in modo da assegnare un background semitrasparente ai link nel menu, e dovrei farli passare SOPRA (in modo che siano cliccabili, ma che si veda cosa c'è sotto) al lucertolone che invece è FIXED.
Qualche idea?

[indigoindigo]

Ti posso solo dire che ad oggi io non sono mai riuscito a gestire per bene la trasparenza, nel senso che se la applico, viene ereditata da tutti i child, indipendentemente da le contromosse..

quindi se ce la fai sono molto curioso di vedere la soluzione..

se ti è utile, visita il sito dei pearl jam (http://www.pearljam.com/)

[Mich_]

Uhm, dovrei fare quindi in modo da assegnare un background semitrasparente ai link nel menu, e dovrei farli passare SOPRA (in modo che siano cliccabili, ma che si veda cosa c'è sotto) al lucertolone che invece è FIXED.

Esatto.
Potresti dare ai menu uno sfondo di questo tipo:
background: transparent url(semitr.gif) repeat;
Per cui le scritte sono opache, il colore di sfondo e` trasparente, ma vi e` un'immagine di sfondo semitrasparente (da creare con programma di grafica in formato piccolo, da far ripetere).
In questo modo ti garantisci che il tutto e` leggibile (le scritte sono opache), che funziona in tutti i browser (e` l'immagine ad avere la caratteristica semitrasp.), che il menu sta sopra (quindi i link sono cliccabili), e che se per qualche motivo non funziona la semitrasparenza, viene nascosto lo sfondo, non il menu.
Dovresti anche assicurarti che ci sia un contrasto sufficiente tra le scritte e tutti i colori dello sfondo:

[Another-Life]

Originariamente inviato da Mich_
Esatto.
Potresti dare ai menu uno sfondo di questo tipo:
background: transparent url(semitr.gif) repeat;
Per cui le scritte sono opache, il colore di sfondo e` trasparente, ma vi e` un'immagine di sfondo semitrasparente (da creare con programma di grafica in formato piccolo, da far ripetere).
In questo modo ti garantisci che il tutto e` leggibile (le scritte sono opache), che funziona in tutti i browser (e` l'immagine ad avere la caratteristica semitrasp.), che il menu sta sopra (quindi i link sono cliccabili), e che se per qualche motivo non funziona la semitrasparenza, viene nascosto lo sfondo, non il menu.
Dovresti anche assicurarti che ci sia un contrasto sufficiente tra le scritte e tutti i colori dello sfondo:

Hmm non ho ben capito il tuo discorso.....Perchè devo assegnare uno sfondo trasparente se lo sfondo è gia occupato dall'immagine semitrasparente??

[Mich_]

Perche` un'immagine di sfondo sta sopra il colore di sfondo. Infatti se metti un'immagine piu` piccola del blocco e centrata vedi lo sfondo default (bianco) attorno all'immagine.

Quindi se vuoi fare lo sfondo semitrasparente, devi avere il colore di sfondo trasparente, e generi la semitrasp. con l'immagine.