display: inline e Firefox

[ivanodf]

Io vorrei allinearle una di seguito all'altra come sono attualmente in produzione su www.uritalia.it inserendo le immagini direttamente nei css.

il css è:

#certificazioni {
padding: 0; margin: 0; background: #fff; text-align: center; color: #000;
}
ul.certificazioni {
padding: 0; margin: 0; vertical-align: middle; text-align: center
}
li.certificazioni {
display: inline; list-style-type: none;
}

a.xhtml {
padding:0; margin:0 auto; display: inline; background: url(/images/w3c_xtml.gif) transparent 50% no-repeat; width:74px; height:26px;
}
a.css {
padding:0; margin:0 auto; display: inline; background: url(/images/w3c_css.gif) transparent 50% no-repeat; width:74px; height:26px;
}
a.dichiarazione {
padding:0; margin:0 auto; display: inline; background: url(/images/dichiarazione.gif) transparent 50% no-repeat; width:83px; height:26px;
}


e il codice xhtml è:


<div id="certificazioni">
<ul class="certificazioni">

<li class="certificazioni">



<li class="certificazioni">



<li class="certificazioni">
<a class="dichiarazione" title="Dichiarazione di accessibilità"
href...."></a>

[/list]
</div>

Con il codice riportato i tre logos a fondo pagina con IE mi si visualizzano correttamente a centro pagina mentre con Firefox... scompaiono proprio!
Se modifico la proprietà display da inline a block riappaiono ma impilate una sopra l'altra.

Credo di aver capito il motivo. Mentre IE si adatta piu facilmente anche a situazioni come questa firefox molto più rigido va a vedere che cosa vuoi centrare e se non legge ne testo ne immagini nel contesto non si muove di un millimetro e ti nega la possibilità di visualizzare alcunchè!.
A riprova di questo è che se inserisco del testo dentro il link riappare anche l'img, ovviamente con il testo sopra.

Ho provato anche ad inserire un testo nascostro con la proprieta display: none

<a class="css" title=" Codice CSS valido! - Vai al sito del validatore W3C"
href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.uritalia.it/css/screen.css">
<span class="nascosto">Codice css valido</span></a>

... ma Firefox non si fa ingannare e ti toglie anche l'immagine!

Morale o lascio le immagini nel contesto oppure c'è una soluzione?
Potrei lasciare le imgs nel contesto ma ho letto che le immagini di presentazione devono andare nei css e quelle del contesto nella pagina.
E questo mi sembra anche giusto sommandolo poi al fatto che sono immagini che devono essere visualizzate in ogni pagina, mettendole nei css le fai caricare una volta soltanto.

questo quesito è stato già posto in un altro ambiente professionale ma non è stata data risposta segno probabile che non c'è soluzione... comunque ho ritenuto opportuno fare un tentativo anche in questo forum non si sa mai che qualcuno abbia già incontrato e risolto il problema.

grazie per l'attenzione
Ivano

[Mich_]

Invece che trasformare un blocco in inline, usa la proprieta` corretta per affiancare:
float: left; /* oppure right */

[ivanodf]

Originariamente inviato da Mich_
Invece che trasformare un blocco in inline, usa la proprieta` corretta per affiancare:
float: left; /* oppure right */

se uso il float left al posto del display inline tutte le icone mi si affiancano a lato sinistro della pagina, credo che mi sta sfuggendo qualcosa...

#certificazioni {
padding: 0; margin: 0 auto; background: #fff; text-align: center; color: #000;
}
ul.certificazioni {
padding: 0; margin: 0 auto; vertical-align: middle; text-align: center
}
li.certificazioni {
display: inline; list-style-type: none;
}
a.xhtml {
padding:0; margin:0 auto; float: left; background: url(/images/w3c_xtml.gif) transparent 50% no-repeat; width:74px; height:26px;
}
a.css {
padding:0; margin:0 auto; float: left; background: url(/images/w3c_css.gif) transparent 50% no-repeat; width:74px; height:26px;
}
a.dichiarazione {
padding:0; margin:0 auto; float: left; background: url(/images/dichiarazione.gif) transparent 50% no-repeat; width:83px; height:26px;
}



<ul class="certificazioni">

<li class="certificazioni">



<li class="certificazioni">



<li class="certificazioni">
<a class="dichiarazione" title="Dichiarazione di accessibilità"
href...."></a>

[/list]

[Mich_]

Non riesco a seguirti.

