Tener 3 divs en una linea

[Reza]

Hola, estoy desarrollando una página web y tengo un problema. Supongamos que mi banner es así:



Pero con medidas de 1024 x 600 ( la pág web no es muy larga )

Pero tengo amigos que tienen pantallas de 22 pulgadas widescreen y me dicen que ven el fondo blanco, etc, etc. Más o menos así (suponiendo que lo rojo es lo blanco) :


Entonces lo que me gustaría hacer es:

Tener una capa con la propiedad width:auto.
Dentro de esa capa tener 3 capas en linea.
De esas 3 capas quiero que la que está a la izquierda se quede siempre fija al borde izquiedo; que la de la derecha quede siempre a la derecha y que la del centro pueda extenderse hacia los dos lados, así:


Para que de esta forma los que tengan pantallas de 17 o mas chicas lo vean "normal", algo como ésto:


Y los que tengan pantallas más grandes vean algo así:


Hasta ahora sólo he logrado que el de la derecha quede siempre a la derecha y el de la izquierda siempre quede a la izquierda. Pero no se como hacer que el del centro se extienda. Ësto solo lo he logrado con IE7, pero no con Firefox.

De antemano, le agradezco a todos los que por lo menos se tomaron el tiempo de leer mi post. Saludos.

[Snd234]

Por lo que veo, solo necesitas hacer esto:

Código PHP:

  <div id="contenedor">
    <div id="img_izq"></div>
    <div id="img_der"></div>
</div> 
   

img_izq contendra la primera imagen, el que va hacia la izquierda.
img_der contendra la segunda imagen, la que va hacia la derecha.

Entonces a esas dos capas le aplicas el siguiente estilo.

Código PHP:

  #img_izq {
background-image: url(ruta_imagen/imagen.jpg);
background-repeat: no-repeat;
float: left;
height: 96px;
width: 120px;
}

#img_der {
background-image: url(ruta_imagen/imagen.jpg);
background-repeat: no-repeat;
float: right;
height: 96px;
width: 120px;
} 
   

A esas 2 id's cámbiales el valor del atributo height; y width; con el valor correspondiente al tamaño de la imagen.

Luego, esas 2 capas, irán dentro de una capa contenedora, la cual tendrá el siguiente estilo:

Código PHP:

   #contenedor {
    background-image: url(ruta_imagen/imagen.jpg);
    background-repeat: repeat-x;
    width: 100%;
    height: 96px;
    clear: both;
} 
   

De esta forma, tu contenedor ocupara todo el ancho de tu pantalla con un fondo que se repite y coinciden con las imágenes que tendrá en los extremos.

[Reza]

Muy ingeniosa tu propuesta, pero a final de cuentas obtengo el mismo resultado, pero eso sí .. con una mejora.

El problema ahora es que cuando el usuario hace más pequeña la ventana del navegador, la capa flotante de la derecha se pasa abajo de la capa flotante de la izquierda, pero del lado derecho y se va jalando hacia la izquierda mientras más se vaya haciendo pequeña la ventana. ¿Cómo puedo solucionar eso?

Te agradezco mucho la ayuda, y si no fuera mucha molestia, podrías explicarme para qué sirve el clear:both?

[Reza]

Hola, pues hoy le hice un cambio y creo que es bueno, pero no consigo lo que deseo. Como la capa flotante de la derecha siempre se pasaba abajo a la derecha, le quité la propiedad float:left y le puse margin: auto 0 auto auto y con eso ya no se pasa para abajo, el único problema es que si hago más pequeña la ventana, esa parte de la derecha se va ocultando detrás del elemento flotante de la izquierda .. pero por lo menos ya es en la misma línea.

¿Alguna idea?

Saludos

[Snd234]

Hola, bueno sobre clear both, sirve para: especificar si algún elemento puede tener otros elementos flotantes a los lados.

En realidad no sirve de mucho en ese ejemplo, ya que me equivoque xD. Si no especificas el alto de la capa contenedora tendrías que poner overflow: auto;

Pero como lo especificas, entonces se mostrara la imagen de fondo de todas maneras.

