problema allineamento tendine

[bardy]

Il problema è capire come lo visulaizza chi adopera mac, e non sono proprio pochissimi.
Grazie comunque.

Sul Mac ( safari 1.3.1) lo vedo abbastanza bene, è leggermente scattoso sia nella discesa che nel MaouseOver dei submenù, tutto sommato è navigabile senza troppi problemi.
Il perchè di quegli scatti purtroppo non te lo so spiegare.javascript:smilie(':bh%F2:')

Enrico

[barbarina]

grazie

[barbarina]

up!
Il sito www.pernondimenticare.net/nuovosto ha ancora qualche problema con le tendine
qualcuno può dare un'occhiata al css?
Grazie

[seed_squall_it]

Ciao Barbara. Ho visto il sito e...non ho dato un'occhiata al CSS. Infatti preferirei darti dei suggerimenti ripartendo "da zero" ed evitando troppe complicazioni. Allora...partiamo da "tutto il sito". Dovresti racchiuderlo (ripeto, non ho guardato il CSS per non farmi influenzare da come è impostato ora) in un box (magari chiamalo <div id="container">. A questo box, nel CSS, assegni questa regola:

#container {
width: LA TUA LARGHEZZA;
margin: auto;
position: relative;
}

In questo modo, puoi riferirti ad esso per le position: absolute dei menu. Tieni presente che specificare position: relative NON obbliga ad usare anche un offset (con top e left).

Ora passiamo all'immagine della testata. Potresti posizionarla in un box largo quanto il #container e con un'altezza che "racchiuda" esattamente la mappa immagine.
Subito dopo, prima cioè di creare il box che racchiuderà i contenuti della pagina vera e propria, ci devi scrivere fisicamente i box dei menu a tendina. Ti faccio qui uno schema del codice XHTML del #container e della testata.

<div id="container">

<div id="testata">[img]testata.jpg[/img]</div>

<div id="menu1" style="display: none;" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">Menu 1</div>
<div id="menu2" style="display: none;" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">Menu 2</div>
<div id="menu3" style="display: none;" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">Menu 3</div>
<div id="menu4" style="display: none;" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">Menu 4</div>
<div id="menu5" style="display: none;" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">Menu 5</div>
<div id="menu6" style="display: none;" onmouseover="this.style.display='';" onmouseout="this.style.display='none';">Menu 6</div>

<div id="contenuti">

...Contenuti della pagina...

</div>

</div>

Come vedi i box dei menu a tendina sono scritti tra il box della testata e quello dei contenuti della pagina. E' importante che usi style="display: none;" scritto fisicamente in ogni box dei menu e NON nel CSS, altrimenti non potrai usare JavaScript per modificare lo stile "al volo". Questo è ciò che permette ai box dei menu di non essere visibili nella pagina di default. Inoltre, vedrai che in ogni box dei menu ci sono i gestori di evento JavaScript onmouseover e onmouseout che rendono o meno visibile il menu se il mouse è sopra di esso oppure no. Nel CSS, siccome hai definito l'elemento #container con position: relative, potrai riferirti ad esso per posizionare in modo assoluto i menu. Il CSS per #container, #testata, menu vari e pagina è il seguente:

body {
text-align: center; /* centra il #container nel body (IE) */
}

#container {
width: LARGHEZZA DELLA PAGINA;
text-align: left;
margin: auto; /* centra il container nel body (non IE) */
position: relative;
}

#testata {
width: 100%; /* è riferita alla width del #container */
height: ALTEZZA DELLA TESTATA;
}

#testata img {
width: LARGHEZZA DELLA PAGINA;
height: ALTEZZA DELLA TESTATA;
border: none;
}

#menu1,#menu2,#menu3,#menu4,#menu5,#menu6 {
width: LARGHEZZA MENU A TENDINA;
height: ALTEZZA MENU A TENDINA;
position: absolute; /* riferita a #container */
top: ALTEZZA DELLA TESTATA;
z-index: 100; /* nel caso avessi altri box posizionati... */
}

#menu1 {
left: DISTANZA DAL MARGINE SX DEL #CONTAINER MENU 1;
}

