Poner imagen en la que escribir dentro de <li> ?

#1 (**permalink**) 15/09/2012, 04:15

Hola, es la primera vez que trabajo en LI, y bueno por el momento tengo unos recuadros grises dentro la web, que son esos donde tiene que ir el contenido:

El caso es que el sitio es una tienda online, y me gustaria abajo poner una imagen, en la que pueda poner el precio de cada producto, la intención es que quede así:

Pero la verdad no se como hacerlo... ni idea es la primera vez que hago algo parecido... ya tengo la imagen para introducirla dentro:

Lo que se me viene a la cabeza mientras hago eso, es que podria hacer un DIV, que aparesca debajo el LI, y dentro el div centrar el texto para escribir.. ?

pero, como hago el css adecuado? no tenigo ni idea como hacer que se quede abajo..

Que tenga un DIV, que se siteue abajo de cada LI, de fondo tenga esa imagen, y el texto que ponga sea centrado de lados y centrado de arriba ?

Ayudita porfa!?

Mil y una de gracias!! más 1 para todos, por ayudar!

noruas · #2 (**permalink**) 15/09/2012, 05:05

Simplemente has de usar la propiedad display block para convertir los "li" en un elemento de bloque, luego le das el alto y ancho necesario. Una vez hecho esto puedes meter imagenes y demas.

Aquí tienes un ejemplo.

Código HTML:

Ver original<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
div {margin:0px auto; width: 400px; padding-top:30px;}
li {
display: block;
width:303px; /*Ancho de la imagen de fondo - los padings laterlaes*/
height: 42px; /*Alto de la imagen de fondo - los padings superiores e inferiores*/
padding: 24px 0px 0px 0px; /* Centra la imagen verticalmente en funcion del tamaño del bloque y del tamaño de la fuente de texto*/
background: url(http://i45.tinypic.com/if3p7r.jpg) no-repeat;
color: #F00;
text-align: center;
font-weight: bold;
list-style:none; /*Asegurate de usar esta opcion para quitar los iconos de lista*/
    }
</style>
</head>
<body>
    <div>
        <ul>
            <li>Precio: 300€</li>
            <li>Precio: 400€</li>
            <li>Precio: 500€</li>
        </ul>
    </div>
</body>
</html>

Espero que te sirva. Saludos.