HTML - Alguien sabe como hacer un menu para redes sociales que quede siempre en el fondo de la pagina?

 
Vista:
sin imagen de perfil

Alguien sabe como hacer un menu para redes sociales que quede siempre en el fondo de la pagina?

Publicado por Samuel (10 intervenciones) el 21/07/2016 00:34:44
Buenas gente, he tratado de hacer un menu de redes en el fondo de la pagina pero no importa q tutorial veas o queda justo en el medio de la pantalla o en la parte de arriba alguien sabe como ayudarme?



HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html>
<head>
<title>titulo</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<link href='header/favicon.ico' rel='icon' type='image/x-icon'/>
		<link rel="stylesheet" type="text/css" href="style/index_style.css" />
</head>
	<header>
	<a href="index.html"><div class="banner"><img src="imagen/banner.jpg"></div>
	</header>
<div id="home">
	<a href="#"><img class="foto1" src="imagen/foto.jpg" alt="imagen 1">
	<a href="#"><img class="foto2" src="imagen/foto2.jpg" alt="imagen 2">
	<a href="#"><img class="foto3" src="imagen/foto3.jpg" alt="imagen 3">
	<a href="#"><img class="foto4" src="imagen/foto4.jpg" alt="imagen 4">
</div>
</body>
</html>


y CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
body{
background-color: #94e6f2;
background-size:100% 100%;
background-attachment:fixed;
}
 
.banner{
margin-top: 50px;
height: 280px;
width: 932px;
display:block;
margin-left:auto;
margin-right:auto;
background-image: url(../imagen/banner.jpg);
}
 
.foto1{
position:absolute;
top: 450px;
left: 485.2px;
width: 218px;
height: 550px;
border-radius: 20px;
}
 
.foto2{
position:absolute;
top: 450px;
left: 723.2px;
width: 218px;
height: 550px;
border-radius: 20px;
}
 
.foto3{
position:absolute;
top: 450px;
left: 961.2px;
width: 218px;
height: 550px;
border-radius: 20px;
}
 
.foto4{
position:absolute;
top: 450px;
left: 1199.2px;
width: 218px;
height: 550px;
border-radius: 20px;
}
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 1.144
Oro
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Alguien sabe como hacer un menu para redes sociales que quede siempre en el fondo de la pagina?

Publicado por xve (1543 intervenciones) el 21/07/2016 10:40:53
Hola Samuel, no me queda claro que quieres hacer... quieres poner un menú de fondo?? pero si esta de fondo, no se podra pulsar, ya que habrán capas encima, no?

Si nos puedes comentar con mas detalle?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Alguien sabe como hacer un menu para redes sociales que quede siempre en el fondo de la pagina?

Publicado por Samuel (10 intervenciones) el 21/07/2016 14:14:46
osea poner un menu justo en la base de la pagina, como si el footer
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Alguien sabe como hacer un menu para redes sociales que quede siempre en el fondo de la pagina?

Publicado por lorena elideth (5 intervenciones) el 25/07/2016 19:34:08
Hola!
Tal vez esto pueda ayudarte

Todo lo que necesitamos es un div con una lista dentro y en cada elemento li una etiqueta a con una clase.

1
2
3
4
5
6
7
8
9
<div class="social">
	<ul>
		<li><a href="http://www.facebook.com/falconmasters" target="_blank" class="icon-facebook"></a></li>
		<li><a href="http://www.twitter.com/falconmasters" target="_blank" class="icon-twitter"></a></li>
		<li><a href="http://www.googleplus.com/falconmasters" target="_blank" class="icon-googleplus"></a></li>
		<li><a href="http://www.pinterest.com/falconmasters" target="_blank" class="icon-pinterest"></a></li>
		<li><a href="mailto:contacto@falconmasters.com" class="icon-mail"></a></li>
	</ul>
</div>

Pasemos con el código CSS:

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.social {
	position: fixed; /* Hacemos que la posición en pantalla sea fija para que siempre se muestre en pantalla*/
	left: 0; /* Establecemos la barra en la izquierda */
	top: 200px; /* Bajamos la barra 200px de arriba a abajo */
	z-index: 2000; /* Utilizamos la propiedad z-index para que no se superponga algún otro elemento como sliders, galerías, etc */
}
 
.social ul {
	list-style: none;
}
 
.social ul li a {
	display: inline-block;
	color:#fff;
	background: #000;
	padding: 10px 15px;
	text-decoration: none;
	-webkit-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease; /* Establecemos una transición a todas las propiedades */
}
 
.social ul li .icon-facebook {background:#3b5998;} /* Establecemos los colores de cada red social, aprovechando su class */
.social ul li .icon-twitter {background: #00abf0;}
.social ul li .icon-googleplus {background: #d95232;}
.social ul li .icon-pinterest {background: #ae181f;}
.social ul li .icon-mail {background: #666666;}
 
.social ul li a:hover {
	background: #000; /* Cambiamos el fondo cuando el usuario pase el mouse */
	padding: 10px 30px; /* Hacemos mas grande el espacio cuando el usuario pase el mouse */
}



http://www.falconmasters.com/tutoriales/barra-social-vertical-html-y-css3/
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Alguien sabe como hacer un menu para redes sociales que quede siempre en el fondo de la pagina?

Publicado por Samuel (10 intervenciones) el 26/07/2016 00:43:20
MEJOR AYUDA IMPOSIBLE GRACIAS
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar