Footer con imagenes y texto

[Ophan]

Hola,

Estoy maquetando el footer de una pagina web, y no sé bien como hacer lo siguiente (lo he estado buscando en San Google un buen rato y no hay manera):

Quiero poder poner texto e imágenes de la siguiente manera:
[URL="http://fotos.subefotos.com/6d835e6cb16e369a70045204649248d6o.jpg"]Imagen[/URL]

Pero con unas condiciones:
- El texto a ser posible en una o dos lineas centrado verticalmente dentro del footer.
- Las imágenes son links y tienen valor 'hover', es decir, cambia de imagen al pasar el ratón por encima.
- En mi caso he puesto todas las imágenes en un mismo png y me moveré por ellas con background-position.

Sólo me interesa la parte de el texto y las imágenes, ya que el footer (negro) ya lo tengo echo con su div y todo.

Tengo entendido que se puede hacer con una lista de elementos, pero no hay manera...

Muchas gracias y un saludo.

[C2am]

Muestra el html y css para ver que tienes y por qué no funciona.
Saludos

[Ophan]

Hola C2am,

Solo tengo trozos sin sentido del código ya que llevo una hora experimentando con varias cosas que he encontrado en internet, pero nada se ha acercado a lo que buscaba.

El html de las imagenes sería algo así (no sé como pondría el texto por ahí en medio):

Código HTML:

<div class="footer">
	<ul class="imagenes">
		<li class="imagen1">
		        <a title="Imagen 1" href="#">
			<span>Imagen 1</span></a>
		</li>
		<li class="imagen2">
		        <a title="Imagen 2" href="#">
			<span>Imagen 2</span></a>
		</li>
	</ul>
</div> 

Y el CSS iría más o menos por aquí, pero no sé muy bien:

Código:

	.imagenes { 
		position: absolute;
		top: 15px;
		right: 0px;
		display: block;
		overflow: hidden;
	}
	.imagenes li {
		display: block;
		width: 32px;
		height: 32px;
		float: left;
		margin-right: 10px;
		margin-bottom: 10px;
	}
	.imagen1 a {
		display: block;
		width: 32px;
		height: 32px;
		text-indent: -9000px;
                background: url(../images/footer_brands.png);
	}
	.imagen1 a:hover {
		background-position: 0px -32px;
	}

Un saludo

[pzin]

En realidad sólo tienes que poner el texto en un contenedor —por ejemplo p— y, las imágenes al tener un enlace —a— también tendrían su contenedor. Y ambos elementos los flotas.

Código CSS:

.footer>p,
.footer>a {
  float: left;
  width: 25%;
}
 

Código HTML:

<div class="footer">
  <p>texto texto texto</p>
  <a href=""><img src="woha.png"></a>
  <p>dummy text</p>
  <a href=""><img src="dummy.pic"></a>
</div>
 

Según la imagen que pusiste, debe de ser suficiente algo así en principio.