Como poner texto debajo de la imagen

neodani · #1 (**permalink**) 31/05/2010, 13:16

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<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fotos en linea</title>
<style type="text/css">
body {
    background:#fff;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:black;
}
 
#intro-web{
    width: 900px;
    height:135px;
}
#intro-web ul{
    padding: 0px;
    margin: 30px 10px;
    list-style: none;
    font-size: 14px;
    font-weight: bold;
    float: left;
}
#intro-web ul li{display: inline;width:100px;}
 
#intro-web ul li span{
display:block;
}
</style>
</head>
 
<body>
<div id="intro-web">
    <ul>
        <li><img title="Business" src="recuadro.png"/>Business</li>
 
        <li><img title="Education" src="recuadro.png"/>Education</li>
        <li><img title="Sport" src="recuadro.png"/>Sport</li>
        <li><img title="Health Care" src="recuadro.png"/>Health Care</li>
    </ul>
</div>
</body>
 
</html>

Podéis echarme una mano?

Muchas gracias de antemano!

neodani · #2 (**permalink**) 31/05/2010, 14:08

Conseguido!

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

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Fotos en linea</title>
<style type="text/css">
body {
    background:#fff;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    color:black;
}
#intro-web{
    width: 900px;
    height:135px;
}
#intro-web ul{
    padding: 0px;
    margin: 30px 10px;
    list-style: none;
    font-size: 14px;
    font-weight: bold;
}
#intro-web ul li{
    display: inline;
    width:100px;
}
.foto {float: left; text-align: center; }
.foto img {display: block;margin:0 20px;}
.foto:hover {color:red;}
</style>
</head>
 
<body>
<div id="intro-web">
    <ul>
        <li><div class="foto"><img title="Business" src="recuadro.png"/>Business</div></li>
        <li><div class="foto"><img title="Education" src="recuadro.png"/>Education</div></li>
        <li><div class="foto"><img title="Sport" src="recuadro.png"/>Sport</div></li>
        <li><div class="foto"><img title="Health Care" src="recuadro.png"/>Health Care</div></li>
    </ul>
</div>
</body>
 
</html>

Saludos!