Mira, una posible solución seria ponerle a la capa contenedora este atributo: min-width: 500px; de esta forma, cuando la pagina se valla haciendo mas pequeña llegara un momento en que no se seguirá achicando, ya que su limite mas pequeño es de 500px. El problema es que solo funciona en los navegadores actuales, o en IE6.

[Reza]

Wow, que bueno que tengas estos conocimientos. Muchas gracias! quedó listo .

Solamente tengo unas dudas (tontas) xD.

¿Por qué dices que te equivocaste? Si se supone que clear:both es para que haya elementos flotantes a los dos lados y eso era lo que queríamos no?

y, ¿para qué es lo de overflow:auto?

Iniciado por Snd234

En realidad no sirve de mucho en ese ejemplo, ya que me equivoque xD. Si no especificas el alto de la capa contenedora tendrías que poner overflow: auto;

Pero como lo especificas, entonces se mostrara la imagen de fondo de todas maneras.

El problema es que solo funciona en los navegadores actuales, o en IE6.

En cuanto a lo de que solo sirve en los navegadores actuales, con eso me conformo. Aunque ya lo dijiste no quiero dudas .. funciona en el IE6 verdad? xD

Saludos

[Snd234]

Iniciado por Reza

¿Por qué dices que te equivocaste? Si se supone que clear:both es para que haya elementos flotantes a los dos lados y eso era lo que queríamos no?

Es que el clear: both lo use dentro del contenedor, entonces serviria para que elementos flotantes que esten fuera de este, y no dentro.

Iniciado por Reza

y, ¿para qué es lo de overflow:auto?

Si en la capa contenedora no se especificara el alto, y esta contiene elementos flotantes, no se veria. Solo se verian las capas flotantes pero no el contenedor, es como si no tubiera nada, entonces no mostraria el fondo. Con overflow: auto; permita acomodar automaticamente el alto del contenedor correspondiente al elemento mas grande que tenga dentro, de esta forma se mostrara del tamaño adecuado. Aunque seria inecesario si la capa contenedora ya tubiera un tamaño especifico.

Iniciado por Reza

En cuanto a lo de que solo sirve en los navegadores actuales, con eso me conformo. Aunque ya lo dijiste no quiero dudas .. funciona en el IE6 verdad? xD

min-width; no.
Lo e probado en IE7, Firefox, Opera y funciona perfecto.

[Reza]

Mmmm, si no funciona en el IE6 entonces no me sirve, ya que es una página para la escuela y las computadoras de la escuela tienen IE6. No hay otra solución?

Gracias de antemano.

[dblanco]

y no sería mucho más sencillo con una simple tabla al 100% de ancho con 3 td el primero y ultimos de tamaño fijo y el del centro variable repitiendo la imagen en el plano X?

claro, no es tan bonito y limpio como CSS, pero te funcionará.

saludos

[Reza]

También he pensado en eso, pero me gustaría más aprender a hacerlo en CSS, ya que como muchos saben y tu lo dices, es más limpio, ordenado y estructurado.

Hacerlo en una tabla no me gustaría pero creo que sí, lo tomaría como última opción. Sin embargo lo que realmente quiero es aprender a hacerlo en CSS, y estoy seguro de que se puede, pero no sé cómo.

De cualquier forma, muchas gracias por el dato. Saludos

[dblanco]

también se me ocurre, sin tabla, que crees un div al 100% de ancho y pones de fondo la imagen del centro (la que se repite), luego pones las imágenes de la izquierda y derecha flotantes encima del background.

Esta solución también es un poco "guerrillera", pero es que estoy acostumbrado a buscar soluciones inmediatas las hojas de estilo, ya son bastante porculeras, con eso de hacerlas compatibles con todos los navegadores y no me puedo permitir el lujo de atascarme con ellas.

Saludos

[Reza]

Iniciado por dblanco

también se me ocurre, sin tabla, que crees un div al 100% de ancho y pones de fondo la imagen del centro (la que se repite), luego pones las imágenes de la izquierda y derecha flotantes encima del background.

Esta solución también es un poco "guerrillera", pero es que estoy acostumbrado a buscar soluciones inmediatas las hojas de estilo, ya son bastante porculeras, con eso de hacerlas compatibles con todos los navegadores y no me puedo permitir el lujo de atascarme con ellas.

