Cómo hacer un pie de página igual de responsivo que la barra de navegación

Alejonet · 16 Nov 2016

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. :ambivalence:

aqui el ejemplo: Menu

badger · 22 Nov 2016

Hola Alex. 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 (aunque no he hecho las media queries):

HTML:

Insertar CODE, HTML o PHP:

<!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:

Insertar CODE, HTML o PHP:

* {           
   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;
}

Alejonet · 27 Nov 2016

Tiene comportamiento similar tanto el menu superior y el footer, grax por el aporte.
:encouragement:

Marketing Doing · 7 Dic 2016

Bueno amigo, para convertir cualquier archivo a responsive es fácil. En lugar de utilizar pixeles (px) utiliza porcentajes (%), estos se adaptan al tamaño de pantalla automaticamente.

Espero te sirva...

Cómo hacer un pie de página igual de responsivo que la barra de navegación

Alejonet

badger

Alejonet

Marketing Doing

Temas similares