Foros del Web » Creando para Internet » CSS »

Problema con celdas

Estas en el tema de Problema con celdas en el foro de CSS en Foros del Web. Soy nuevo en CSS y tengo un problema con 1 celda...aqui va la imagen: **intente agregar una imagen pero no me dejo por los 30 ...
  #1 (permalink)  
Antiguo 16/10/2006, 20:32
 
Fecha de Ingreso: mayo-2006
Mensajes: 24
Antigüedad: 17 años, 10 meses
Puntos: 0
Problema con celdas

Soy nuevo en CSS y tengo un problema con 1 celda...aqui va la imagen:

**intente agregar una imagen pero no me dejo por los 30 posts requeridos para poner enlaces**

Como pueden ver son 3 celdas, 2 que estan a la par y una que esta debajo de ambas. El problema es que me pongo a agregar contenido en cualquiera de las 2 celdas de arriba pero la celda de abajo no se desplaza...sino que queda fija.

Aqui esta el CSS de las 3 celdas, de la 'tabla' y del body:

Código:
body 
{
	background-image:url('img/bg.jpg');
	background-repeat:repeat-x;
	background-color:#8C8C8C;
	margin-top:0px;
	margin-bottom:0px;
	margin-left:0px;
	margin-right:0px;
}

div.contenido {
	position:relative;
	width:724px;
	margin-left:auto;
	margin-right:auto;
}

div.principal {
	position:absolute;
	left:6px;
	top:241px;
	width:517px;
	background-image: url('img/13.jpg');
	background-color:#626262;
	background-repeat:repeat-x;
}

div.caja-extra {
	position:absolute;
	left:529px;
	top:382px;
	width:189px;
	background-image: url('img/17.jpg');
	background-color:#626262;
	background-repeat:repeat-x;
}

div.abajo {
	position:absolute;
	top:562px;
	width:724px;
	height:11px;
	background-image: url(img/18.jpg);
}
Las clases 'principal' y 'caja extra' son las dos celdas superiores y 'abajo' es la que esta debajo de ambas.

Muchas gracias por su ayuda.
  #2 (permalink)  
Antiguo 17/10/2006, 17:14
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Quita position absolute
  #3 (permalink)  
Antiguo 23/10/2006, 21:06
 
Fecha de Ingreso: mayo-2006
Mensajes: 24
Antigüedad: 17 años, 10 meses
Puntos: 0
muchas gracias Rafael, eso ha arreglado mi problema y he cambiado partes de mi CSS. ahora, luego de solventar la mayoria de problemas que tenia, se me presenta uno que no le encuentro como solucionarlo...

Tengo 1 celda a la par de 3 celdas pero si en el html pongo el codigo de la primera celda antes del codigo de las 3 celdas, entonces las 3 celdas aparecen hasta que termina el texto que he introducido en la primera celda pero si pongo primero las 3 celdas y luego la otra celda, entonces me pasa al reves.

Gracias!
  #4 (permalink)  
Antiguo 26/10/2006, 20:54
 
Fecha de Ingreso: mayo-2006
Mensajes: 24
Antigüedad: 17 años, 10 meses
Puntos: 0
Aqui esta una imagen del problema:

img133.imageshack.us/img133/8271/1nl2.jpg

Gracias!
  #5 (permalink)  
Antiguo 01/11/2006, 16:07
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Humm, ya vi la imagen, no entiendo bien. ¿Un codigo para revisar quizá?
  #6 (permalink)  
Antiguo 01/11/2006, 21:10
 
Fecha de Ingreso: mayo-2006
Mensajes: 24
Antigüedad: 17 años, 10 meses
Puntos: 0
Problema resuelto Rafael, muchas gracias.

Ahora tengo uno nuevo jejeje, pues queriendo hacer un CSS compatible con IE (pues el que estaba trabajando lo visualizaba con Firefox), los problemas son estos:

1. El div.banner no cubre todo el ancho que deberia como lo hace en Firefox:
img107.imageshack.us/img107/5222/3of5.jpg

2. El div.abajo se repite:
img111.imageshack.us/img111/8931/4oa8.jpg

Aqui esta el CSS:

Código:
body 
{
	background-image:url('img/bg.jpg');
	background-repeat:repeat-x;
	background-color:#8C8C8C;
	margin:0px 0px 0px 0px;
}

div.contenedor {
	width:724px;
	margin:auto;
	background-image:url('img/contenido-bg.jpg');
	background-repeat:repeat-y;
	background-position:center;
}

div.borde-izq {
	float:left;
	margin-top:0px;
}

div.banner {
	margin:0px auto;
	height:54px;
	background-image: url('img/02.jpg');
}

div.borde-der {
	float:right;
	margin-top:0px;
}

div.espacio-superior {
	margin:-202px 6px 0px 6px;
	height:13px;
}