Sí, gracias, esa respuesta ya me la dio Snd234 y hasta ahora es como tengo todo puesto, el problema es que si hago la ventana del navegador más chica la capa de la derecha flotante se pasa para abajo. Para evitar esto lo que hice fue quitarle la propiedad flotante a este elemento y ponerle margin:auto 0 auto auto, de esta forma el elemento ya no es flotante y ya no se pasa a la parte de abajo cuando se hace más pequeña la ventana, pero el problema es que ahora se oculta detrás de la capa flotante de la izquierda.

Hay alguna otra forma de que el elemento de la derecha sea flotante pero que no se pase a la parte de abajo si se hace más pequeña la ventana del navegador?

Saludos

[Snd234]

Viendo otra posible solucion, me surge la pregunta... realmente alguien va a ver tu pagina en un tamaño tan pequeño???

[dblanco]

como supongo también interpreta Snd234, esto te pasa cuando reduces tanto el tamaño de la pantalla que no caben ni los dos gráficos juntos, no?

Si ese es el caso, es evidente que para situaciones así no hay encuadre posible, pero nadie va ha trabajar teoricamente e ese tamaño o resolución. Hombre siempre puedes poner un z-index más bajo en el float izquierdo, pero para el caso tanto da que el izquierdo se coma al derecho como el derecho al izquierdo.

Si no lo he interpretado bien, haz una captura de la imagen para que nos hagamos idea.

Saludos

[Reza]

Bueno, pues me da pena por mi escuela pero así es, las pantallas son muy chicas y son de cajón. Algunas sí son grandes pero repito, igual hay pantallas pequeñas y algunas personas no suelen maximizar el navegador.

En cuanto a lo que comenta dblanco, así es, interpretas bien. El de la izquierda se come al de la derecha. Ya traté poniéndole los mismos z-index pero aún así el flotante (capa izquierda) se come al de la derecha.

[kahlito]

Hola, hay otras formas, no se si esta te puede valer:


Suponiendo que la imagen izquierda será 1.jpg, que el fondo a estirar será 2.jpg y que la imagen de la derecha será 3.jpg:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Banner flotante</title>
<style type="text/css">
#izquierda{
float:left;
width:50%;
background-image: url(2.jpg);
background-repeat:  repeat-x;
}
#derecha{
width:50%;
float:left;
text-align:right;
background-image: url(2.jpg);
background-repeat:  repeat-x;}
</style>
</head>

<body>
<div id="izquierda"><img src="1.jpg" alt="" width="255" height="144"/></div>
<div id="derecha"><img src="3.jpg" alt="" width="164" height="152" /></div>
</body>
</html> 

Espero que te sirva

[Reza]

Gracias kahlito, el código está muy bien, pero sigo teniendo el mismo inconveniente.

Cuando se hace más pequeña la ventana del navegador el elemento flotante de la derecha se come al de la izquierda (en este caso que me propones).

Desgraciadamente en mi escuela algunos monitores son muy chicos y los navegadores no suelen estar maximizados, por tanto se ve mal como el escudo del colegio queda abajo de la foto del colegio o viceversa.

Hay alguna forma de que no se coma uno al otro?

Saludos y gracias por el apoyo de todos los que han respondido.

[dblanco]

pero insisto en que siempre se te va ha comer un div a otro si la pantalla es tan pequeña. Lo que va ha ser imposible es que, si por ejemplo cada div tiene un ancho de 200px y tu pantalla tiene 300px de ancho, pues te quepan los dos, puesto que como mínimo necesitarías 400px. Que listo soy, no? ;)

Si tú único problema es que quieres que el de la izquierda se coma al de la derecha y no al revés, no pongas un z-index igual sino superior en el izquidro

Incluso puedes poner el div de la izquierda que es el que quieres que se vea encima, una linea más abajo en el código que el de la derecha ya que por defecto se muestra encima el último div que se lee.

saludos

[Reza]

Pero estás completamente seguro de que siempre un div se va a comer a otro div?

¿Aún si no están flotando? =/

[dblanco]

