1.- Con una imagen como tipo de lista, sin fondo ni padding:
Cita: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#foto { border: 1px solid rgb(116, 171, 0);
margin: 0pt 10px 10px 0pt;
padding: 3px;
float: left;
}
#lista { float: left;
margin-left: 16px;
}
.circle li {
}
ul.circle { padding: 0px;
list-style-image: url(images/list.gif);
margin: 0px;
}
</style>
</head>
<body>
<div id="foto"><img src="images/foto.jpg"></div>
<div id="lista">
<ul class="circle">
<li>Dirección: C. San Román</li>
<li>Teléfono: 915 555 555 </li>
</ul>
</div>
</body>
</html>
2.- Con una imagen como fondo de los elementos de lista, y sin tipo de lista:
Cita: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#foto { border: 1px solid rgb(116, 171, 0);
margin: 0pt 10px 10px 0pt;
padding: 3px;
float: left;
}
#lista { float: left;
margin-left: 0px;
}
.circle li { background: transparent url(images/list.gif) no-repeat scroll left top;
padding-left: 13px;
}
ul.circle { padding: 0pt;
margin: 0px;
list-style-type: none;
}
</style>
</head>
<body>
<div id="foto"><img src="images/foto.jpg"></div>
<div id="lista">
<ul class="circle">
<li>Dirección: C. San
Román</li>
<li>Teléfono: 915 555 555 </li>
</ul>
</div>
</body>
</html>
Cualquiera de las dos maneras funciona bien, para lo que como verás, lo mejor es incluir otra caja que albergue la lista, de manera que la puedas colocar donde quieras. Si no hay imagen, la caja de la lista se pega a la izquierda.
Pruébalo y nos cuentas.
Mikel.