Foros del Web » Creando para Internet » CSS »

Como poner texto debajo de la imagen

Estas en el tema de Como poner texto debajo de la imagen en el foro de CSS en Foros del Web. Buenas, No consigo poner un texto de bajo de cada imagen, son 4 imagenes que estan puestas de forma horizontal, y mi intención es poner ...
  #1 (permalink)  
Antiguo 31/05/2010, 14:16
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Como poner texto debajo de la imagen

Buenas,

No consigo poner un texto de bajo de cada imagen, son 4 imagenes que estan puestas de forma horizontal, y mi intención es poner un texto debajo de cada una de ellas.

Podéis ver el ejemplo en el siguiente enlace

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

He probado agregando etiquetas <p> o <span> pero no he conseguido el objetivo deseado.

Dejo también el código:

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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Fotos en linea</title>
  5. <style type="text/css">
  6. body {
  7.     background:#fff;
  8.     font-family:Verdana, Arial, Helvetica, sans-serif;
  9.     color:black;
  10. }
  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.     float: left;
  23. }
  24. #intro-web ul li{display: inline;width:100px;}
  25.  
  26. #intro-web ul li span{
  27. display:block;
  28. }
  29. </head>
  30.  
  31. <div id="intro-web">
  32.     <ul>
  33.         <li><img title="Business" src="recuadro.png"/>Business</li>
  34.  
  35.         <li><img title="Education" src="recuadro.png"/>Education</li>
  36.         <li><img title="Sport" src="recuadro.png"/>Sport</li>
  37.         <li><img title="Health Care" src="recuadro.png"/>Health Care</li>
  38.     </ul>
  39. </div>
  40. </body>
  41.  
  42. </html>

Podéis echarme una mano?

Muchas gracias de antemano!
  #2 (permalink)  
Antiguo 31/05/2010, 15:08
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title>Fotos en linea</title>
  5. <style type="text/css">
  6. body {
  7.     background:#fff;
  8.     font-family:Verdana, Arial, Helvetica, sans-serif;
  9.     color:black;
  10. }
  11. #intro-web{
  12.     width: 900px;
  13.     height:135px;
  14. }
  15. #intro-web ul{
  16.     padding: 0px;
  17.     margin: 30px 10px;
  18.     list-style: none;
  19.     font-size: 14px;
  20.     font-weight: bold;
  21. }
  22. #intro-web ul li{
  23.     display: inline;
  24.     width:100px;
  25. }
  26. .foto {float: left; text-align: center; }
  27. .foto img {display: block;margin:0 20px;}
  28. .foto:hover {color:red;}
  29. </head>
  30.  
  31. <div id="intro-web">
  32.     <ul>
  33.         <li><div class="foto"><img title="Business" src="recuadro.png"/>Business</div></li>
  34.         <li><div class="foto"><img title="Education" src="recuadro.png"/>Education</div></li>
  35.         <li><div class="foto"><img title="Sport" src="recuadro.png"/>Sport</div></li>
  36.         <li><div class="foto"><img title="Health Care" src="recuadro.png"/>Health Care</div></li>
  37.     </ul>
  38. </div>
  39. </body>
  40.  
  41. </html>

Saludos!

Etiquetas: poner
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:52.