Testo in un div che va a finire invece da un'altra parte!

[gnola]

Ciao a tutti,
ho un problema su un div che mi appare passando sopra una voce di un menù.
Questo layer l'ho posizionato in modo relativo e ha uno z-index a 200 perchè deve apparire sopra altri elementi.
In questo layer deve esserci una scritta. Ecco, il problema è proprio che quando vado a inserire il testo dentro questo layer che si vede correttamente al mouseover nel punto giusto...beh questo testo invece si posiziona in tutt'altra parte della pagina!!
Non so spiegarmi il perchè!

ecco il css:

#sub_autori {
    background-image: url(images/sfondomenu_submenurosso.jpg);
    background-repeat: repeat-y;
    background-position: top-right;
        position: relative;
        z-index: 200;
        left:441px;
    width: 190px;
    height: 214px;
    padding: 5px;    
}


.testo_sub_autori {
    text-align: left;
    color: BLACK;
        font-size:14px;
}

ed ecco il codice html:

 <div id="sub_autori" style="display:none;">    <span class="testo_sub_autori">TESTO DI PROVA</span></div>

Avevo anche provato inizialmente a mettere un altro div contenente il testo nel div "sub_autori" ma non cambiava nulla....il layer lo fa vedere nel posto esatto ma il testo va a finire sempre in fondo alla pagina...


Dove sbaglio?? Non è la prima volta ch emi succede una cosa così...

[Mich_]

Mancano molti elementi per poter fare una diagnosi:
- Quale DTD usi?
- In quale/i browser stai testando?
- Come e` posizionato il contenitore del div #sub_autori ?

Meglio sarebbe se postassi un link, cosi` si vede anche tutto il contorno.

[gnola]

ecco il link:

http://www.asersrl.com/leggere-conviene/progetto.php

[Mich_]

CI sono molti errori sia di sintassi che soprattutto di semantica in quella pagina.

Dentro un <a> non ci puo` stare un elemento di tipo blocco (ad es. il <li>)
Hai una lista fatta con i <div> anziche` con le liste.
Non usi le pseudoclassi :hover , ma le ssotituisci con il JS: in qualche caso l'utente non potra` usare il menu.

Per arrivare ai tuoi problemi specifici, stai usando i posizionamenti nel modo sbagliato.
Il tuo #sub_autori non dipende dal blocco vicino al quale lo vuoi, ma e` relativo al body, e questo non permette il suo funzionamento corretto.

Se vuoi fare un menu di quel tipo, ti conviene andare a vedere nelle raccolte, come sono fatti da chi sa usare gli strumenti CSS.

Alcune raccolte di menu sono tra i "link utili" (a me piace come sono organizzati i menu di CSSplay)

[gnola]

Hai ragione, purtroppo lavorando da autodidatta mi mancano molte nozioni per capire appieno le funzionalità dei CSS..
Cerco di fare le cose da sola prendendo qualche spunto quà e là ma a volte faccio un pò di confusione
Ho guardato quei menù ma sono tutti molto avanzati e non riesco a capirli molto...

Comunque ho fatto delle modifiche al codice in base alle tue indicazioni e ora ho posizionato con le liste il sottomenù...sembra funzionare ma non so se il codice è corretto.
Potresti dare un'occhiata?
Ti ringrazio!

[Mich_]

Qualche erorre e` stato corretto.

Pero` la sintassi non e` ancora cross-browser (qualche vecchio IE non interpreta correttamente).

Alcuni errori che mi saltano all'occhio:
- usi <span> al posto di <p> (e non usi mai il <p> -- errore semantico)
- usi troppi <br> (andrebbero usati solo in casi eccezionali: di solito si puo` farne a meno)
- non usi i tag <h1>, <h2>, ... per i titoli (grave errore semantico)

Un minimo di studio sulla semantica dei tag lo dovresti fare: non ti porta via troppo tempo, ma il risultato poi e` decisamente migliore.
E se la semantica e` corretta, l'uso dei CSS e` un giochino; se la semantica e` sbagliata, e` difficile fare cose cross-brwoser e per sistemare i CSS finisci che sbatti la testa sui muri.

[gnola]

Ti ringrazio mi vado a vedere allora come correggere questi errori!

Una cosa...ma i <br> nemmeno nella formattazione del testo vanno usati? perchè spesso i siti sono gestiti nei contenuti dai clienti che quindi inseriscono da backoffice i testi...in quei casi come evitare che mettano certi tag? spesso anzi mi trovo a combattere con persone che fanno copia e incolla da word facendo il patatrac!

ciao alla prossima!!

[Mich_]

Che io sappia ci sono strumenti che gestiscono la formattazione Word (ma occorre usare il copia-incolla).
Pero` per questi problemi dovresti rivolgerti al forum CMS.

In realta` non ci sono forti controindicazioni ai <br>, pero` chi ne usa tanti, di solito ha sbagliato la semantica dei tag: probabilmente usando i tag in modo diverso il <br> non serve.

[Shores]

Così istintivamente mi viene da dire che devi verificare bene quale è il primo elemento contenitore di #sub_autori che ha un position:relative; , perchè è rispetto al punto più in alto a sinistra di questo contenitore che le coordinate left/right/top/di #sub_autori saranno espresse se sub_autori ha position:absolute, cosa che quasi sempre è necessaria se si vuole poi usare z-index per sovrapporlo ad altri elementi.

Altrimenti, se #sub_autori vuoi lasciarlo con position:relative; allora le coordinate left/right/ecc saranno espresse come scostamento dalla posizione che #sub_autori avrebbe avuto se non fosse stato posizionato relative ma invece static; in pratica vuol dire che stai spostando sub_autori dalla sua posizione naturale, spingendolo a dx/sx/etc della sua posizione originale.

Detto questo, io non sono così rigido sull'uso dei <br>, che a mio avviso sono utili e vanno tranquillamente usati per il loro vero uso, ovvero andare a capo obbligatoriamente pur volendo restare all'interno dello stesso blocco di testo semanticamente coeso.

Diverso è il problema di quello schifo immondo che il copia/incolla da word produce: io su questo sono ormai diventato talebano, e ho da tempo BLOCCATO il copia incolla con formattazione lasciando SOLO la possibilità di incollare il puro testo (molti editor ajax lo permettono, per esempio TinyMCE lo fa) e comunque sottoponendo il testo/html che mi viene inviato dagli utenti a dei durissimi controlli lato server con HTMLawed o HTMLPurifier, così che SOLO ben specifici tag siano permessi, e SOLO dell'HTML ben formato possa essere inserito.