Tema: Flotar imagenes con overflow:scroll
Ver Mensaje Individual
  #3 (permalink)  
Antiguo 22/08/2009, 15:48
kseso?
Colaborador
  
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 17 años, 5 meses
Puntos: 539
Respuesta: Flotar imagenes con overflow:scroll
Mira a ver si este "divertimento te ayuda:

Código html: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <head>
  4. <title>Kseso? jugando con css </title>
  5. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  6. <style type="text/css">
  7. * { margin: 0px;
  8. padding: 0px; outline: 0;
  9. }
  10. body {
  11.     background-color: #ebeef2;
  12.     margin:20px;
  13. }
  14.  
  15. h3 {
  16.     color:#838c98;
  17. }
  18.  
  19. a {
  20.     text-decoration: none;
  21. }
  22.  
  23.  
  24. #principal {
  25.     height:180px;
  26.     margin:0 auto;
  27.     overflow: auto;
  28.     position:relative;
  29.     width:500px;
  30. }
  31. .galeria {width: 1450px;}
  32.  
  33. #principal ul {
  34.     
  35. }
  36.  
  37. #principal ul li {
  38.     list-style-type: none;
  39.     float:left;
  40.     margin: 5px;
  41.     padding: 5px;
  42.     background: #cdcdcd;
  43. }
  44. #principal ul li img {
  45.     border:1px solid #EEE;
  46.   float:left;
  47.   margin-right:5px;
  48. }
  49. </style>
  50. </head>
  51. <body>
  52. <div id="principal">
  53.     <div class="galeria">
  54.     <ul>
  55.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/2.jpg" alt=""/></a></li>
  56.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/3.jpg" alt=""/></a></li>
  57.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/4.jpg" alt=""/></a></li>
  58.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/2.jpg" alt=""/></a></li>
  59.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/3.jpg" alt=""/></a></li>
  60.         <li><a href="#"><img src="http://www.desarrolloweb.com/articulos/ejemplos/css/listas/img/4.jpg" alt=""/></a></li>
  61.     </ul>
  62.     </div>
  63. </div>
  64. </body>
  65. </html>

Un saludo

Edito:
cachis, por 1 minuto
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
Última edición por kseso?; 22/08/2009 a las 15:55