#menu2 {
left: DISTANZA DAL MARGINE SX DEL #CONTAINER MENU 2;
}

#menu3 {
left: DISTANZA DAL MARGINE SX DEL #CONTAINER MENU 3;
}

#menu4 {
left: DISTANZA DAL MARGINE SX DEL #CONTAINER MENU 4;
}

#menu5 {
left: DISTANZA DAL MARGINE SX DEL #CONTAINER MENU 5;
}

#menu6 {
left: DISTANZA DAL MARGINE SX DEL #CONTAINER MENU 6;
}

#contenuti {
width: 100%;
background-image: url(immagine_sfondo.jpg);
}

La cosa importante, visto che questo codice è molto semplificato nella gestione dei menu, è che il valore di top per tutti i menu sia ESATTAMENTE uguale all'altezza della testata.
Ora con il tuo JavaScript, non devi fare altro che usare onmouseover e onmouseout sulle aree sensibili della mappa immagine della testata per fare in modo che, ogni volta che passi su una di esse, tutti i menu vengano nascosti, e venga mostrato solo il menu corrispondente.
Per le aree sensibili della mappa immagine, puoi usare i seguenti codici JavaScript (nell'esempio ti mostro come rendere visibile e invisibile solo il menu 1):

<!--
Da inserire tra <head> e </head> della pagina. Le variabili usate sono:
nmenu: il numero del menu che vuoi rendere visibile;
ntot: il numero totale dei menu a tendina della pagina.
-->

<script type="text/javascript">
/*<![CDATA[*/

var ntot = 6;

function mostramenu(nmenu) {
for (i=1; i<=ntot; i++) {
document.getElementById("menu" + i).style.display = "none"; /* Nasconde tutti i menu */
}
document.getElementById("menu" + nmenu).style.display = ""; /* Rende visibile il menu */
}

function nascondimenu(nmenu) {
document.getElementById("menu" + nmenu).style.display = "none"; /* Nasconde il menu */
}

/*]]>*/
</script>



href="#" onmouseover="mostramenu(1);" onmouseout="nascondimenu(1);"

Il numero 1 che vedi tra le parentesi delle due funzioni richiamate da onmouseover e onmouseout è il numero del menu che vuoi rendere visibile o far "sparire".
Ecco tutto...poi ovviamente puoi personalizzare i box dei menu a tendina come preferisci.
Ho provato tutto questo con IE5/6 e Firefox senza problemi, ma se qualcosa non ti funziona, fammelo sapere.

Ciao!

[barbarina]

Gentilissimo seed_squall_it,
nel sito non utilizzo, e preferirei non utilizzare, javascript per i menu a tendina.
la pagina è già contenuta in un div unico.
Comunque la tua spiega mi è stata utilissima perchè mi ha fatto capire l'utilizzo esatto dell'attributo position.
Sulla base delle tue indicazioni vedrò di correggere il mio css.
Poi ti faccio sapere, se proprio non riesco ad ottenere l'effetto desiderato utilizzerò il tuo javasscipt, che è tra i più comprensibili di quelli che ho trovato.
Grazie ancora.

[seed_squall_it]

Felice di esserti stato utile Barbara. In effetti anche a me non piace molto usare JavaScript per queste cose, specie considerando i soliti problemi di impostazioni del browser da parte dell'utente (anche se mi chiedo: ma chi è che va a disabilitare JavaScript al giorno d'oggi con tutto quello che offre? Vabbé che si può stare più tranquilli in termini di sicurezza e "dirottamenti vari", ma molte cose come la validazione di forms lato client non si possono fare, costringendo a far lavorare sempre il server spedendogli dati che, se non validi, non verranno elaborati).
In effetti il tuo CSS precedente era abbastanza complesso nella definizione delle varie position, proprio perché non utilizzava JavaScript e quindi ti costringeva a posizionare i menu in modo diverso da quello che avevo pensato io.

Diciamo che la soluzione con JavaScript è più semplice dal punto di vista del codice CSS, anche se non è proprio il massimo, visto che si appoggia alle impostazioni del browser del client.

Ciao e fammi sapere!