yo no sé si realmente nos estamos entendiendo, porque lo que yo digo es de cajón, si no caben lo dos divs por cuestión de espacio pues no puedes ver los dos a la vez. Dos objetos no pueden ocupar el mismo espacio al mismo tiempo, no?

Porqué no me haces una captura de pantalla y así veo si es que no estoy entendiendo tu planteamiento.

saludos

[Reza]

Pues sería cuestión de tratar de tomar un screenshot en la escuela, y probar si el código q tengo ahorita con min-width no funciona realmente en el IE6 (no lo dudo).

Pero bueno, aprovechando el tema, cómo podría hacer lo mismo para que lo largo se adapte a la pantalla también?

Saludos

[dblanco]

mira de esta forma tan sencilla, los divs se ajustan al tamaño de la pantalla y si se reduce hasta el punto de que no quepan, el izquierdo se come al derecho.

Funciona al menos en Explorer 6 y Mozilla 2, que son los browsers que tengo.

Código:

<style>
body {
	margin: 0px;
	padding: 0px;
}

#cabecera {
	position: relative;
  	background-image: url(centro.png);
 	background-repeat: repeat-x;
	width: 100%;
  	height: 200px;
}

#derecha {
	position: absolute;
	right: 0px;
}

#izquierda {
	position: absolute;
	left: 0px;
}
</style>


...



<body>
<div id="cabecera">
	<div id="derecha"><img src="der.png" border=0></div>
	<div id="izquierda"><img src="izq.png" border=0></div>
</div>

la altura de #cabecera has de ponerla del mismo tamaño que tengas las imágenes que quieres incrustar.

saludos

[Reza]

¿ Tienes IE6 ? ¿Podrías intentar poner en la capa de cabecera la propiedad min-width:1024 o algo parecido y decirme si funciona?

Y en cuanto a hacer lo mismo en vertical, ¿cómo puedo hacerlo? Para que la capa de contenido se ajuste a la pantalla a lo largo y la capa del pie de página quede siempre abajo?

Saludos

[dblanco]

min-width no funciona con explorer, pero para qué lo quieres si "cabecera" ya se ajusta al ancho de la pagina?

para poder un pie de pagina utiliza este estilo:

#pie {
position: fixed;
z-index: 20;
width: 100%;
height: 25;
bottom: 0;
left: 0
}

el alto también va en función de lo que tu quieres. Para que funcione en Explorer tienes que crear un hack, porque no acepta "bottom: 0":

*html #pie {
position: absolute;
top: expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight): document.body.scrollTop +(document.body.clientHeight-this.clientHeight));
}


espero que con esto tengas suficiente para hacer tu página. Me voy a la cama que son las 2:30 de la madrugada.

Saludos

[Reza]

Gracias por el código. Lo del min-width es para que no se coma un div al otro, ya que al especificar el tamaño mínimo, la capa contenedora no se hace más pequeña y las otras dos capas no se comen entre sí.

Gracias por tu ayuda y buenas noches

[dblanco]

anda, creo que ya te entiendo. Tu quieres que si se reduce la pantalla a un tamaño inferior a la suma de los dos divs de los extremos éstos reduzcan el tamaño proporcionalmente, si?

Para hacer eso con CSS te va ha costar horrores. Tendrías que definir divs de tamaño dinámico y un max-width para los mimos. Luego incrustar la imagen dentro del div con tamaño porcentual. Te recomiendo encarecidamente en este caso el uso de tablas, definitavamente es la solución más práctica ya que puedes hacer que se ajusten en todo momento al ancho del documento.

saludos

[Reza]

No, eso no es lo que quiero, simplemente quería que los divs no se siguieran encogiendo cuando el tamaño del navegador fuera igual a la suma de los dos divs.

Saludos

[dblanco]

hombre, de la forma que te describí arriba, no se encojen mientras el tamaña del navegador sea = ó > que la suma de los dos divs, pero lógicamente cuando sea < pues o un div tapa al otro, o se tienen que ir reduciendo de tamaño para que quepan los dos.

[Reza]

Si, lo entiendo, pero lo que yo buscaba era que no se encogiera cuando el tamaño fuera = o < que la suma de los dos divs. Lo que tú me dices es que no se encojan cuando sea = o >.

Saludos.