Plantilla de diseño receptivo

I am new to responsive design, I want to make responsive menus, images, blocks and every thing in the website templates.

I ready that all width should be in percentage, I make this example

http://jsfiddle.net/hQBR6/

How can I make the form with it's input respond to different screen size without going below the ul??

preguntado el 09 de marzo de 12 a las 13:03

2 Respuestas

Problem is, that you are mixing margin set in PX and widths set in %. When screen is resized below certain dimensions, there isn't enough space left for elements with margin that big and input falls below.

You should set your margins in % - if you are working on repsonsive design.

Here is how I modified your code to make it work:

ul#menu{
    border:1px solid black;
    display: inline-block;
    float:left;
    max-width:50%;
    margin-left:5%; /* changed to percentage */
    margin-top:36px; /* should be percentage as well*/
    list-style-type:none;
}
ul#menu li{
    display: inline-block;
    float:left;
    margin-right:36px;   /* should be percentage as well*/
    width: auto;
}

#header form {
    display: inline-block;
    margin-right:1%; /* changed to percentage */
    float:right;
    width:10%;
}

#header form input{
    margin-top:28px;
    background-color: #e0e0e0;
    border-radius:4px;
    border:none;
    height: 26px;
    color:#a6a6a6; 
}

note: I played only with left/right margins and real dimensions are up to you.

Espero que esto ayude

respondido 09 mar '12, 15:03

For your quick start please go through below link you will find nice examples to start responsive design.

http://twitter.github.com/bootstrap/

Respondido el 19 de junio de 12 a las 11:06

This is way too broad. Doesn't provide a specific answer to the question. - nombre_usuario_aleatorio

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.