Foros del Web - Ver Mensaje Individual - Poner imagen en la que escribir dentro de <li> ?

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.