[css] float e allineamento al centro

Printable View

15-01-2006, 19.43.04

[css] float e allineamento al centro

Ho un esempio di rollover di immagini usando i css anzichè javascript.
Per funzionare usa display:block; e poi float: left; in modo tale da riportare tutte le immagini sulla stessa riga.
Il problema è che vorrei le immagini al centro, e non a sinistra, ma da quel che ho capito, con float non si può fare...
Conoscete qualche alternativa?
Grazie

Posto direttamente anche il codice, html:

Codice:

<div id="pulsantiinalto"> <span id="uno"><a href="home.php"><img src="immagini/pulsanti/home.gif" alt="Home Page" title="Home Page"></a></span> <span id="due"><a href="home.php?sez=giochi"><img src="immagini/pulsanti/giochi.gif" alt="Download Giochi" title="Download Giochi"></a></span> <span id="tre"><a href="home.php?sez=giochi_online"><img src="immagini/pulsanti/giochi_online.gif" alt="Giochi On-Line" title="Giochi On-spanne"></a></span> <span id="quattro"><a href="home.php?sez=barzellette"><img src="immagini/pulsanti/barzellette.gif" alt="Barzellette" title="Barzellette"></a></span> <span id="cinque"><a href="home.php?sez=scherzi"><img src="immagini/pulsanti/scherzi.gif" alt="Scherzi" title="Scherzi"></a></span> <span id="sei"><a href="home.php?sez=passatempi"><img src="immagini/pulsanti/passatempi.gif" alt="Passatempi" title="Passatempi"></a></span> </div>

il css (interno alla pagina, perchè ho scoperto che se uso un css esterno, non funziona!!:cry:):

Codice:

<style type="text/css"> img{border-width: 0;} div#pulsantiinalto span{float:left; margin: 0 auto; padding: 0;} div#pulsantiinalto a{display: block;} div#pulsantiinalto a:hover{line-height: 1px; /*serve per IE*/} div#pulsantiinalto a:hover img{visibility: hidden} span#uno{background: url("immagini/pulsanti/home2.gif")} span#due{background: url("immagini/pulsanti/giochi2.gif")} span#tre{background: url("immagini/pulsanti/giochi_online2.gif")} span#quattro{background: url("immagini/pulsanti/barzellette2.gif")} span#cinque{background: url("immagini/pulsanti/scherzi2.gif")} span#sei{background: url("immagini/pulsanti/passatempi2.gif")} </style>
15-01-2006, 20.11.36
heracleum

1) Non è possibile che non funzioni con un css esterno, probabilmente ti ha ingannato la Cache dei browser. QUando metti un css esterno, ad ogni modifica del css devi FORZARE il ricaricamento dell'ultima versione con CTRL+F5 e vedi che funziona.

2) visto appunto che il float al centro non esiste, potresti togliere questa riga:
div#pulsantiinalto span{float:left; margin: 0 auto; padding: 0;}
e sostituirla con un semplicissimo:
div#pulsantiinalto { text-align:center; }

Anche perché c'era un margin: 0 auto; che dovrebbe centrare ma su Mozilla funziona sempre mentre su IE se non metti il DOCTYPE giusto (e gli eviti di comportarsi in QuirkMode) non centra.

Così a prima occhiata non dovrebbe creare problemi, se qualcosa non va è molto meglio che metti la pagina online e vediamo come si comporta altrimenti è difficile.
15-01-2006, 20.26.52

ho fatto come dici (ho tolto la riga:

Codice:

div#pulsantiinalto span{float:left; margin: 0 auto; padding: 0;}

e ho aggiunto il text align) ma ora il display:block; fa andare a capo il tutto, che io volevo in un'unica riga..
Inoltre ora siccome ho tolto anche margin e padding, penso sia per questo, non viene caricata l'immagine! bensì passando sopra col mouse, scompare la prima e non compare la seconda..
(questo succedeva anche con il foglio di stile esterno)
:cry:
http://www.robedivertenti.altervista.org/home.php (per vedere il risultato)

p.s. uso mozilla firefox, forse con ie funziona ma non è il mio scopo :)
15-01-2006, 23.20.12

per ottenere il centramento (anche con gli span a float:left) devi impostare una larghezza per il div#pulsantiinalto, ad es.

Codice:

