Topic: Mozilla e i CSS

[Akarak]

Dovrei fare un restyling del mio sito e vorrei utilizzare i css... sono a buon punto però quando chiedo di vedere una lista con al posto dei soliti marcatori delle immagini personalizzate con Mozilla non si vedono (Con altri browser sì invece...). Non ho il codice sottomano però chiedevo se era capitato a qualcuno/a una cosa del genere e come l'ha risolta. Premetto che il foglio di stile è esterno e lo riconsco con il comando @import... Grazie dell'attenzione!

[flod]

Dovrei fare un restyling del mio sito e vorrei utilizzare i css... sono a buon punto però quando chiedo di vedere una lista con al posto dei soliti marcatori delle immagini personalizzate con Mozilla non si vedono (Con altri browser sì invece...). Non ho il codice sottomano però chiedevo se era capitato a qualcuno/a una cosa del genere e come l'ha risolta. Premetto che il foglio di stile è esterno e lo riconsco con il comando @import... Grazie dell'attenzione!

L'unico modo per aiutarti è avere il codice della pagina.

[arso]

Io l'ho risolto così (funziona anche con Firefox):

Il codice HTML è:

Codice: [Seleziona]


<ul class="iconlist">
<li class="pdf">
<strong><a href="documento.pdf" title="Visualizza il sommario del documento. In formato PDF. 81 kbytes">La dea di Sibari e il santuario ritrovato</a></li>
<li class="htm">
<strong><a href="index.html" title="Visualizza il sommario del bollettino">La chiesa di San Giorgio in Velabro a Roma</a></li>
</ul>


mentre le regole CSS sono le seguenti:

Codice: [Seleziona]


/*** Lista con icone ************************+*/
.iconlist {
list-style: none;
margin: 0;
padding: 0;
}

