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
Como poner iconos flotantes de redes sociales en nuestra web con html y css
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!

Entradas relacionadas:

Ejercicio nivel básico sobre selectores CSS
- 42
Ejercicio básico nivel principiante para practicar el uso de selectores CSS. Apuntos de alumno del curso web IFCD0110. Incluye solución.
Box Sizing, como modificar el modelo de cajas convencional
- 321
¿Se rompen las columnas de tu web al redimensionar el ancho de tu navegador? En esta publicación hablamos de box-sizing con un ejemplo real.
Dimensiones reales de una caja en CSS
- 247
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
Elementos en línea. Elementos bloque. Elementos inline-block.
- 599
Hemos aprendido como se define el margen, el borde, el relleno y el ancho y la altura. Nos queda pendiente ver como se relacionan estas cajas html entre ellas. Si se apilan. Si se ponen una al lado de...
Ejemplo de menú vertical con submenú horizontal mediante CSS
- 421
Código html y css de como crear un menú vertical con un submenú horizontal.
Ejemplo de creación de menú horizontal en CSS: inline-block y float
- 465
Ejemplo dónde se plantean dos estrategias distintas para dar estilos a un en menú horizontal. La primera con inline-block. La segunda con float.
Mi chuleta de instrucciones CSS para dar formato al texto
- 74
Existen muchas instrucciones para dar formato al texto. Es difícil recordarlas todas. Se resumen principales instrucciones css para dar formato a letras, palabras y párrafos.
Factores que afectan al tiempo de carga de una página web
- 404
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
Posicionamiento flotante de cajas. float: left | right | both; y propiedad clear
- 364
Apuntes de alumno y ejemplos de como usar la propiedad float y clear. Esta publicación forma parte del "tutorial css - apuntes de clase"
Sintaxis CSS básica. Cómo se escribe el CSS.
- 309
Escribir CSS es fácil. Es un lenguaje que no tiene sorpresas. En esta entrada se explica como se escribe una instrucción CSS.
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.