Foros del Web » Creando para Internet » CSS »

Explicacion de este evento (background)

Estas en el tema de Explicacion de este evento (background) en el foro de CSS en Foros del Web. Gente, Anteriormente habia consultado, pero creo que con algo de ayuda (clear: both;) pude solucionar parte del problema. El asunto es que si uds ven ...
  #1 (permalink)  
Antiguo 09/07/2008, 07:42
gcs
 
Fecha de Ingreso: enero-2004
Ubicación: Heredia, Costa Rica
Mensajes: 191
Antigüedad: 20 años, 2 meses
Puntos: 0
Explicacion de este evento (background)

Gente,

Anteriormente habia consultado, pero creo que con algo de ayuda (clear: both;) pude solucionar parte del problema.

El asunto es que si uds ven la imagen abajo veran que el sitio esta estructurado en su contenido con div's de 4 columnas (omitamos errores de validacion con W3), sin embargo, el contenido de cada Div (columna) es distinto por lo que me queda un hueco AZUL que pertenece al background.

Por lo que decidi encerrar esas columnas en otro DIV general y darle la propiedad de background-color:#FFFFFF sin embargo no sucede.

Alguien me podria explicar como solucionarlo, es decir que se vea el fondo blanco en ambas columnas hasta el final, asumiendo que los contenidos puedan variar y el jugar con el padding-bottom:xxxpx no sea la solucion:

Adjunto el contenido de mi CSS:


Código:
#content-ColA {
	background-color:#FFFFFF;
	width: 346px;
	float: left;
	padding: 5px;
}

#content-ColB {
	background:#FFFFFF;
	background-image:url(../images/segmento_columna.gif);
	background-repeat: repeat-y;
	width: 284px;
	float: left;
	padding: 5px;
	padding-bottom:15px;
}

#content-ColC {
	background-color:#FFFFFF;
	width: 190px;
	float: left;
	padding: 5px;
	padding-bottom:83px;
}

#content-ColD {
	background-color:#FFFFFF;
	width: 164px;
	float: left;
	padding: 5px;
	padding-bottom:105px;
}
este es el problema visualmente hablando


Última edición por gcs; 09/07/2008 a las 07:50
  #2 (permalink)  
Antiguo 09/07/2008, 08:13
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Explicacion de este evento (background)

Una cosita: ¿y no sería más sencillo que el background de ese contenedor general centrado fuera blanco?

Mikel.
  #3 (permalink)  
Antiguo 09/07/2008, 08:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 17 años, 5 meses
Puntos: 280
Respuesta: Explicacion de este evento (background)

Quiero decir, algo de este estilo:

Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
* {margin:0;padding:0}
html, body {height: 100%;}
body {background-color: #000;}
#contenedor {width: 98%;margin: 0 auto;background-color: #FFF;height: 100%;}
#content-ColA {
background-color:#FFFFFF;
width: 340px;
float: left;
padding: 5px;
}
#content-ColB {
background:#FFFFFF;
background-image:url(../images/segmento_columna.gif);
background-repeat: repeat-y;
width: 280px;
float: left;
padding: 5px;
padding-bottom:15px;
}
#content-ColC {
background-color:#FFFFFF;
width: 180px;
float: left;
padding: 5px;
padding-bottom:83px;
}
#content-ColD {
background-color:#FFFFFF;
width: 160px;
float: left;
padding: 5px;
padding-bottom:105px;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="content-ColA">Texto de prueba</div>
<div id="content-ColB">Texto de prueba</div>
<div id="content-ColC">Texto de prueba</div>
<div id="content-ColD">Texto de prueba</div>
</div>
</body>
</html>
Mikel.
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:33.