Lo so che altri hanno idee diverse, ma io credo che non si deva MAI trasformare un oggetto da tipo blocco ad inline: credo che gli svantaggi superino i vantaggi. Inoltre in un oggetto inline non ci puoi mettere altri oggetti di tipo blocco.
Invece trasformare un inline in blocco puo` essere utile a volte.

Il float (left o right) si puo` applicare ad oggetti inline (per farci girare il testo attorno) o ad oggetti blocco (per affiancarli). Il problema degli spazi, si risolve con le proprieta` margin e padding.

Ma stiamo sempre parlando in teoria. Non e` che hai una pagina di prova in linea? Anche uno schema grafico con la disposizione che vorresti puo` aiutarci a capire.

[ivanodf]

Originariamente inviato da Mich_

Ma stiamo sempre parlando in teoria. Non e` che hai una pagina di prova in linea? Anche uno schema grafico con la disposizione che vorresti puo` aiutarci a capire.

La pagina in linea c’è gia ovvero www.uritalia.it e come puoi vedere a fondo pagina al centro ci sono le 3 icone (xhtml, css, dichiarazione) gestite per il momento come fossero immagini del contenuto specifico della pagina ovvero le imgs sono inserite nella pagina.

Queste immagini le vorrei inserire nei css perché, credo, rappresentino imgs di presentazione e perché in questa maniera non devo ricaricarle ogni volta che cambio pagina visto che sono una costante di ognuna.

Poi a questo punto mi farebbe piacere anche capire come si gestisce un problema del genere a livello di css mantenendo la compatibilità dei browser.

Se non è sufficiente produco una pagina solo con il codice in oggetto.

[Mich_]

Ho visto la pagina.
Mi pare che sei riuscito ad ottenere quello che volevi (all'inizio).
Ci sono delle cose che non capisco nel tuo codice (a.xhtml, a.css, ...) che ritengo una mescolanza di due codici (prima e dopo).
E comunque non mi piace l'uso che fai degli stessi nomi per oggetti diversi (classe e id). In teoria dovrebbero convivere bene, ma in pratica non ne sono tanto sicuro (e possono creare confusione nel progettista, che e` fonte di errori).

Ora il discorso cambia e diventa:
Come spostare un'immagine da primopiano a sfondo?

Una delle motivazioni pero` non e` corretta: comunque un'immagine resta nella cache del browser, e se ricarichi la stessa immagine (il path risultante deve rimanere uguale) viene presa dalla cache.
Invece puo` essere corretto considerare l'immgine un abbellimento, e quindi caricarla in bground.

Pero` in tal caso sorge un problema. Cosa vede l'utente che non carica le immagini? Non esiste l'alt per gli sfondi. Quindi devi inserire un contenuto testuale, che dovrai nascondere con il CSS. La cosa e` stata gia` affrontata (in questo forum o in (X)HTML), per cui ti rimando alla ricerca per maggiori info.

PS:
ti consiglio di farti una paginetta per le prove: altrimenti rischi di sporcare la tua pagina con quintali di codice di prova (in parte commentato).

[ivanodf]

Ho visto la pagina.
Mi pare che sei riuscito ad ottenere quello che volevi (all'inizio).
Ci sono delle cose che non capisco nel tuo codice (a.xhtml, a.css, ...) che ritengo una mescolanza di due codici (prima e dopo).

ho eliminato le ridondanze dei test effettuati

E comunque non mi piace l'uso che fai degli stessi nomi per oggetti diversi (classe e id). In teoria dovrebbero convivere bene, ma in pratica non ne sono tanto sicuro (e possono creare confusione nel progettista, che e` fonte di errori).

quali in particolare?

Pero` in tal caso sorge un problema. Cosa vede l'utente che non carica le immagini? Non esiste l'alt per gli sfondi. Quindi devi inserire un contenuto testuale, che dovrai nascondere con il CSS. La cosa e` stata gia` affrontata (in questo forum o in (X)HTML), per cui ti rimando alla ricerca per maggiori info.

suppongo che si possa usare un display none, comunque vado a cercare il post.

ti consiglio di farti una paginetta per le prove: altrimenti rischi di sporcare la tua pagina con quintali di codice di prova (in parte commentato).

solitamente lo faccio ma questa volta per velocizzare la cosa avevo messo temporaneamente la modifica sulla pag e poi mi ero dimenticato di toglierla.

ciao e grazie Michele

[Mich_]

Ieri era a posto, ora non piu`. Evidentemente stai continuando a cambiare.

quali in particolare?

id="certificazioni"
class="certificazioni"
(e forse ieri ce n'era un altro ancora)

solitamente lo faccio ma questa volta per velocizzare la cosa avevo messo temporaneamente la modifica sulla pag e poi mi ero dimenticato di toglierla.

E cosi` anziche` velocizzare hai rallentato....

Ora non so piu` cosa consigliarti. Non mi ci ritrovo piu`.

[ivanodf]

Originariamente inviato da Mich_
Ieri era a posto, ora non piu`. Evidentemente stai continuando a cambiare.

lo cambiato di corsa e ho uploadato quello sbagliato

id="certificazioni"
class="certificazioni"

prendero sicuramente in considerazione la cosa

(e forse ieri ce n'era un altro ancora)

nn mi pare di averci messo mano al css

E cosi` anziche` velocizzare hai rallentato....

la fretta è cattiva consigliera!

Ora non so piu` cosa consigliarti. Non mi ci ritrovo piu`.

a questo punto devo trovare soltanto un minuto per andare a cercare nel forum, come mi hai suggerito.
Alle brutte metto da parte la voglia di dover fare le cose a perfezione e lascio le immagini nella pagina come sono ora.

grazie Michele oltre per i consigli anche per la pazienza.

buona giornata

[ivanodf]

Pero` in tal caso sorge un problema. Cosa vede l'utente che non carica le immagini? Non esiste l'alt per gli sfondi. Quindi devi inserire un contenuto testuale, che dovrai nascondere con il CSS. La cosa e` stata gia` affrontata (in questo forum o in (X)HTML), per cui ti rimando alla ricerca per maggiori info.

ho fatto un giretto ma non è stato esaustivo per quello che mi serve.
Prima di chiudere definitivamente la cosa ho pensato di chiederti se ci sono link specifici a siti che trattano di css in quanto ho visto che ci sono decine di tutorial.

se non la conosci ti saluto sin d'ora e ti ringrazio.