Div de ancho fijo en la misma linea de un div con porcentaje

anolcue · #1 (**permalink**) 04/07/2011, 19:19

Me explico,
tengo una cabecera que esta compuesta por una imagen flotando a la derecha con ancho fijo, seguido de otra imagen que se alarga hasta completar el ancho de cada pantalla, es decir con ancho por porcentaje.

Si:
la imagen con ancho fijo la coloco como una imagen normal en la pagina html, y la flexible la meto dentro de un div como imagen de fondo, me funciona correctamente. Sin embargo como quiero poner otro div encima de estas imagenes como título, me gustaría que ambas imagenes estuvieran dentro de div como imagen de fondo. Y esto es lo que no consigo y no entiendo porqué.

es decir Si:
coloco dos div uno con una imagen de fondo y width fijo, y el otro con también una imagen de fondo, pero con width por porcentaje, para que en una misma linea lo que no completa el ancho de la imagen fijo, lo complete la imagen variable, entonces la imagen con div variable no se muestra. ya me ha pasado en otras ocasiones y desconozco el motivo.

No se puede combinar en una misma linea imagenes de ancho fijo y con porcentaje??

Adjunto el codigo:

#imgCabecera{
float:right;
height:140px;
width:760px;
background:url(images/cabecera.jpg);
background-repeat:no-repeat;
}

#imgProlongada{
float:right;
height:140px;
width: 100%;
background:url(images/prolongacion.jpg);
background-repeat:repeat-x;
}

Gracias de antemano.

anolcue · #2 (**permalink**) 05/07/2011, 05:44

es que no lo he explicado bien?

afrika026 · #3 (**permalink**) 05/07/2011, 07:23

por lo que trate de enteder intenta con esto:

1) Crea un div que tenga un ancho del 100%, dentro de este div van a estar los dos divs en cuestión:
#contenedor_linea{
position: relative;
height: 140px:
width:100%;
}

2) Modifica el div de ancho fijo así:
#imgCabecera{
position: relative;
float:right;
height:140px;
width:760px;
background:url(images/cabecera.jpg);
background-repeat:no-repeat;
}

3) Modifica el div que completa la linea así:
#imgProlongada{
position: relative;
float:left;
height:140px;
width: 100%;
background:url(images/prolongacion.jpg);
background-repeat:repeat-x;
}

Y en el codigo HTML incluilos así;

<div id="contenedor_linea">
<div id="imgCabecera"></div>
<div id="imgProlongada"></div>
</div>

nx00 · #4 (**permalink**) 05/07/2011, 07:40

Si el resultado que buscas es este, revisa el código y adaptalo a tu sitio.

Imagen a 800x600

Imagen a 1024x728

Imagen a 1280x800

Código:

Código PHP:

  <html>

<head>

<style type="text/css">

#imgCabecera{

/*float:right;*/

height:140px;

width:760px; 

background:url(images/cabecera.jpg);

background-repeat:no-repeat;

 
position:relative;

top:-140px;

left:0px;

}

 
#imgProlongada{

/*float:right;*/

height:140px;

width: 100%;

background:url(images/prolongacion.jpg);

background-repeat:repeat-x;

 
position:relative;

top:0px;

left:0px;

}

 
#head {width:100%;}

#head h1 {

margin:0px;

}

</style>

</head>

<body>

<div id="head">    

    <div id="imgProlongada"></div>

    <div id="imgCabecera"><h1>Titulo</h1></div>

    

</div>

</body>

</html>

anolcue · #5 (**permalink**) 05/07/2011, 09:20

uix... a ver:
la solucion de afrika026 de flotar uno a la derecha y el otro a la izquierda tampoco me funciona.
la solucion de nx00, es casi exactamente eso lo que quiero. Ya que la imagen de tamaño fijo tiene que quedar a la esquina derecha del monitor y la prolongación completar el espacio que quede en la izquierda. Por ello si tuviera que trabajar con coordenadas de posición se complicaría el asunto al tener que calcular para cada pantalla donde debe ir la imagen de tamaño fijo.

Lo extraño es que lo que me propone afrika026 (que es lo que tenía hecho) ya que se me olvidó postear el div contenedor_linea, no funcione.
Recuerdo que hace un tiempo tuve un problema parecido con el menu (fijo) y el main(flexible), y simplemente borrandole el comando width al main funcionó. Sin embargo ahora no.

Y también lo que he dicho en el primer post. Si la imagen fija en vez de ponerla como fondo la pongo en el html dentro un div como una imagen normal, entonces si que me funciona correctamente.

afrika026 · #6 (**permalink**) 05/07/2011, 11:52

esta es la manera de hacerlo, ya esta probado:

en el archivo CSS:

#contenedor_linea{
position: relative;
height: 140px;
width:auto;
overflow: hidden;
}

#imgProlongada{
position: relative;
height:140px;
width:100%;
float: right;
margin-left: -740px;
background:url(images/prolongacion.jpg);
background-repeat: repeat-x;
background-position: right;
}

#imgCabecera{
height:140px;
width:740px;
float: right;
position: relative;
background-image: url(images/cabecera.jpg);
background-repeat:no-repeat;
}

en el codigo html:

<div id="contenedor_linea">
<div id="imgCabecera"></div>
<div id="imgProlongada"></div>
</div>

EN el div "contenedor_linea" estan situados los dos divs, uno fijo y el otro que completa la linea.
Espero haberte solucionado el problema.

anolcue · #7 (**permalink**) 07/07/2011, 23:50

Eso era. Muchas gracias.