Foros del Web » Creando para Internet » CSS »

Ancho variable de 1 de 3 columnas

Estas en el tema de Ancho variable de 1 de 3 columnas en el foro de CSS en Foros del Web. Hola, tengo un popup que tiene un encabezado que es la unión de 3 imágenes, 2 de ellas de tamaño fijo y la otra se ...
  #1 (permalink)  
Antiguo 05/03/2007, 23:27
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Ancho variable de 1 de 3 columnas

Hola, tengo un popup que tiene un encabezado que es la unión de 3 imágenes, 2 de ellas de tamaño fijo y la otra se expande el color de fondo y se pone una imagen con ese mismo fondo para dar la impresion de que se expande, algo asi:

-------------------------------
| 70px | variable | 70px |
-------------------------------

Espero se entienda lo que necesito, actualmente lo tengo con la columna de enmedio fija pero quisiera que se pudiera expandir, ahora tengo esto:

Código:
<div style="background-color: #58595B">
    <div style="float:left; background-image:url(images/fndTOPizq.gif); width:177px; height:86px"><img src="images/fndNOTICIAS.gif" alt="NOTICIAS" style="padding:5px 0 0 20px"></div>
    <div style="float:left; background-color: #58595B; height:86px; width:96px; text-align:center;"><img src="images/LOGOfnd.gif" alt="Suntory"></div>
    <div style="float:right; background-image:url(images/fndTOPder.gif); width:177px; height:86px; text-align:right;"><img src="images/fndLOGO.gif" alt="BuenProvecho" style="padding-right:20px"></div>
</div>
Espero se entienda y me puedan ayudar, de antemano gracias
  #2 (permalink)  
Antiguo 06/03/2007, 03:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Ancho variable de 1 de 3 columnas

Mira a ver si te sirve este código. Básicamente se trata de quitar el width y el float left a la columna central, y alguna cosilla más:

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>sjam7</title>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <style>
#der {float: right;
background-image: url(images/fndTOPder.gif);
width: 177px;
height: 86px;
text-align: right;
}
#izq {float: left;
background-image: url(images/fndTOPizq.gif);
width: 177px;
height: 86px;
}
#cen { background-color: rgb(88, 89, 91);
height: 86px;
text-align: center;
margin: 0px 177px 0px;
}
  </style>
</head>
<body>
<div style="background-color: rgb(88, 89, 91);">
<div id="der"><img src="images/fndLOGO.gif"
 alt="BuenProvecho" style="padding-right: 20px;"></div>
<div id="izq"><img src="images/fndNOTICIAS.gif"
 alt="NOTICIAS" style="padding: 5px 0pt 0pt 20px;"></div>
<div id="cen"><img src="images/LOGOfnd.gif"
 alt="Suntory"></div>
</div>
</body>
</html>
Ya comentarás.

Mikel.
  #3 (permalink)  
Antiguo 06/03/2007, 13:19
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Re: Ancho variable de 1 de 3 columnas

bueno, pues no funco, lo puedes ver en www.buenprovecho.ws/suntory/noticias.asp

la del centro se abre a toda la pagina y manda para abajo a la de la derecha (columnas)
  #4 (permalink)  
Antiguo 06/03/2007, 13:23
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Re: Ancho variable de 1 de 3 columnas

perdon, ya quedo, tenia puestos los divs en el orden que para mi era logico: izquierda-centro-derecha pero las puse en el orden que tu las pusiste y funciono, muchas gracias, solo una pregunta, sabes por que pasa esto ultimo? del orden en que se deben poner?
  #5 (permalink)  
Antiguo 06/03/2007, 15:32
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: Ancho variable de 1 de 3 columnas

Veamos:
como vés, el truco está en que las dos columnas de los lados tengan un ancho definido y estén flotadas, y la del centro no. Una columna que no está flotada, si no tiene un ancho definido ocupa todo el ancho de la línea en la que está, y no permite que otras se pongan a su lado, obligando a éstas a saltar a la siguiente línea.

De esa manera, si ponemos izquierda--centro--derecha, tenemos que la izquierda aparece en la primera línea, la del centro ocupa todo el resto de espacio disponible en su línea, y como no está flotada, obliga a que la de la derecha baje a la siguiente línea (en horizontal).

¿Cómo se arregla esto? Muy sencillo: colocamos la columna de la derecha (flotada), después la de la izquierda (también flotada) que se coloca en la misma línea, y después la del centro, que como las otras dos están flotadas le permiten colocarse en la misma línea que ellas, y al no estar flotada ni tener ancho definido, ocupa todo el espacio que queda disponible.

Lógico y sencillo, ¿no?

Espero haberme explicado bien.

Mikel.
  #6 (permalink)  
Antiguo 08/03/2007, 19:36
Avatar de sjam7  
Fecha de Ingreso: diciembre-2001
Ubicación: Guadalajara, Mexico
Mensajes: 3.669
Antigüedad: 16 años
Puntos: 16
Re: Ancho variable de 1 de 3 columnas

excelente tanto la solucion como la explicacion, muchas gracias
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:21.