Como poner iconos flotantes de redes sociales en nuestra web con html y css

Como poner iconos flotantes de redes sociales en nuestra web con html y css

Print Friendly, PDF & Email
Valora esta entrada

Poner los iconos de redes sociales en una página web con html y css es fácil si se domina el concepto del posicionamiento fijo.

Sin embargo tarde o temprano todos terminamos haciendo esta búsqueda en google para ahorrarnos tiempo.

Hay varios conceptos que debes dominar para hacer correctamente el ejercicio que se presenta en esta publicación.

  • Posicionamiento fijo de cajas.
  • Posicionamiento relativo y absoluto de cajas.
  • Diferencia en el posicionamiento de cajas con y sin floats.
  • Centrado vertical de cajas.

En esta entrada te puedes documentar sobre todos los puntos anteriores.

Pasemos al planteamiento y resolución del ejercicio.

Enunciado

Haz un documento web con suficiente texto como para que se pueda hacer scroll en tu navegador web.

Centrado verticalmente coloca un contenedor con las imágenes de las redes sociales facebook, youtube, linkedin e instagram.

Por ejemplo puedes encontrar estas imágenes en iconfinder.com

redes sociales en lateral de página web
enunciado ejercicio iconos flotantes con css y html

Solución del ejercicio

El error típico cuando resuelves este ejercicio es dar posicionamiento fixed a las imágenes. Por este motivo es probable que se te hayan superpuesto todas las imágenes unas encima de otras.

En su lugar la solución correcta pasa por poner todas las imágenes dentro de un contenedor y darle a este el position:fixed;

Como consideración importante las imágenes que se han utilizado son de dimensiones 48px de ancho por 48px de alto. (También puedes forzarlo con css).

Veamos el código solución.

Código html

<div class="container">
		<!-- (p>lorem)*20 (código a usar si tienes instalada la extensión emmet)-->
	</div>

	<div class="social">
		<a href="#"><img src="img/facebook.png" alt="facebook"></a>
		<a href="#"><img src="img/youtube.png" alt="youtube"></a>
		<a href="#"><img src="img/linkedin.png" alt="linkedin"></a>
		<a href="#"><img src="img/instagram.png" alt="instagram"></a>
	</div>

Código css

*{box-sizing:border-box;}

		.container{
			width:95%;
			max-width:900px;
			padding:32px 64px;
			margin:auto;
		}

		.social{
			/*las imágenes usadas tienen width de 48px*/
			width:48px;
			position:fixed;
			top:50px;
			right:0;
		}

		/* Extra centrado vertical*/

		.social{
			/*border:1px solid #000;*/
			top:50%;
			height:205px;
			/*para poner height 192 deberíamos haber indicado en el reset de estilos font-size:0;*/
			margin-top:-100px;
		}

Si juntamos todas las piezas resolvemos el ejercicio.

¡Hola!

Querido lector,

Posicionar imágenes flotantes en un proyecto web no es complicado. Sólo hay que entender el posicionamiento fijo.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.