Diseño fluido

[sergi_multimedia]

Hola a todo el mundo, estoy diseñando una web por primera vez en unidades relativas.

No intento hacer una web adaptable a los móviles, simplemente que se visualice igual en todos los dispositivos.

Como podéis ver en la web que he puesto debajo, si la veis desde un ordenador veréis que hay 4 bloques de la derecha de la imagen (de color azul y verde). Debajo sobra un espacio en rojo (etiqueta "header"). Pero si visualizáis la web en un iPhone por ejemplo, los 4 bloques ocupan más que la imagen.

Veréis que en el código, he puesto que cada uno de los 4 bloques tengan un porcentaje de altura, sumando los 4 un 100%.

Yo simplemente quiero que se vea el logotipo a la izquierda, y luego el conjunto de los 4 bloques ocupen el mismo largo que el logo, pero sin utilizar pixeles, porqué sino la etiqueta "header" me ocupa más de la mitad de la pantalla del iPhone.

http://sergibeltran.com/jim3/#

Código HTML:

<header>
    <div id="logo"><img src="img/logo.png" alt="logo"></div>
        <h1 id="title">Guardian Pro Cables</h1>
        <h1 id="subtitle">High Quality Instrument Cables</h1>
        <h1 id="slogan">Protect Your Sound</h1>
        <nav>
         <ul>
           <li>Home</li>
           <li>Cables</li>
           <li>About</li>
           <li>Artist</li>
           <li>Contact</li>
          </ul>
      </nav>
</header>
 

Código CSS:

html {
    font-size: 1em;
    font-family: verdana;
}
 
body {
    margin: auto;
    padding: 2.5%;
    max-width: 960px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
 
header {
    width: 100%;
    background-color: red;
    overflow:hidden;
}
 
header #logo {
    float: left;
    width: 19.79%;
}
 
header #logo img {
    width: 100%;
}
 
header h1#title {
    float: left;
    width: 80.40%;
    background-color: blue;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 1em;
    height: 40%;
}
 
header h1#subtitle {
    float: left;
    width: 80.40%;
    background-color: green;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 1em;
    height: 20%;
}
 
header h1#slogan {
    float: left;
    width: 80.40%;
    background-color: blue;
    padding: 0;
    margin: 0;
    text-align: center;
    font-size: 1em;
    height: 20%;
}
 
header ul {
    padding: 0;
    margin: 0;
    float: left;
    width: 80.40%;
    background-color: green;
    list-style-type: none;
    height: 20%;
}
 
header ul li {
    background-color: yellow;
    width: 20%;
    float: left;
    text-align: center;
}
 

Saludos, y gracias de antemano.

[sergi_multimedia]

¿Cómo puedo borrar este post? Algunas de las dudas que tenia las tengo resueltas, si acaso abriré otro nuevo post en cuando lo tenga todo más claro.

¿Se puede borrar el post?

Saludos

[anewryzm]

Si ya tienes las dudas resueltas te hago unas recomendaciones que quizás ayuden en algo.
A las etiquetas "h1" deberías introducirlas en una etiqueta "<hgroup>" por cuestiones de SEO.
Y a los botones en la etiqueta "<nav>" cambia el.

<a href="#" ...> por

<a href="javascript:void(0)" ...>

Para que al dar clic no suba la barra lateral.

Saludos.

[sergi_multimedia]

Iniciado por anewryzm

Si ya tienes las dudas resueltas te hago unas recomendaciones que quizás ayuden en algo.
A las etiquetas "h1" deberías introducirlas en una etiqueta "<hgroup>" por cuestiones de SEO.
Y a los botones en la etiqueta "<nav>" cambia el.

<a href="#" ...> por

<a href="javascript:void(0)" ...>

Para que al dar clic no suba la barra lateral.

Saludos.

Muchas gracias por tus consejos!

[sergi_multimedia]

Hola a todos, retomando el tema, he reconstruido la web de manera fluida.

Todo lo tengo como me gusta, e incluso he añadido @media queries para resoluciones por debajo de 721px.

Pero hay una cosa que se me resiste, que es el header.

En cada uno de los bloques que hay a la derecha me gustaría que la suma de los 4 ocuparan el mismo alto que el logotipo. Entonces que sucede? Pues que cuando voy cambiando el ancho del navegador, la imagen se hace más pequeña, o sea menos alta y los bloques de la derecha como tienen float: left, se me ponen debajo de la imagen.

Yo lo que quiero es que los bloques de la derecha se vayan haciendo también más pequeños a medida que la imagen se hace más pequeña, y que ocupen siempre el 100% de altura de la imagen o del header, no sé si se me entenderá lo que quiero llegar a explicar.


Os dejo el codigo actualizado:

Código HTML:

header {
    width: 100%;
    overflow:hidden;
    margin: 0 0 2.5% 0;
}
 
header #logo {
    float: left;
    width: 19.79%;
}
 
header #logo img {
    width: 100%;
}
 
header h1#title {
    float: left;
    width: 80.21%;
    text-align: center;
    font-size: 230%;
    font-family: 'OldCentury';
    line-height: 1.3em;
    color: #1f3948;
    text-shadow: 1px 1px 2px #e0e0e0;
    font-weight: normal;
    background-color: blue;
    padding: 0;
    margin: 0;
}
 
header h1#subtitle {
    float: left;
    width: 80.21%;
    text-align: center;
    font-size: 160%;
    font-family: 'Karla', sans-serif;
    line-height: 1em;
    background-color: red;
    padding: 0;
    margin: 0;
}
 
header h1#slogan {
    float: left;
    width: 80.21%;
    text-align: center;
    font-size: 160%;
    font-family: 'Karla', sans-serif;
    line-height: 1em;
    background-color: blue;
    padding: 0;
    margin: 0;
}
 
nav ul {
    padding: 0;
    list-style-type: none;
    float: left;
    margin: 0 0.4% 0 0;
    width: 77%;
    background: yellow;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
 
nav ul li {
    display: block;
    text-align: center;
    float: right;
    line-height: 2.2em;
    font-family: 'Coda', cursive;
    font-size: 1.2em;
    margin: 0 0 0 0;
    width: 15%;
}
 
nav li a {
    display: block;
    text-decoration: none;
    color: #2c455b;
    background-color: #f3f3f3;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, .5);
    box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, .5);
    text-shadow: 1px 1px 1px rgba(000,000,000,0.2);
}
 
nav ul li a:hover {
    background-color: #becad5;
    color: #2c455b;
}
 
nav ul li a:active {
    -webkit-box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, .5);
    box-shadow: inset 0px 1px 2px 1px rgba(0, 0, 0, .5);
    background-color: #dedede;
}
 

Código CSS:

<header>
           <div id="logo"><img src="img/logo.png" alt="logo"></div>
            <h1 id="title">GUARDIAN PRO CABLES</h1>
            <h1 id="subtitle">High Quality Instrument Cables</h1>
            <h1 id="slogan">Protect Your Sound</h1>
            <nav>
                <ul>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Artist</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Cables</a></li>
                    <li><a href="#">Home</a></li>
                </ul>
            </nav>
        </header>
 

Un saludo ;)