Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » HTML » Pie de pagina responsive igual al nav o barra de navegacion

HTML - Pie de pagina responsive igual al nav o barra de navegacion

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil

Pie de pagina responsive igual al nav o barra de navegacion

Publicado por ALEX VALENCIA (3 intervenciones) el 17/11/2016 02:37:58
Trabajo en un proyecto y tengo dificultades al lograr que se comporte el footer igual que el nav o tamaño del menu navegacion , sobre todo al ensayar tamaños en la herramientas para desarrolladores desde chrome , queda de lado a lado pero como haria en el code para darle el mismo tamaño-comportamiento al pie de pagina logre solo unos resultados.

aqui el ejemplo: http://example01.webcindario.com/
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 Alejandro
Val: 247
Bronce
Ha mantenido su posición en HTML (en relación al último mes)
Gráfica de HTML

Pie de pagina responsive igual al nav o barra de navegacion

Publicado por Alejandro (100 intervenciones) el 26/11/2016 18:21:15
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
A tu footer agregale:
1
2
3
max-width:1100px;
left:50%;
transform:translate(550px);
Lo que haces es poner el Footer a partir de la mitad de la pantalla 50% luego lo transladas la mitad de su tamaño 1100/2=550, con eso lo centras.

Luego a tu .pie_r agregas
1
2
Left: 0px;
transform:translate(0px);
con eso anulas los estilos anteriores.

Comentanos y suerte.
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
Imágen de perfil de badger

Pie de pagina responsive igual al nav o barra de navegacion

Publicado por badger (7 intervenciones) el 27/11/2016 10:51:41
Te paso el código de la forma que lo haría yo, con mucho menos código, separando presentación de contenido y responsive:

HTML:
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
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<link rel="stylesheet" href="screen.css" media="screen,projection,tv">
<title>
  Ayuda ALEX VALENCIA
</title>
</head><body>
 
<div class="wrapper">
<ul id="menu">
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
  <li><a href="#">Elemento</a></li>
</ul>
<!-- .wrapper--></div>
 
<div id="content">
<p>Lipsum paragraph.</p>
<!-- #content --></div>
 
<div class="wrapper"><div id="footer">
  Pie
<!-- .wrapper, #footer --></div></div>
 
</body></html>

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
* {           /* Basic reset */
   margin:0;
   padding:0;
}
 
body {
   margin-top:0.5em;
}
 
#menu {

   background:#023859;

   text-align:center;
}
 
#menu ul {

   list-style:none;
}
 
#menu li {

   display:inline;
   vertical-align:bottom;
}
 
#menu a {

   color:#fff;

   text-transform:uppercase;
   display:inline-block;
   padding:1em 0.5em;
}
 
.wrapper {
   margin:0 auto;
   max-width:50em;
}
 
#footer {

   color:#fff;

   background:#023859;

   text-align:center;
   padding:1em;
}
 
#content {

   padding:1.5em 0;
}
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