Como fazer um rodapé tão responsivo quanto a barra de navegação

Alejonet · 16/11/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/11/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:

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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/11/2016

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

Marketing Doing · 07/12/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...

Como fazer um rodapé tão responsivo quanto a barra de navegação

Alejonet

badger

Alejonet

Marketing Doing

Tópicos similares