Foros del Web » Creando para Internet » CSS »

[SOLUCIONADO] Cabecera adaptable

Estas en el tema de Cabecera adaptable en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 30/05/2014, 06:23
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Cabecera adaptable

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:
Ver original
  1. #capcalera {
  2.     width:100%;
  3.     height:120px;
  4.     background:#FFFCD8;
  5.     float:left;
  6.     padding-left:0%;
  7.     padding-right:0;
  8.     padding-top:1%;
  9.     font-size:.9em;}
  10. #capcalera div#capEsquerra{
  11.     float:left;
  12.     width:89.4%;
  13.     height:100%;}
  14. #capcalera div#capEsquerra a img{
  15.     margin:0;
  16.     float:left;
  17.     margin-bottom:1%;
  18.     margin-left:1%}
  19. #capcalera div#capDreta{
  20.     width:108px;
  21.     overflow:hidden;}


Gracias
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #2 (permalink)  
Antiguo 30/05/2014, 11:21
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Respuesta: Cabecera adaptable

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
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #3 (permalink)  
Antiguo 30/05/2014, 12:20
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 10 años, 11 meses
Puntos: 31
Respuesta: Cabecera adaptable

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.
  #4 (permalink)  
Antiguo 30/05/2014, 13:06
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Respuesta: Cabecera adaptable

Muchísimas gracias, desconocía la función calc.
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #5 (permalink)  
Antiguo 30/05/2014, 13:38
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Respuesta: Cabecera adaptable

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

Código HTML:
Ver original
  1. <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
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Última edición por mblascog; 30/05/2014 a las 14:49
  #6 (permalink)  
Antiguo 31/05/2014, 01:53
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Respuesta: Cabecera adaptable

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
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #7 (permalink)  
Antiguo 31/05/2014, 11:46
 
Fecha de Ingreso: mayo-2013
Mensajes: 207
Antigüedad: 10 años, 11 meses
Puntos: 31
Respuesta: Cabecera adaptable

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.
  #8 (permalink)  
Antiguo 31/05/2014, 12:10
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Respuesta: Cabecera adaptable

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
__________________
Qué fácil cuando lo sabes y qué difícil cuando no
  #9 (permalink)  
Antiguo 31/05/2014, 13:07
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 8 meses
Puntos: 2114
Respuesta: Cabecera adaptable

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.
  #10 (permalink)  
Antiguo 01/06/2014, 00:36
 
Fecha de Ingreso: enero-2002
Ubicación: Sabadell
Mensajes: 565
Antigüedad: 22 años, 3 meses
Puntos: 4
Respuesta: Cabecera adaptable

Gracias por la aclaración
__________________
Qué fácil cuando lo sabes y qué difícil cuando no

Etiquetas: adaptable, ancho, background, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:58.