Ciao a tutti.
Lo ammetto subito sono una schiappa.
Ho voluto realizzare una pulsantiera di icone per i social network.
Cercando sul web ho trovato un menu che ha attirato la mia attenzione e ne ho studiato il codice.
Il link è questo http://www.marcofolio.net/css/displa...sing_css3.html ed il css da me modificato è il seguente:
/* ICONE SOCIAL CENTRATE CON WIDTH */
.social-class { list-style:none; margin:30px auto; width:486px;}
.social-class li { display:inline; float:left; background-repeat:no-repeat; }
.social-class li a { display:block; width:71px; height:71px; padding-right:10px; position:relative; text-decoration:none; }
.social-class li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
li.facebook { background-image:url("../images/icon-facebook.png"); }
li.googleplus { background-image:url("../images/icon-googleplus.png"); }
li.linkedin { background-image:url("../images/icon-linkedin.png"); }
li.pinterest { background-image:url("../images/icon-pinterest.png"); }
li.twitter { background-image:url("../images/icon-twitter.png"); }
li.youtube { background-image:url("../images/icon-youtube.png"); }
#social-id:hover li { opacity:0.2; }
#social-id li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#social-id li a strong { opacity:0;
-webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#social-id li:hover { opacity:1; }
#social-id li:hover a strong { opacity:1; top:-10px; }
Come ho calcolato il width? 6 icone di 71px con ciascuna 10px di padding-right (6*81=486).
Successivamente ho letto il vostro post dal titolo Il CSS per un menu di navigazione orizzontale sempre centrato al link http://www.html.it/articoli/il-css-p...re-centrato-1/
Ho voluto provare a modificare il css centrando la lista senza usare WIDTH.
Questo è il css ulteriormente modificato:
/* ICONE SOCIAL CENTRATE SENZA WIDTH */
ul#social-list { list-style:none; margin:0; padding:50px 0 0 0; text-align:center; }
#social-list li { display:inline-block; background-repeat:no-repeat; }
#social-list li a { display:inline-block; width:71px; height:71px; padding-right:10px; position:relative; text-decoration:none; }
#social-list li a strong { font-weight:normal; position:absolute; left:20px; top:-1px; color:#fff; padding:3px; z-index:9999;
text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75); background-color:rgba(0, 0, 0, 0.7);
-moz-border-radius:3px; -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); -webkit-border-radius:3px; -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
#social-list li.facebook { background-image:url("../images/icon-facebook.png"); }
#social-list li.googleplus { background-image:url("../images/icon-googleplus.png"); }
#social-list li.linkedin { background-image:url("../images/icon-linkedin.png"); }
#social-list li.pinterest { background-image:url("../images/icon-pinterest.png"); }
#social-list li.twitter { background-image:url("../images/icon-twitter.png"); }
#social-list li.youtube { background-image:url("../images/icon-youtube.png"); }
#social-list:hover li { opacity:0.2; }
#social-list li { -webkit-transition-property: opacity; -webkit-transition-duration: 500ms;
-moz-transition-property: opacity; -moz-transition-duration: 500ms; }
#social-list li a strong { opacity:0;
-webkit-transition-property: opacity, top; -webkit-transition-duration: 300ms;
-moz-transition-property: opacity, top; -moz-transition-duration: 300ms; }
#social-list li:hover { opacity:1; }
#social-list li:hover a strong { opacity:1; top:-10px; }
In linea generale funziona in entrambi i modi ma ci sono un paio di cose che non mi sono chiare e vorrei chiedervi di aiutarmi a capire.
a) Nella prima versione, quella col WIDTH=486, sbaglio o ci sono pixel in più che non fanno centrare perfettamente la pulsantiera? Mi riferisco 30px del primo margin e ai 10px di padding-right dell'ultima icona. No?
b) Nella seconda versione, quella senza WIDTH, noto le seguenti due cose:
b1) Le icone sono più larghe tra di loro rispetto alla lista col WIDTH. Perché?
b2) L'effeto hover mi inizia subito nei bordi sinistro e destro della pagina, come se la pulsantiera fosse larga tutta la pagina? Perché?
Allegato uno screenshot del mio sito ed il codice html delle due pulsantiere.
pulsantiera.jpg
<!-- Social Media Buttons -->
<!-- prima lista -->
<ul class="social-class" id="social-id">
<li class="linkedin"><a href="http://www.linkedin.com/"><strong>Linkedin</strong></a></li>
<li class="twitter"><a href="http://www.twitter.com/"><strong>Twitter</strong></a></li>
<li class="youtube"><a href="http://www.youtube.com/"><strong>YouTube</strong></a></li>
<li class="facebook"><a href="http://www.facebook.com/"><strong>facebook</strong></a></li>
<li class="googleplus"><a href="http://www.google.com/"><strong>Google+</strong></a></li>
<li class="pinterest"><a href="http://www.pinterest.com/"><strong>Pinterest</strong></a></li>
</ul>
<div class="clear"></div>
<!-- seconda lista -->
<ul id="social-list">
<li class="linkedin"><a href="http://www.linkedin.com/"><strong>Linkedin</strong></a></li>
<li class="twitter"><a href="http://www.twitter.com/"><strong>Twitter</strong></a></li>
<li class="youtube"><a href="http://www.youtube.com/"><strong>YouTube</strong></a></li>
<li class="facebook"><a href="http://www.facebook.com/"><strong>facebook</strong></a></li>
<li class="googleplus"><a href="http://www.google.com/"><strong>Google+</strong></a></li>
<li class="pinterest"><a href="http://www.pinterest.com/"><strong>Pinterest</strong></a></li>
</ul>
<!-- /Social Media Buttons - CSS3 -->
Grazie anticipatamente
A presto
Rispondi quotando
