immagine link

[elenagb]

Il tag link è questo?

<link rel="stylesheet" type="text/css" href="index.css"/>

Devo metterlo al posto di:

<style type="text/css" title="index" media="screen">
@import "index.css";
</style>

Scusa sai, ma non ho capito cosa vuol dire:

"Se hai usato l'import per l'hack di NN4, credo che puoi ignorare quel browser."

[Mich_]

Ricapitolo:
Il metodo stadard per inserire un CSS e` il tag <link>, come hai detto correttamente.
Qualche anno fa, quando ancora c'erano in giro dei browser NN4 (che riconoscevano solo pochi attributi CSS, e male anche quelli), si consigliava di inserire i CSS tramite l'import, che non era riconosciuto da NN4; questo per evitare che tale browser leggesse il CSS: infatti la visualizzazione era migliore senza CSS.
Quindi inserire il CSS tramite import era un hack per NN4.


Nel tag link puoi anche inserire l'attributo media, se serve (anche se mi pare che nel tuo caso puoi farne a meno: il CSS serve per tutti i media, non solo per la visualizzazione al computer).

[elenagb]

Ho capito. Sinceramente l'import è stato un altro copia-incolla dal sito
di esempio zen garden. Nei tutorial in rete ho notato che ti consigliano di inserirlo
per problemi di "incompatibilità tra i nuovi ed i vecchi browser".
Pensavo che inserire anche l'import potesse agevolare il caricamento del foglio di stile.

[elenagb]

Citazione:
Inoltre di solito se si vuole mettere un bordo che si veda all':hover, conviene metterlo anche nella condizione rilassata, altrimenti si creano degli spostamenti del resto della pagina: il bordo va messo sempre, ma il colore puo` essere cambiato (puo` essere uguale al colore di sfondo, in modo da essere invisibile).

Questa non è la soluzione al problema al salto che mi fa l'immagine, utilizzando il float. Ho
messo il bordo anche nella condizione rilassata, ma non basta a fermare lo spostamento. L'unica cosa che lo ferma è mettere sotto ad ogni coppia di immagini un <h3></h3>, ma non mi sembrava un bel lavoro.
Ho messo un altro thread in merito perchè questa richiesta di aiuto mi sembrava troppo satura.
Non capisco perchè mi sia stata bloccata la richiesta "float su immagine".

[Mich_]

Ho riguardato il sito.

Ho notato che non hai apportato le modifiche che dici di aver fatto, quindi o fai le modifiche da un'altra parte e non le riporti o fai confusione. Ma se vuoi aiuto, occorre che chi vuole aiutarti possa vedere cosa stai facendo ...

Ti garantisco che quell'effetto salto e` dato dal bordo che in un caso c'e` e in un altro no. Non e` dato dal fatto che qualche elemento sia float.
E poi ti conviene eliminare tutti gli attributi position: l'unico effetto che hanno (in una pagina di quel tipo) e` di aumentare la confusione e probabilmente permettere sovrapposizioni.

E non e` inserendo altri errori che puoi correggere: l'attributo html border non esiste nella DTD che usi, ma alcuni browser lo accettano (e ci sono browser che danno priorita` agli attributi HTML, altri che danno priorita` ai CSS).

[elenagb]

I bordi adesso sono tutti a posto, caricati anche in rete. Ti chiedo scusa, ma effettivamente
non aggiorno sempre i file. Ora la pagina in questione
(http://annodareconstile.altervista.org/tribu.htm)
è aggiornata ed ho tolto il bordo 0 nell'html.

Adesso provo a togliere i posizionamenti (non so come farò ma ci provo), ed il display none.

Il problema comunque non sussiste in IE (perfetto), ce l'ho su Mozilla.


Io ti ringrazio tanto, ma rimango dell'avviso che qui sia diventata troppo satura la discussione.

[Mich_]

o ti ringrazio tanto, ma rimango dell'avviso che qui sia diventata troppo satura la discussione.

Non e` questione di saturazione, ma nel caso della discussione chiusa, era un problema gia` affrontato in altra discussione, che non aveva senso riaprire.


Mi sono perso nei tuoi CSS.
Intanto noto che i file CSS sono due.
E noto che c'e` un po' di disordine tra i vari selettori.
Tieni presente che nei CSS (fogli di stile A CASCATA) l'ordine e` importante: una dichiarazione successiva sovrascrive quelle precedenti, e poi c'e` una regola complicata di importanza per cui un selettore piu` preciso ha importanza maggiore di uno meno preciso.

Per cui il consiglio a questo punto e` di dare un ordine logico ai selettori.

Altra cosa:
vedo che utilizzi gli em per i bordi. Non mi piace. Ora spiego perche`.

Nei CSS per lo schermo, ci sono fondamentalmentalmente 3 unita` di misura: px em %
I px sono molto adatti a sistemare le immagini ed oggetti contenenti essenzialmente immagini, che per loro natura hanno dimensioni in px;
gli em sono molto adatti per sistemare oggetti contenente prevalentemente testo;
le % sono adatte a sistemare oggetti che devono avere una posizione nella pagina (o in altro oggetto).

Ma il browser quando visualizza trasforma tutto in px. Per fare tale trasformazione opera delle approssimazioni: in pratica prende le % o gli em e li trasforma in px usando le proporzioni, e poi deve approssimare al px (che e` l'unita` di misura degli oggetti sullo schermo). Le regole di approssimazione sono diverse tra i vari brwoser, ed a volte anche usando lo stesso browser su computer diversi.

Ad esempio, due oggetti larghi 50% in qualche brwoser non ci stanno in un oggetto che ha larghezza uguale ad un numero dispari di px: infatti supponiamo di avere un contenitore largo 201 px: il 50% di tale misura in numeri reali e` 100,5, che viene approssimata in 100 o 101 a seconda di vari fattori: se in un brwoser la meta` di 201 e` 101, due oggetti larghi 101 non ci stanno dentro un contenitore largo 201.
Lo spostamento visto per FF, potrebbe cadere in questo caso: infatti io vedo i margini superiore ed inferiore leggermente diverrsi, per cui mi pare che siano uno largo 1px ed uno largo 2: per una verifica potresti fare una copia dello schermo (printScreen, se usi Windows), e poi analizzare l'immagine con un programma di grafica che possa zoomare (basta anche il "paint", presente in tutte le distribuzioni dei SO).

[elenagb]

Ho deciso di mettere tutto in em perchè, in tutti i tutorial, segnalano questo
accorgimento affinchè il sito rimanga proporzionato con qualsiasi tipo di risoluzione video.
Ci ho messo 3 giorni a convertire tutto da px ad em con la calcolatrice (ho utilizzato questo articolo: http://jontangerine.com/log/it/l-inc...tici-con-i-css).

Se alludi ai margini dei gruppi di foto è vero, ho messo dei padding apposta. La colonna centrale (quella con le foto), senza i padding, sempre su FF si spacca mentre scorre benissimo in IE.


I css sono uno per ogni pagina del sito. Pessimo vero? Il problema è che pensavo di raccogliere il tutto in un unico css alla fine, perchè faccio una gran fatica a lavorare su un css solo non
essendo il mio mestiere. Mi confondo.

Confesso che mi sto avvilendo. Sto togliendo i posizionamenti e non riesco nemmeno a spiegare
il macello che sta succedendo!

[Mich_]

Non e` che internet sia un "insegnante perfetto". Ci trovi tutto ed il contrario di tutto. E tutto va preso con la zucca, controllando anche le date di certi consigli.
Come ho gia` avuto modo di accennare, consigli che tre anni fa erano da seguire senza esitazione, ora sono superati.

Riguardo agli em: il discorso che fai e` corretto, SE (e solo se) i tuoi blocchi contengono prevalentemente testo.
Ma le immagini non vanno dimensionate in em, pena la perdita di risoluzione o uno sgranamento delle stesse: meglio lasciarle in px (sono state generate in px).
Per i bordi e piccoli margini/padding vale un discorso analogo: un bordo di 1px o 2px non ha senso definirlo in em, che poi vanno riconvertiti in px (con i problemi di arrotondamento di cui sopra); invece un margine che serve per centrare, e` meglio lasciarlo in auto o definirlo in %.

Il problema dei posizionamenti.
Esistono, e ci sono cose per cui sono necessari. Ma sono tra le cose piu` complesse nei CSS.
Se vuoi usarli, devi prima leggere e capire i seguenti articoli: se non li capisci e` meglio che lasci perdere i posizionamenti al momento: li prenderai in considerazione quando sarai pronta.
I posizionamenti assoluti
Capire i posizionamenti relativi

[elenagb]

La telenovela è quasi finita. Ho corretto tutto.
Ho rimesso i px, ho corretto display none, ho tolto i posizionamenti ed ho provato a validare
il css per vedere se c'erano errori. Il Sig.W3C mi ha suggerito (non era un errore, ma solo un avviso) di mettere la larghezza a photo a (che ha il float inquisito). Senza volerlo, in un eccesso di zelo, io gli ho messo anche l'altezza ed il problema è risolto, con css validato perfettamente.
Le foto stanno fisse e non si spostano.

Adesso però inizia un'altra telenovela. FF è sistemato, il problema c'è in IE.
Avendo tolto i posizionamenti mi si è scompensato il margine sinistro del div container. Almeno penso sia quello, però a questo punto non sono più sicura di niente.
Guarda cosa succede su IE: http://www.annodareconstile.altervista.org/tribu.htm
Mi sono anche letta tutti i tutorial che mi hai linkato, ma questa proprio non la so mettere a posto. Visto che il problema è risolto, se rimettessi i posizionamenti?