1. ¡OFERTA! con cupón "DIRVPS": hosting por $0,01 y también VPS Linux y Windows por $0,01 el primer mes por Interserver ← publi
    Descartar aviso
Descartar aviso
Al usar este sitio web, aceptas que nosotros y nuestros socios podamos establecer cookies para fines tales como personalizar el contenido y la publicidad. Más información.

Pie de pagina responsive igual al nav o barra de navegacion

Tema en 'Programación y Diseño Web' iniciado por ALEX VALENCIA, 17 Nov 2016.

  1. ALEX VALENCIA

    ALEX VALENCIA Nuevo usuario

    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 he logrado solo unos resultados.

    aqui mi ejemplo: http://example01.webcindario.com/
     
  2.  
  3. badger

    badger Usuario activo

    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:

    HTML:
    CODE, HTML o PHP Insertado:
    <!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:
    CODE, HTML o PHP Insertado:
    * {           /* 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;
    }
    
     
  4. ALEX VALENCIA

    ALEX VALENCIA Nuevo usuario

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


Alojamiento web, Hosting Reseller, Servidores Dedicados - All in Hosting


    
    
    
    
Blog · Sitios amigos: GuiaHosting · Unidominios · Interalta ·