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
Post a Comment