div.menu {
	margin:-4px 0px 0px 0px;
	height:92px;
}

div.inicio {
	margin:0px 585px 0px 6px;
}

div.tutoriales {
	margin:-96px 455px 0px 136px;
}

div.afiliados {
	margin:-96px 325px 0px 266px;
}

div.contacto {
	margin:-96px 192px 0px 396px;
}

div.pan-diario {
	margin:-96px 6px 0px 529px;
	height: 92px;
	background-image: url('img/09.jpg');
}

div.cuerpo {
	margin:-4px -6px 0px 6px;
	width: 712px;
}

div.contenido {
	float: left;
	width: 523px;
	margin-top:0px;
}

div.anuncio {
	margin:0px 0px 0px 0px;
	height:82px;
	background-image: url('img/10.jpg');
}

div.principal {
	margin:0px 0px 0px 0px;
	background-image: url('img/13.jpg');
	background-repeat:no-repeat;
}

div.cajas {
	float:right;
	width: 189px;
	margin-top:0px;
}

div.tutoriales-azar {
	margin:0px 0px 0px 0px;
	height:82px;
	background-image: url('img/11.jpg');
}

div.afiliados-azar {
	margin:0px 0px 0px 0px;
	height:141px;
	background-image: url('img/15.jpg');
}

div.caja-extra {
	margin:0px 0px 0px 0px;
	background-image: url('img/17.jpg');
	background-repeat:no-repeat;
}

div.abajo {
	margin-bottom:0px;
	height:11px;
	background-image: url('img/18.jpg');
}

div.leyenda {
	text-align: center;
}
Y el HTML:

Código:
<body>
<div class="contenedor">

	<div class="borde-izq">
	<img src="img/01.jpg" alt="" border="0" />
	</div>
	
	<div class="borde-der">
	<img src="img/03.jpg" alt="" border="0" />
	</div>
	
	<div class="banner">
	</div>
	
	<div class="espacio-superior">
	<img src="img/04.jpg" alt="" width="712" height="13" border="0" />
	</div>
	
	<div class="menu">
	
			<div class="inicio">
			<img src="img/05.jpg" width="130" height="92" alt="" border="0" />
			</div>
			
			<div class="tutoriales">
			<img src="img/06.jpg" width="130" height="92" alt="" border="0" />
			</div>
			
			<div class="afiliados">
			<img src="img/07.jpg" width="130" height="92" alt="" border="0" />
			</div>
			
			<div class="contacto">
			<img src="img/08.jpg" width="133" height="92" alt="" border="0" />
			</div>
			
			<div class="pan-diario">
			</div>
	
	</div>
	
<div class="cuerpo">
	
	<div class="contenido">
	
			<div class="anuncio">
			</div>
			
			<div class="principal">
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			</div>
	
	</div>
	
	<div class="cajas">
	
			<div class="tutoriales-azar">
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			</div>

			<div class="afiliados-azar">
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			</div>
			
			<div class="caja-extra">
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />aaaaaa<br />
			</div>
	
	</div>
	
</div>
	
	<div class="abajo">
	</div>
	
</div>
<div class="leyenda">Texto</div>
</body>
Gracias por su tiempo y ayuda.
  #7 (permalink)  
Antiguo 02/11/2006, 15:33
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Trata de agregar en div abajo background-repeat: no repeat;

y al banner ¿quizá un width específico width: 150px;?
  #8 (permalink)  
Antiguo 03/11/2006, 00:33
 
Fecha de Ingreso: mayo-2006
Mensajes: 24
Antigüedad: 17 años, 10 meses
Puntos: 0
Rafael, fijate que al poner que no repita el fondo en el div.abajo, pude ver que el problema es con el div.contenedor (es el que contiene todos los divs) y este es el que hace que se repita el fondo.

Y para el div.banner, le pongo un width determinado y me da un problema, me tira todo para abajo y creo que es porque tengo 2 float (div.borde-izq y div.borde-der) junto al div.banner y aunque le ponga un margin para que se tenga que visualizar bien, me da el mismo problema.

Saludos y gracias.
  #9 (permalink)  
Antiguo 03/11/2006, 15:52
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
MM, deja revisar con más calma el codigo, si tienes una liga para ver más concreto el ejemplo mejor, pero estoy un poquito cargado de trabajo, :) así que tenme un poquito de paciencia.
  #10 (permalink)  
Antiguo 04/11/2006, 22:31
 
Fecha de Ingreso: mayo-2006
Mensajes: 24
Antigüedad: 17 años, 10 meses
Puntos: 0
Gracias, para mientras trabajare en lo demas.
  #11 (permalink)  
Antiguo 18/11/2006, 01:04
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Hola. Retomando tu post. ¿Ya se solucionó? ¿tienes una liga para ver el defectillo?
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 12:15.