Comunidad de diseño web y desarrollo en internet online

Cuadrar menus <li>

Citar            
MensajeEscrito el 03 Dic 2010 01:29 am
Quiero poner una lista de 3 links <li></li> pero se descuadra la estructura y me queda asi:



el codigo HTML es:

Código PHP :

<div id="social-ul">
<ul id="social"><li><a href="http://www.facebook.com/pages/PixelBit/101958143205266" target="_blank"> <img src="css/images/icofacebook.jpg" width=\"32\" height=\"32\" border=\"0\"/> </a> <a href="http://www.facebook.com/pages/PixelBit/101958143205266" target="_blank"><h4>Facebook</h4></a></li><li><a href="http://twitter.com/twitPixelBit" target="_blank"><img src="css/images/icotwitter.jpg" width=\"32\" height=\"32\" border=\"0\"/></a><a href="http://twitter.com/twitPixelBit" target="_blank"><h4>Twitter</h4></a></li><li><a href="http://www.youtube.com/videoPixelBit" target="_blank"> <img src="css/images/iconewletter.jpg" width=\"32\" height=\"32\" border=\"0\"/> </a> <a href="http://www.youtube.com/videoPixelBit" target="_blank"><h4>Newsletter</h4></a></li></ul>
</div>

el codigo CSS es:

Código C++ :

#social {list-style-image:url(images/divider-social.gif);}
#social li {margin:25px 0px 0 0;border:none;float:left;}
#social li a {padding:0 0 0 0;text-decoration:none;text-align:center;vertical-align:super;}


el resultado tendria que ser asi:

Por miguelsirna

315 de clabLevel



Genero:Masculino  

Hacker & Programmer

firefox
Citar            
MensajeEscrito el 03 Dic 2010 02:20 am
No uses el 'list-style-image', en el selector '#social li' usa la imagen divider-social.gif como background que no se repita, y agrega un padding para que no esté pegado al contenido.

Por drarock

Claber

705 de clabLevel

3 tutoriales

Genero:Femenino  

Lima, Peru

firefox
Citar            
MensajeEscrito el 03 Dic 2010 03:44 am
Bien muchas gracias, asercandome mas al mejor resultado me quedo asi:



El codigo CSS modificado y agregando otros es este:

Código PHP :

#navi {list-style-image:url(images/divider-subnav.gif);margin:0 0 0 0;padding:0 0 0 0;}
#navi li {margin:9px 34px 0 0;border:none; float:left;}
#navi li a {padding:0 0 0 15px;text-decoration:none;text-align:center;font-size:12px;color:#FFFFFF; text-transform:uppercase; font-weight:bold; vertical-align:super;}

Por miguelsirna

315 de clabLevel



Genero:Masculino  

Hacker & Programmer

firefox
Citar            
MensajeEscrito el 03 Dic 2010 03:45 am
Perdon el codigo CSS no era ese es este:

Código PHP :

#social {}
#social li {margin:15px 0px 0 0;border:none; float:left; background-image:url(images/divider-social.gif); background-repeat:no-repeat; width:71px; height:100px; padding:0 0 0 39px;}
#social li a {padding:0 0 0 0;text-decoration:none;text-align:center; vertical-align:super;}

Por miguelsirna

315 de clabLevel



Genero:Masculino  

Hacker & Programmer

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.