li.pdf {
background-image: url(/img/icone/bullet_pdf.gif);
background-repeat: no-repeat;
background-position: 0 20%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.txt {
background-image: url(/img/icone/bullet_txt.gif);
background-repeat: no-repeat;
background-position: 0 20%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}

li.htm {
background-image: url(/img/icone/bullet_htm.gif);
background-repeat: no-repeat;
background-position: 0 20%;
padding: 3px 0 3px 20px;
margin: .4em 0;
}


Ovviamente devi avere le icone corrispondenti nelle cartelle specificate nelle regole CSS.

Per un esempio vedi: http://www.bap.beniculturali.it/organizzazione/normativa.html

Ciao[/code]

[prometeo]

arso: i miei complimenti, davvero una cosa ben fatta, mi studierò il tutto per bene perchè trovo il tutto molto professionale.
Ciao, Giacomo.

[arso]

arso: i miei complimenti, davvero una cosa ben fatta, mi studierò il tutto per bene perchè trovo il tutto molto professionale.
Ciao, Giacomo.

Grazie prometeo ma il merito non è mio : il metodo l'ho trovato in rete, sul sito http://www.maxdesign.com.au/presentation ricchissimo di trucchi e spiegazioni sull'uso dei CSS.

Dai un occhiata anche a queste pagine: http://css.maxdesign.com.au/index.htm: da un sacco di indicazioni su come realizzare liste semplici e annidate con i CSS.

Molto utile e interessante.

Ciao

[prometeo]

Sì, sì, quelle pagine le conosco, ma forse è la prima volta che mi imbatto in un sito della PA così ben fatto.
Ciao, Giacomo.

[Akarak]

Grazie della dritta... Ho avuto solo adesso un attimo per ritornare qui.

Ora sono tornato al mio PC e ho verificato che quanto detto è simile a quanto da me fatto ovvero:

Per il CSS :

Codice: [Seleziona]


...
ol#steps{list-style-type: none;margin: 0;padding: 0}
li{font-size: 120%;font-weight: 300;color: #3ED6FE;margin: 0;padding-left: 35px;line-height: 35px}
li#11{background: #FFF url(immagini/1.jpg) no-repeat left center}
...


Per l'HTML:

Codice: [Seleziona]


...
<ol id="steps">
<li id="11">Capitolo 1</li>
...
</ol>
...


Vedo sono le varie voci senza l'immagine avanti... Ho provato a sostituire come mostrato da arso ma lo stesso nulla; non vedo niente!

[Michele Dal Corso]

Guarda nella sezione download di Mozilla Italia: ho usato i marcatori di lista personalizzati a seconda del sistema operativo.

In realtà per il tag li devi usare questa proprietà, e non impostare il background:

Codice: [Seleziona]

list-style-image: url("immagini/1.png");

Ciao,
Michele

[Akarak]

Guarda nella sezione download di Mozilla Italia: ho usato i marcatori di lista personalizzati a seconda del sistema operativo.

In realtà per il tag li devi usare questa proprietà, e non impostare il background:

Codice: [Seleziona]

list-style-image: url("immagini/1.png");

Ciao,Michele

Ok, grazie; appena torno a casa ci provo. Io nel frattempo in questi giorni mi sono scaricato il plug-in per editare i CSS e per questa pagina in cui è contenuto il codice in oggetto ho notato che mi segnalava l'errore che non riusciva a caricare il file esterno... (Non ricordo di preciso cosa mi segnala ma ve lo farò sapere...). Ciao a tutti

[Akarak]

Ecco il messaggio di errore; sinceramente non ho capito un granchè... se qualcuno può aiutarmi...

Messaggio di errore

Codice: [Seleziona]

**** Style sheets whose contents could be loaded were ****/
/**** imported instead. Rule order may be incorrect ****/
/**** as a result. ****/
@import "file:///C:/Sito%20Locale/stile.css";

/**** Imported style sheet stile.css ****/

/* Non-http; imported above. */


/**** Inline STYLE-tag style sheet ****/

/* @import "stile.css"; */

[Akarak]

Guarda nella sezione download di Mozilla Italia: ho usato i marcatori di lista personalizzati a seconda del sistema operativo.

In realtà per il tag li devi usare questa proprietà, e non impostare il background:

Codice: [Seleziona]

list-style-image: url("immagini/1.png");

Ciao,Michele

Ok, grazie. Io nel frattempo in questi giorni mi sono scaricato il plug-in per editare i CSS e per questa pagina in cui è contenuto il codice in oggetto ho notato che mi segnala questo errore che sinceramente non ho capito... se qualcuno può aiutarmi...

Messaggio di errore

Codice: [Seleziona]

**** Style sheets whose contents could be loaded were ****/
/**** imported instead. Rule order may be incorrect ****/
/**** as a result. ****/
@import "file:///C:/Sito%20Locale/stile.css";

/**** Imported style sheet stile.css ****/

/* Non-http; imported above. */


/**** Inline STYLE-tag style sheet ****/

/* @import "stile.css"; */[/quote]

...nel frattempo vado a vedere in Mozilla Italia. Grazie a tutti

[flod]

Non ho idea del significato di questo errore...
Nella mia ignoranza, perchè importi i css con @import quando potresti inserirli con questo codice?

Codice: [Seleziona]

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

[prometeo]

Per nasconderli ai browser che li gestiscono male (tipo NS4.x) o almeno credo...
Ciao, Giacomo.

[Akarak]

Finalmente ho trovato l'inghippo... vediamo innanzitutto di rispondere a quanti mi hanno aiutato.

per flod : Ha ragione prometeo, avevo letto da qualche parte questa info; utilizzo questo trucchetto per evitare errori con vecchi browser. Ho ascoltato però il tuo consiglio ovvero nella pagina HTML ho messo il richiamo ad un foglio generico CSS e qui il richiamo vero (col il @import) al CSS che gestisce gran parte degli stili della pagina in questione (Un pò come ha fatto dalco con la pagina di Download del sito mozillaitalia...)

per tutti: L'errore era nel dichiarare il nome della li (Li avevo chiamati 11,12,13). Ho sostituito questi con caratteri alfanumerici (Tipo1,Tipo2, ecc...) e tutto va alla meraviglia!

Grazie a tutti quelli che mi hanno aiutato nel risolvere il problema e scusate i miei errori (Ho visto che ho ripetuto qualche msg del 3d...).

[arso]

Finalmente ho trovato l'inghippo... vediamo innanzitutto di rispondere a quanti mi hanno aiutato.

per flod : Ha ragione prometeo, avevo letto da qualche parte questa info; utilizzo questo trucchetto per evitare errori con vecchi browser. Ho ascoltato però il tuo consiglio ovvero nella pagina HTML ho messo il richiamo ad un foglio generico CSS e qui il richiamo vero (col il @import) al CSS che gestisce gran parte degli stili della pagina in questione (Un pò come ha fatto dalco con la pagina di Download del sito mozillaitalia...)

per tutti: L'errore era nel dichiarare il nome della li (Li avevo chiamati 11,12,13). Ho sostituito questi con caratteri alfanumerici (Tipo1,Tipo2, ecc...) e tutto va alla meraviglia!

Grazie a tutti quelli che mi hanno aiutato nel risolvere il problema e scusate i miei errori (Ho visto che ho ripetuto qualche msg del 3d...).

Felicitazioni!!!
Di seguito alcune consigli che posso darti sull'uso dei CSS.

Nel caso del tuo codice che appare qui sotto:

Codice: [Seleziona]

@import "file:///C:/Sito%20Locale/stile.css";

Cerca di evitare _sempre_ l'uso degli spazi nel nome dei file (di qualsiasi genere) e le maiuscole: non è detto che funzionino con tutti i S.O., cioè, nel caso specifico, invece di  Sito%20Locale usa sito_locale!!!.
Per le maiuscole/minuscole Linux/unix fa differenza e Windows no!!!
Eppoi in questo caso il riferimento al CSS è errato perchè non ti funziona più al momento che pubblichi il sito: la stringa "file:///" ti dice che il collegamento al CSS è relativo al file system (ovvero al percorso _fisico_ sul tuo disco) che non sarà più lo stesso nel momento in cui pubblicherai la pagina on-line (chi ti assicura che il disco sarà proprio l'unità C???).

Mentre per quanto riguarda il tuo codice che appare qui sotto:

Codice: [Seleziona]

...
ol#steps{list-style-type: none;margin: 0;padding: 0}
li{font-size: 120%;font-weight: 300;color: #3ED6FE;margin: 0;padding-left: 35px;line-height: 35px}
li#11{background: #FFF url(immagini/1.jpg) no-repeat left center}
...

L'uso che fai della regola CSS applicata  al marcatore <li> ("li#11") è sbagliata perche' "#11" serve a definire un identificatore, che deve essere unico per ogni pagina che usa il foglio stile che la definisce.
Ovvero non puoi usare la stessa regola per più di due liste che, nella stessa pagina web, devono avere la stessa formattazione.
Al suo posto usa la definizione di classe generica (senza usare un numero come carattere iniziale della definizione di classe in quanto è un errore), in questo modo:

Codice: [Seleziona]


.lista1{background: #FFF url(immagini/1.jpg) no-repeat left center}


Spero di esserti stato utile.
Ciao