centrare una serie di bottoni uno accanto all'altro centrati

[james]

Ho creato un div, al cui interno ci sono svariati <a che vorrei disporre sulla stessa linea uno accanto all'altro.
Per fare questo ho usato questo css:

div#rpp { text-align:center; font-size:18pt; line-height:1.6em; width:100% }
div#rpp a { display:block; float:left; width:39px; height:39px; margin:1px; border:1px solid red; }

e questo è l'html

<div id="rpp">
1
2
3

</div>

ora vorrei che questi link, fossero al centro del div rpp, c'è un modo per farlo?? ed è giusto il CSS che ho usato?

[index]

Perchè scusa? In quel modo non sono al centro?

E per quale motivo gli hai dichiatati block?

Spiega...

[fcaldera]

dando per scontato che il div sia già centrato (manca però margin: 0 auto sui link togli display: block e float: left che nel tuo caso non servono

[james]

i link devono avere una immagine di sfondo, per questo li ho dichiarati block e quindi di conseguenza float:left. avevo tralasciato un particolare importante scusate

[pierofix]

La prima correzione da fare, a mio avviso, è nel markup: così com'è scritto, infatti, presenta un errore a livello di accessibilità (ovvero link adiacenti senza separazione mediante caratteri non-link). Ci vorrebbe, come al solito in questi casi, una lista:

<div id="rpp">
   <ul>[*]1[*]2[*]3[*]4[/list]
</div>

Dopodichè, nel CSS:

#rpp,
#rpp *
{
   margin:0; padding:0;
   text-align:center;
}
   #rpp li
   {
      display:inline;
      list-style-type:none;
   }

i link devono avere una immagine di sfondo, per questo li ho dichiarati block e quindi di conseguenza float:left. avevo tralasciato un particolare importante scusate

Che ne dici di giocare eventualmente con il padding dei singoli link?

[james]

Originariamente inviato da pierofix
La prima correzione da fare, a mio avviso, è nel markup: così com'è scritto, infatti, presenta un errore a livello di accessibilità (ovvero link adiacenti senza separazione mediante caratteri non-link). Ci vorrebbe, come al solito in questi casi, una lista:

<div id="rpp">
   <ul>[*]1[*]2[*]3[*]4[/list]
</div>

Dopodichè, nel CSS:

#rpp,
#rpp *
{
   margin:0; padding:0;
   text-align:center;
}
   #rpp li
   {
      display:inline;
      list-style-type:none;
   }

Che ne dici di giocare eventualmente con il padding dei singoli link?

ma poi dichiaro block il campo a o il campo li?

[pierofix]

Nessuno di essi. Se i testi dei pulsanti sono dei numeri significa che non vi è molta disparità tra le loro dimensioni. Di conseguenza, se lo sfondo è ad esempio di 50×50 px², puoi attribuire ai link una cosa del genere:

#rpp a
{
   padding:25px; /* O quel che è: vai per tentativi. */
}

[james]

Originariamente inviato da pierofix
Nessuno di essi. Se i testi dei pulsanti sono dei numeri significa che non vi è molta disparità tra le loro dimensioni. Di conseguenza, se lo sfondo è ad esempio di 50×50 px², puoi attribuire ai link una cosa del genere:

#rpp a
{
   padding:25px; /* O quel che è: vai per tentativi. */
}

e nel caso in cui il contento è del testo non predeterminato? Almeno imparo qualcosa in più.

Altra cosa che mi capita spesso, faccio dei link senza contenuto, li faccio block e gli assegno un'immagine di sfondo, per creare un tasto e avere la possibilità di usare le pseudo classi, è concettualmente errato?

[pierofix]

Originariamente inviato da james
e nel caso in cui il contento è del testo non predeterminato? Almeno imparo qualcosa in più.

In quel caso sarebbe più difficile. Dovresti assegnare il block e il float ai link, attribuire loro una larghezza fissa, specificare che la lista abbia larghezza pari alla somma delle larghezze dei vari link, e applicare alla lista stessa dei margini laterali con valore auto.

Non mi vengono in mente soluzioni più flessibili, ma non essendo poi così esperto probabilmente ne esistono di più valide.

Altra cosa che mi capita spesso, faccio dei link senza contenuto, li faccio block e gli assegno un'immagine di sfondo, per creare un tasto e avere la possibilità di usare le pseudo classi, è concettualmente errato?

Devi sempre partire dal presupposto che la struttura di markup abbia un senso anche quando privata di tutti gli stili. Un link vuoto non ha senso.

Piuttosto sarebbe bene inserire un testo descrittivo nel link e nascondere tale testo tramite CSS, lasciando così lo spazio per l'immagine di sfondo. Ci sono varie tecniche, tutte sotto il nome principale di image replacement: ti consiglio una ricerca perchè è una situazione molto ricorrente, e saperla affrontare in modo intelligente porta ovviamente risultati migliori.