Magazine

Allineare i pulsanti in orizzontale

Creato il 16 novembre 2011 da Vincicoppolas @vincicoppolas
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 .
Allineare i pulsanti in orizzontale

<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
The original post is on Blogger Tips and Tricks | Blogspot utility
© copyright, 2011. Share it freely, but must be link back to this source.
Vincicoppolas blogspot utilty
Best Regards!

Ritornare alla prima pagina di Logo Paperblog