Allineare i pulsanti in orizzontale

Per allineare in orizzontale pulsanti come facebook ,twitter ,google+ come si vede nel immagine sotto o altro materiale tipo delle foto basta inserire il codice del pulsante nel caso di facebook, twitter o google+ al interno dello spazio segnato in rosso che in questo caso prevede 3 pulsanti .













<center>

<div style="float:left; width:33%">codice</div>

<div style="float:left; width:33%">codice</div>

<div style="float:left; width:33%">codice</div>

</center>






Nel caso si voglia aggiungere un pulsante in piu' ,quindi 4 pulsanti in orizzontale basta aggiungere una stringa e ridurre la spazziatura a 25% su tutte le righe .Esempio :











<center>

<div style="float:left; width:25%">codice</div>

<div style="float:left; width:25%">codice</div>

<div style="float:left; width:25%">codice</div>

<div style="float:left; width:25%">codice</div>

</center>





Per inserire piu' pulsanti basta aggiungere questa riga : <div style="float:left; width:25%">codice</div> ricordandosi di settare i parametri widht al totale di 100% diviso per il numero di pulsanti .Esempio 3 pulsanti diviso 100 = 33% per ogni pulsante ; 4 pulsanti diviso 100 = 25% per ogni pulsante come si vede nel esempio sopra .Nel caso si vogliano inserire solo 2 pulsanti basta eliminare una stringa dal codice e settare widht a 50% .





Se volete utilizzare bottoni personalizzati che avete scaricato da i vari servizi come Iconfinder ,il codice da compilare e inserire e' questo :





<a href="http:url del vostro account facebook twitter o altro" target="_blank" title="Connect On Facebook"><img style="width:48px; height:48px;" src="http:url dove e' ospitata l'immagine " /></a>

Nella parte evidenziata in azzurro widht e height  inserite le dimensioni del icona .Il codice vale anche per le foto 





Related Posts