1

Este es mi CSS y a continuación pongo la primera parte del HTML. El problema es que al cambiar el ancho de la página se me separan los elementos del banner y el navcontainer. Quería que no sucediera esto, a poder ser manteniendo las medidas relativas para que sea "responsive".

   body{
        background-image: url(img/bg.jpg);
        padding: 0% 20%; 
        background-size: 100%;
    }
    #container{
        display:flex;
        flex-flow: row wrap;
        padding: 0%;
        margin: 0%;
        justify-content: center;
    
    }
    #banner{
        background-image: url(img/banner.jpg);
        background-size: 100%;
        background-repeat: no-repeat;
        flex-basis: 100%;
        height: 11.5em;
        flex: 1 100%;
        padding-top: 0%;
        margin-top: 0%;  
    }
    #banner h1{
        text-align: right;
        margin-top: 0;
        margin-right: 3%;
    }
    #navcontainer{
        background-color: #bc5510;
        padding-top: 0%;
        margin-top: 0px;
        flex: 1 100%;
    }
    #navcontainer ul{display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-right: 15%;
    }
    #navcontainer #navlist{
        list-style:none;
    
    }
    #navlist li a:hover{
        color: lightgoldenrodyellow;
        background-image: url(img/menu_arrow.gif);
        background-repeat: no-repeat;
        background-position: 50% 100%;
        padding-bottom: 15%;
        
        
    }
    #sidebar{
        flex-direction: column;
        flex: 1 40%;
        margin-left: 4%;
        margin-right: 0px;
        padding: 0px;
    }
    #sidebar p, #sidebar form{
        max-width: 40%;
    } 
    #content{
        flex: 2 45%;
        margin-right: 3%;
        margin-left: -25%;
        padding: 0px;
    }
    #container-foot{
         flex: 1 100%;
        margin: 3%;
    }
    #content h2{
        color: chocolate;
    }
    
    blockquote{
        color:#B29B35;
        font-style: oblique;
    }
    #content a, #footer a{
        color:chocolate;
       font-weight:bold;
    }
    ul{
        list-style-type:square;
        color: chocolate;
    }
    a{
        text-decoration: none;
        color: black;
    }
    .readmore{
        background-image: url(img/document.gif);
        background-repeat: no-repeat;
        background-size: 12%;
        padding-left: 3%;
        margin-right: 2%;
    }
    .comments{
        background-image: url(img/comment.gif);
        background-repeat: no-repeat;
        background-size: 12%;
        padding-left: 3%;
        margin-right: 2%;
    }
    .date{
        background-image: url(img/clock.gif);
        background-repeat: no-repeat;
        background-size: 12%;
        padding-left: 3%;
        margin-right: 2%;
    }
    .info{
        color:#B29B35;
        
    }
    .post{
        border: 1px dashed;
        padding: 2%;
    }
    #sidebar,#content{
        padding-top: 3%;
    } 
<div id="container">
  <div id="banner">
    <h1>Company Name</h1>
  </div>
  <div id="navcontainer">
    <ul id="navlist">
      <li><a href="#">HOMEPAGE</a></li>
      <li id="active"><a id="current" href="#">ABOUT</a></li>
      <li><a href="#">GALLERY</a></li>
      <li><a href="#">LINKS</a></li>
      <li><a href="#">SERVICE</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
</div>

1
  • Un principio básico de la programación es no reinventar la rueda si ya existe, hay una gran cantidad de frameworks que realizan esta tarea, bootstrap, iukit, foundation, materializecss...
    – Rene Limon
    Commented el 22 nov. 2016 a las 16:33

3 respuestas 3

3

Podrías usar media queries para tu propósito. Con ellas, puedes determinar cual será la anchura máxima (o altura) mediante la cual cambiará tu CSS.

Como ejemplo de utilización, vamos a pensar que queremos cambiar el color de un texto entre 700px y 500px de anchura de pantalla (para cualquier valor que esté entre esos dos) teniendo un id miTexto.

#miTexto{
   color: red;
}

Y posteriormente dentro de la media query establecerás el nuevo color para ese texto.

@media (max-width:700px) and (min-width:500px) {
    #miTexto{
        color: blue;
    }
}​

Esto lo podrás hacer con cualquier propiedad para ajustar tu CSS a las distintas necesidades que requiera tu página al modificar las medidas de tu navegador.

4
  • Ya, pero mi problema es que he puesto todo con medidas proporcionales y al cambiar el ancho de página lo más mínimo se me desplazan los elementos y me dejan blancos donde no quiero (entre otros problemas). Con las media queries me parece que sería muy complicado meter tantas condiciones (tendría que meter una media querie por cada px que redujera o ampliara la página)
    – Sirc
    Commented el 22 nov. 2016 a las 15:57
  • @Sirc El problema de las medidas proporcionales es ese. Que dependiendo de la pantalla te puede encajar mejor o peor. Sin embargo, siempre puedes usar las media queries para ir "ajustando" los valores dejando un margen para que pantallas muy diferentes entre sí, no den ningún problema. Commented el 22 nov. 2016 a las 16:01
  • 2
    La idea es que termines el trabajo por tu cuenta, darle estilo a toda la página y que quede a tu gusto puede ser un trabajo largo. @Error404 te está mostrando la forma como puedes adaptar tus estilos para que sea responsive.
    – Shaz
    Commented el 22 nov. 2016 a las 16:02
  • 2
    Además de la respuesta que te está dando @Error404 (Que creo que es lo mejor que puedes hacer o realizar), podría darte como otra solución el uso de algún framework como Bootstrap. Bootstrap es un framework fácil de aprender, que está pensado para todo tipo de resoluciones de pantallas haciendolo responsive, y que tiene diversos componentes que agilizan el trabajo al desarrollador, además de estar muy bien documentado y que su comunidad es muy grande. Te dejo el enlace a su página oficial, aquí.
    – Hoose
    Commented el 22 nov. 2016 a las 16:10
0

Te voy a dar algunos consejos que pueden mejorarte tu codigo CSS.

1- Para el banner y el menu, agregale la propiedad position: absolute.
2- No le des a los elementos una altura en unidades em, trata de darlo en px o en %.
3- Si tienes un elemento con posicion absoluta, maneja la propiedad top en lugar de margin-top.

Creo que con esos puntos vas a dar con lo que buscas.

0

Primero, agrega esta etiqueta al final de tu head del html:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Te permite configurar el ancho, alto y la escala para visualizar el contenido.

Segundo, para mejor orden en tu código, puedes crearte otro archivo css para las media querys y lo agregas a tu html siempre después del css muestras.

Lo que tienes que hacer con las media querys es algo como:

"Cuando la pantalla sea de x dimensión, entonces haz el padding menor/mayor"

Por ejemplo:

@media (max-width:700px) and (min-width:500px) {
    body{
      background-image: url(img/bg.jpg); // considera cambiar de fondo si se ve mal
      padding: 0%; // <<< nota que ahora el padding se redujo a 0% 
   }

}

Los elementos que no modifiques quedan igual.

Lo recomendable es que hagas las media query en un tamaño "mediano" y otro "chico", es decir, para tablets y para smarthphones. Aquí te dejo un enlace con más información

Por último, con este ejemplo ya modificas tus estilos de acuerdo a lo que desees, por lo común lo que modificas es el margin y el padding, pero puede ser cualquier propiedad.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.