img{border-width: 0;} div#pulsantiinalto {width:750px;margin-left:auto;margin-right:auto; text-align:center;} div#pulsantiinalto a{display: block;} div#pulsantiinalto a:hover{line-height: 1px; /*serve per IE*/} div#pulsantiinalto a:hover img{visibility: hidden} span#uno{float:left; background: url("immagini/pulsanti/home2.gif")} span#due{float:left;background: url("immagini/pulsanti/giochi2.gif")} span#tre{float:left;background: url("immagini/pulsanti/giochi_online2.gif")} span#quattro{float:left;background: url("immagini/pulsanti/barzellette2.gif")} span#cinque{float:left;background: url("immagini/pulsanti/scherzi2.gif")} span#sei{float:left;background: url("immagini/pulsanti/passatempi2.gif")}

penso intendessi questo

mavericck
15-01-2006, 23.43.57

Niente... :cry:
L'allineamento rimane a destra...
15-01-2006, 23.53.33

uhm.... sei sicuro di aver aggiornato la cache? editando al volo i css con il codice che ti ho scritto sopra e con firefox, le immagini vengono allineate al centro e su una riga

mavericck
16-01-2006, 09.38.20

sì cioè tu hai tolto la riga con "float ecc.ecc." ho provato a fare prima come dici tu ma non mi sostituisce le immagini, le fa scomparire e basta. Poi ho aggiunto la riga e sono tornato da capo con la sostituzione perfetta ma con l'allineamento a destra.. :crycry:
16-01-2006, 10.18.11
heracleum

Occhio ad un altro particolare,
tu imposti lo sfondo così:
background: url("immagini/pulsanti/home2.gif");

non è molto corretto, visto che fornisci SOLO il "sotto-argomento" -image dovresti scrivere:
background-image: url("immagini/pulsanti/home2.gif");

oppure impostare TUTTI i sottoargomenti di background, guarda in una qualsiasi guida CSS su come fare.
16-01-2006, 20.33.34

grazie, ma non cambia nulla :crycry:
torno al javascript..
grazie comunque a tutti quelli che mi hanno risposto!
16-01-2006, 21.57.10
heracleum

Ti arrendi subito? naaa
javascript va bene per altro non certo i rollover.

..allora ho testato in locale, su IE funzionava ma a Mozilla proprio non andavano a genio quegli SPAN... e neanche a me, a che servono? se ci sono già i link (a)?
Tolti span, corrette le sottoproprietà background -come ti avevo detto ma non l'avevi fatto- e funge alla grande sia su IE che Moz.
Ecco il pezzo modificato:

Codice HTML:

<style type="text/css"> body{background-image: url(/immagini/sfondo.gif)} img{border-width: 0px;} div#pulsantiinalto {text-align:center;} div#pulsantiinalto a{ display: block; background-repeat: no-repeat; background-position: top center; } div#pulsantiinalto a:hover{line-height: 1px; /*serve per IE*/} div#pulsantiinalto a:hover img{visibility: hidden} #uno{background-image: url(/immagini/pulsanti/home2.gif)} #due{background-image: url(/immagini/pulsanti/giochi2.gif)} #tre{background-image: url(/immagini/pulsanti/giochi_online2.gif)} #quattro{background-image: url(/immagini/pulsanti/barzellette2.gif)} #cinque{background-image: url(/immagini/pulsanti/scherzi2.gif)} #sei{background-image: url(/immagini/pulsanti/passatempi2.gif)} </style> </head> <body> <div id="pulsantiinalto"> <a id="uno" href="home.php"><img src="/immagini/pulsanti/home.gif" alt="Home Page" title="Home Page"></a> <a id="due" href="home.php?sez=giochi"><img src="/immagini/pulsanti/giochi.gif" alt="Download Giochi" title="Download Giochi"></a> <a id="tre" href="home.php?sez=giochi_online"><img src="/immagini/pulsanti/giochi_online.gif" alt="Giochi On-Line" title="Giochi On-spanne"></a> <a id="quattro" href="home.php?sez=barzellette"><img src="/immagini/pulsanti/barzellette.gif" alt="Barzellette" title="Barzellette"></a> <a id="cinque" href="home.php?sez=scherzi"><img src="/immagini/pulsanti/scherzi.gif" alt="Scherzi" title="Scherzi"></a> <a id="sei" href="home.php?sez=passatempi"><img src="/immagini/pulsanti/passatempi.gif" alt="Passatempi" title="Passatempi"></a> </div>

Edit: BRRR non mi ero accorto cos'era quel <body background="immagini/sfondo.gif"> ?? per carità :tongue
corretto