Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de Div de ancho fijo en la misma linea de un div con porcentaje en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 04/07/2011, 19:19
 
Fecha de Ingreso: octubre-2006
Mensajes: 21
Antigüedad: 10 años, 9 meses
Puntos: 0
Div de ancho fijo en la misma linea de un div con porcentaje

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.
  #2 (permalink)  
Antiguo 05/07/2011, 05:44
 
Fecha de Ingreso: octubre-2006
Mensajes: 21
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div de ancho fijo en la misma linea de un div con porcentaje

es que no lo he explicado bien?
  #3 (permalink)  
Antiguo 05/07/2011, 07:23
Avatar de afrika026  
Fecha de Ingreso: junio-2011
Mensajes: 84
Antigüedad: 6 años, 1 mes
Puntos: 19
Respuesta: Div de ancho fijo en la misma linea de un div con porcentaje

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>
  #4 (permalink)  
Antiguo 05/07/2011, 07:40
 
Fecha de Ingreso: agosto-2007
Mensajes: 345
Antigüedad: 9 años, 11 meses
Puntos: 21
Respuesta: Div de ancho fijo en la misma linea de un div con porcentaje

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;
width100%;
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
__________________
----
http://www.mascodigo.com
  #5 (permalink)  
Antiguo 05/07/2011, 09:20
 
Fecha de Ingreso: octubre-2006
Mensajes: 21
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div de ancho fijo en la misma linea de un div con porcentaje

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.
  #6 (permalink)  
Antiguo 05/07/2011, 11:52
Avatar de afrika026  
Fecha de Ingreso: junio-2011
Mensajes: 84
Antigüedad: 6 años, 1 mes
Puntos: 19
Respuesta: Div de ancho fijo en la misma linea de un div con porcentaje

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.
  #7 (permalink)  
Antiguo 07/07/2011, 23:50
 
Fecha de Ingreso: octubre-2006
Mensajes: 21
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Div de ancho fijo en la misma linea de un div con porcentaje

Eso era. Muchas gracias.

Etiquetas: ancho, fijo, linea, porcentaje
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 02:39.