Tema: Como poner texto debajo de la imagen
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 31/05/2010, 14:08
Avatar de neodani
neodani
 
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 17 años, 10 meses
Puntos: 20
Respuesta: Como poner texto debajo de la imagen
Conseguido!

http://fdw.neodani.com/fotos_en_linea/ejemplo2.php

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Fotos en linea</title>
  6. <style type="text/css">
  7. body {
  8.     background:#fff;
  9.     font-family:Verdana, Arial, Helvetica, sans-serif;
  10.     color:black;
  11. }
  12. #intro-web{
  13.     width: 900px;
  14.     height:135px;
  15. }
  16. #intro-web ul{
  17.     padding: 0px;
  18.     margin: 30px 10px;
  19.     list-style: none;
  20.     font-size: 14px;
  21.     font-weight: bold;
  22. }
  23. #intro-web ul li{
  24.     display: inline;
  25.     width:100px;
  26. }
  27. .foto {float: left; text-align: center; }
  28. .foto img {display: block;margin:0 20px;}
  29. .foto:hover {color:red;}
  30. </style>
  31. </head>
  32.  
  33. <body>
  34. <div id="intro-web">
  35.     <ul>
  36.         <li><div class="foto"><img title="Business" src="recuadro.png"/>Business</div></li>
  37.         <li><div class="foto"><img title="Education" src="recuadro.png"/>Education</div></li>
  38.         <li><div class="foto"><img title="Sport" src="recuadro.png"/>Sport</div></li>
  39.         <li><div class="foto"><img title="Health Care" src="recuadro.png"/>Health Care</div></li>
  40.     </ul>
  41. </div>
  42. </body>
  43.  
  44. </html>

Saludos!