html - Floated items with vertical alignment -


i don't know why floated images div class="social">...</div> stopped working properly. goal: align images vertically, column.

check design, easier understand: design preview

they on right side of window/browser screen, :hover effect not working.

whats wrong code?

heres jsfiddle

html

<div id="home">          <div id="nav">             <div class="container clearfix">                     <ul id="menu">                         <li><a href="#home">home</a></li>                         <li><a href="#services">serviços</a></li>                         <li><a href="#team">equipa</a></li>                         <a href="#" id="logo" alt="style euclides"><img src="http://styleeuclides.site50.net/img/logo.png" alt="logo style euclides" width="90px" height="40px"></a>                          <li><a href="#space">espaço</a></li>                         <li><a href="#gallery">galeria</a></li>                         <li><a href="#contact">contatos</a></li>                     </ul>             </div>         </div>                  <div class="social">                     <a href="http://www.facebook.com" target="_blank"><img src="http://styleeuclides.site50.net/img/fb.png" alt="facebook"></a>                     <a href="http://www.instagram.com" target="_blank"><img src="http://styleeuclides.site50.net/img/ins.png" alt="instagram"></a>                     <a href="http://www.twitter.com" target="_blank"><img src="http://styleeuclides.site50.net/img/twi.png" alt="twitter"></a>                                   </div></div> 

css

#home .social{ /* social icons */     display: inline-block;     position: fixed;     z-index: 1; }  #home .social a{     float: right;     padding: 1px;     opacity: 0.7;     margin-right: auto;     margin-left: auto; }  #home .social a:hover{     opacity: 1.0; }  #home .social img{     top: 0;       bottom: 0;       left: 0;       right: 0;      margin-top: 2px;     margin-top: 150px; } 

updated fiddle: - added top:150px; , width:40px; social div, , reomved margin-top of images.

#home .social{ /* social icons */ float: right; display: inline-block; position: fixed; z-index: 99; right: 0; width:40px; top:150px; }  #home .social a{ padding: 1px; opacity: 0.7; margin-right: auto; margin-left: auto; }  #home .social a:hover{ opacity: 1.0; }  #home .social img{ } 

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -