[SOLUCIONADO] Cabecera adaptable

[mblascog]

Buenas,
He creado una cabecera con un ancho del 100%.
En dicha cabecera, a mano derecha hay una foto con un ancho fijo de 108píxeles
Y a mano izquierda dos filas, en una el logo y en la parte superior el menú.

Así es:


Lo que quiero si voy reduciendo el ancho del navegador, de 1024 a 800, se vaya reduciendo el ancho de las opciones del menu y la foto quede fija y no salte a la parte inferior, como muestro en esta imagen:




Inferior a 800píxeles ya lo controlo con media queries.

El código CSS es el siguiente:

Código CSS:

#capcalera {
    width:100%;
    height:120px;
    background:#FFFCD8;
    float:left;
    padding-left:0%;
    padding-right:0;
    padding-top:1%;
    font-size:.9em;}
#capcalera div#capEsquerra{
    float:left;
    width:89.4%;
    height:100%;}
#capcalera div#capEsquerra a img{
    margin:0;
    float:left;
    margin-bottom:1%;
    margin-left:1%}
#capcalera div#capDreta{
    width:108px;
    overflow:hidden;}
 

Gracias

[mblascog]

Buenas,
Sigo dándole vueltas sin encontrar solución.
Si tengo un div que tiene una anchura de 1024píxeles.
A la derecha una imagen que ocupa 110 píxeles fijos
Y lo que quiero es que se redimensione el contenido a la izquierda de la imagen, ya que la imagen siempre tendrá la anchura de 110 píxeles
No doy en el clavo.
Gracias

[alzacon]

Con ese código es difícil ver es el menú, al menos para mi, si pudieses poner el html y css sólo de la parte implicada mejor.

La solución será el diseño fluido y probablemente usar calc en el el ancho.

[mblascog]

Muchísimas gracias, desconocía la función calc.

[mblascog]

Buenas, cuando he contestado había probado probado calc asignándolo directamente desde el código html, es decir,

Código HTML:

<div style="float:left;width:-moz-calc(100% - 100px);width:-webkit-calc(100% - 100px);width:-o-calc(100% - 100px);width:calc(100% - 100px)">
 

Pero cuando lo he pasado al fichero css, no funciona. Lo miro con las Developer Tools y da error. No entiendo el motivo:



Si sustituyo el width calculado por width:100%, y lo miro en la pestaña Computed da 1024píxeles.
Con los width calculados, con los Invalid Property Value, da 930píxeles, que no entiendo de donde sale, pues no hay paddings, ni margins, ni borders, ....

No es que no quiera poner más código, pero el que afecta a lo que digo es el código CSS que ya he puesto antes.

Gracias

[mblascog]

Buenas,
Sigo con el mismo problema, quizás esté mal planteada la estructura, pero no lo veo.
He colgado el ejemplo en http://www.tepui.cat/foro/index.php
Se supone que la barra del navegador, si es que hace algo el calc, deberá tener una anchura de 916 píxeles (1024-108), y la tiene de 930, por lo que la foto no cabe.
Sé que el 100% del width es 1024 porqué si sustituyo el calc por width=100%, es lo que da.

Muchas gracias

[alzacon]

En el html lo pones distinto que en el css, no se si usas optimizadores para el css pero has quitado los espacios que se necesitan en calc.

[mblascog]

Gracias alzacón,
No, no uso optimizadores, he quitado los espacios. No sabía que fueran significativos.
Otra cosa que he aprendido. De nuevo, muchas gracias

[pzin]

Lo de los espacios es solamente necesario en caso de que los operadores sean + o -, si son multiplicaciones o divisiones no son necesarios, aunque en algunos motores funciona sin espacios.

[mblascog]

Gracias por la aclaración