Comunidad de diseño web y desarrollo en internet

Pie de pagina responsive igual al nav o barra de navegacion

Citar            
MensajeEscrito el 17 Nov 2016 01:53 am
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 mi ejemplo: http://example01.webcindario.com/

Por alejonetco1

1 de clabLevel



 

chrome
Citar            
MensajeEscrito el 19 Nov 2016 02:06 pm
Hola. 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:

Código :

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

Código :

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

Por badger

5 de clabLevel



 

firefox
Citar            
MensajeEscrito el 24 Nov 2016 09:12 pm
Tiene comportamiento similar tanto el menu superior y el footer, grax por el aporte.

Por alejonetco1

1 de clabLevel



 

chrome

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.