Serie di div con link interno: sovrapposizioni, HELP!

[magnotta]

Hola!
Allora, ho un problemino....a prima vista mi sembrava una corbellerie, e invece non riesco a capire dove sia l'errore!
Brevemente: così è come dovrebbe venire il sito che sto creando (very easy)
wxw.moti-f.it/prova/images/prova.jpg
E questo è l'html che sto facendo:
wxw.moti-f.it/prova/
(w al posto della x, ovviamente ) PS ho messo appositamente un bordino su ogni div per farvi capire meglio la problematica)

Dunque, se seguite html e css io vorrei creare nella parte sinistra tanti piccoli div (chiamati #link1, #link2 etc) uno sotto l'altro, float: left nei quali inserire i link testuali, e che i suddetti div siano esattamente della stessa altezza dei link, in modo da far si che l'elenco dei link sia bello attaccato, come nell'immagine.
Mi serve di mettere tutto nei div perchè poi dovrò creare un effetto a "tendina" su alcuni di questi link, e quindi si devono "espandere" verso il basso e tirare giù i restanti.

Il problema è, come potete vedere, che i link non "stanno" dentro i div, vanno fuori....ed è come se avessero (se li analizzate con qlc plugin tipo Firebug) dei margini top e bottom!
Non riesco a capire come devo "trattare" questi div per far si che il testo stia perfettamente dentro, senza "uscire" fuori....
Potete aiutarmi?! Thanks! :P

[magnotta]

Ho fatto una versione n° 2 collegata ad un altro css

wxw.moti-f.it/prova/index2.htm

Qui ho trattato i div come tabelle (sfruttando il display: table, table-row e table-cell)
Ora il testo non "sborda"...ma non riesco ancora a capire perchè mio risulti impossibile far si che i div contegano esattamente l'altezza dei link: ripeto, è come se questi ultimi avessero un "margin" superiore ed inferiore, e si posizionano sempre esattamente al centro del div, e non al top come desidererei, con le stesse dimensioni del div!

[GloboGsm]

Forse ti stai complicando la vita ...
Come deve essere il menu vertcale finito ?
mostra un menu già fatto che vorresti realizzare che ti piace.

[magnotta]

GloboGsm

Forse ti stai complicando la vita ...
Come deve essere il menu vertcale finito ?
mostra un menu già fatto che vorresti realizzare che ti piace.

allora, mi spiego:
- quando clicco sul primo link, va tutto giù con la descrizione, come in questo esempio:
wxw.moti-f.it/prova/images/prova2.jpg
(avevo trovato da qlc parte un javascript o cmq un tool che permetteva di ottenere quest'effetto a "tendina")
- quando invece clicco ad esempio su "progetti", mi si apre il menu di lato (credo realizzandolo con un iframe) come in questo esempio:
wxw.moti-f.it/prova/images/prova3.jpg

spero di essere stato chiaro ed averti fornito tutte le info per aiutarmi
grazie!

[GloboGsm]

Guarda, vai in questo sito, troverai molti esempi che puoi anche scaricare e personalizzare a tuo piacere, poi se vuoi sistemare alcune cose e non riesci, posta pure e troviamo la soluzione.

[magnotta]

GloboGsm

Guarda, troverai molti esempi che puoi anche scaricare e personalizzare a tuo piacere, poi se vuoi sistemare alcune cose e non riesci, posta pure e troviamo la soluzione.

gentilissimo, grazie!
vado a dare un'occhiata, sperando di non dovervi disturbare più :P

[magnotta]

prima di provare ad inserire i menu che mi avete suggerito....mi spiegate solo una cosa?!
come mai i link del menu dentro i div #link1, #link2 etc hanno quello spazio superiore ed inferiore (si nota subito se lo analizzate con Firebug o simili) come se avessero un margin o padding top e bottom, nonostante nel css siano impostati a 0px?!
Da cosa dipende questo margine superiore ed inferiore che hanno i links nei div, dunque?
(si nota meglio nella seconda pagina di prova: wxw.moti-f.it/prova/index2.htm )
Thanks!

[GloboGsm]

dovresti prima di tutto decidere come impostare la struttura del layout:

Fluido: in base alla risoluzione del browser i contenuti si adattano

Fisso: si useranno i pixel per determinare il tutto

dopo di che si scrive il css in base a ciò.

tu hai fatto un miscuglio delle cose e non va bene.

[magnotta]

GloboGsm

dovresti prima di tutto decidere come impostare la struttura del layout:

Fluido: in base alla risoluzione del browser i contenuti si adattano

Fisso: si useranno i pixel per determinare il tutto

dopo di che si scrive il css in base a ciò.

tu hai fatto un miscuglio delle cose e non va bene.

right....
ora, impostando tutti i div con dimensioni fisse in pixel....
come si spiega (e si risolve) la questione dei link con quel margine top e bottom, anche se non specificato da nessuna parte?

[magnotta]

Update!
Allora, sempre su:
wxw.moti-f.it/prova
sono andato un po' avanti, e seguendo anche il link che mi avete suggerito e mixando il tutto ho raggiunto quel che volevo raggiungere.
Il problema è che su Firefox, ovviamente, funziona....ma su Internet Explorer no!!!!
Dov'è il problema? C'è qualcosa che posso fare per farlo funzionare anche su IE? Thanks!

[magnotta]

PS provate anche a cliccare sul link "Progetti" e vedete il comportamento della nuova pagina su Firefox (corretto, ovviamente) e su Internet Explorer (come je pare!)....

[Jess]

magnotta

Update!
Allora, sempre su:
wxw.moti-f.it/prova

Su IE mi da un errore javascript, che fa in modo che l'accordion rimane aperto e sballa tutto il layout.

magnotta

PS provate anche a cliccare sul link "Progetti" e vedete il comportamento della nuova pagina su Firefox (corretto, ovviamente) e su Internet Explorer (come je pare!)....

Su progetti basta che metti padding-bottom: 20px; nel #right e poi su IE si vede mentre da me su Firefox non cambia niente

[magnotta]

Jess

Su IE mi da un errore javascript, che fa in modo che l'accordion rimane aperto e sballa tutto il layout.

Su progetti basta che metti padding-bottom: 20px; nel #right e poi su IE si vede mentre da me su Firefox non cambia niente

Ciao, grazie per il consiglio
Il fatto è che anche mettendo padding-bottom 20px su right è pur vero che finalmente si vede anche l'ultimo link che prima risultava tagliato....ma sussiste un fastidioso problema ancora molto evidente sui link.
Infatti se ci fate caso non funzionano correttamente come su Firefox, e passandoci sopra con il mouse si "anneruiscono" in maniera strana....e cioè vengono evidenziati solo quando il mouse ci passa sopra nell'estremità alta, appena si va sul centro del link non si attivano più.
Credo dipenda dal line height, ma per tenerli cosi attaccati è l'unico modo.
E' lo stesso problema anche della pagina index, è come se i link avessero una "dimensione" maggiore a quella del testo, con uno spazio sia superiore che inferiore che non mi spiego.

Per quanto riguarda l'errore di javascript, l'avevo notato, ma non essendo un grande esperto mi affido ai vostri consigli per cercare di risolvere questa compatibilità con IE o per suggerirmi un eventuale modo alternativo e compatibile per ottenere il medesimo effetto.
Thanks

[Jess]

Ti conviene prima togliere l'errore javascript, altrimenti non saprai mai se gli errori di visualizzazione vengono influenzati da quello o no.