Foros del Web » Creando para Internet » CSS »

mostrar cada 4 tablas en 1 fila

Estas en el tema de mostrar cada 4 tablas en 1 fila en el foro de CSS en Foros del Web. Hola gente , tengo varias tablas con contenido relacionado a usuarios del sitios. El tema es que me gusaría que cada 4 tablas salgan en ...
  #1 (permalink)  
Antiguo 16/09/2010, 12:11
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
mostrar cada 4 tablas en 1 fila

Hola gente , tengo varias tablas con contenido relacionado a usuarios del sitios. El tema es que me gusaría que cada 4 tablas salgan en una fila; para ello he utilizado float:left y en la primera fila funciona, se muestra las 4 primeras. El problema surge en la segunda fila que se muestran dos tablas y la tercera baja a una segunda fila.

Este es el html:
Código:
<div class="cb_template_default">	<hr class="cbUserListHrTop" size="1" />
	<div id="cbUserTable" class="cbUserListTable cbUserListT_4">
	  <table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=68&amp;Itemid=49">andrea</a></span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=68&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn68_4c924a8890f59.jpg" alt="andrea" title="andrea" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=63&amp;Itemid=49">mariola</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=63&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn63_4c90734131978.jpg" alt="mariola" title="mariola" class="cbThumbPict" /></a></span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>fff</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>española</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=69&amp;Itemid=49">morena2</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=69&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c924b896ea09.jpg" alt="morena2" title="morena2" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=65&amp;Itemid=49">morenaca</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=65&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn65_4c924ace1ab41.jpg" alt="morenaca" title="morenaca" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>

			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=64&amp;Itemid=49">pepona</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=64&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn64_4c90747129f66.jpg" alt="pepona" title="pepona" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=67&amp;Itemid=49">rubiaca</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=67&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c9087248d250.jpg" alt="rubiaca" title="rubiaca" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table><table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=66&amp;Itemid=49">zorraida</a></span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=66&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c9086ad0b71e.jpg" alt="zorraida" title="zorraida" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
			</td></tr></table>
	</div>	

	<hr class="cbUserListHrBottom" size="1" />
</div>
y el css que utilizo es este (en este caso la idea era que mostrara solo tres filas , de ahí el nombre tree_cols de la clase, pero me da igual que muestre 4).

.tree_cols {float:left; margin:5px 0; width:200px}
.cbUserListFieldLine {margin:5px;width:200px;}
__________________
Videotutoriales de Drupal
  #2 (permalink)  
Antiguo 16/09/2010, 12:18
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: mostrar cada 4 tablas en 1 fila

tenes errores graves en el codigo, tipo:

Código HTML:
Ver original
  1. <table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">

revisalo y probalo!
Slds.-
  #3 (permalink)  
Antiguo 16/09/2010, 12:31
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: mostrar cada 4 tablas en 1 fila

Cita:
Iniciado por DragonX Ver Mensaje
tenes errores graves en el codigo, tipo:

Código HTML:
Ver original
  1. <table class='tree_cols'<tr><td valign="top" class="cbUserListCol1">

revisalo y probalo!
Slds.-
Ok ,perdón se me pasó , pero aún arreglando eso sigue el mismo problema que comentaba atrás.
<table class='tree_cols'><tr><td valign="top" class="cbUserListCol1">
__________________
Videotutoriales de Drupal
  #4 (permalink)  
Antiguo 17/09/2010, 05:40
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: mostrar cada 4 tablas en 1 fila

Madre mia, no entiendo porque leches no se apilan a la izquierda, es curioso.
He sustituido ahora las tablas por DIVS flotados a la izquierda, pero me sigue pasando exactamente lo mismo:
Código:
<div id="cbUserTable" class="cbUserListTable cbUserListT_4">
	  <div class='tree_cols'>1
<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=68&amp;Itemid=49">ffdsfdsf</a></span>
</div>

<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=68&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn68_4c924a8890f59.jpg" alt="andrea" title="andrea" class="cbThumbPict" /></a></span>
</div>
				
<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=63&amp;Itemid=49">mariola</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=63&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn63_4c90734131978.jpg" alt="mariola" title="mariola" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>Acompañante de lujo. Señorita acompañante de lujo</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>española</span></div>

</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=69&amp;Itemid=49">morena2</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=69&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c924b896ea09.jpg" alt="morena2" title="morena2" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=65&amp;Itemid=49">morenaca</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=65&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn65_4c924ace1ab41.jpg" alt="morenaca" title="morenaca" class="cbThumbPict" /></a></span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=64&amp;Itemid=49">pepona</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=64&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn64_4c90747129f66.jpg" alt="pepona" title="pepona" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>

				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=67&amp;Itemid=49">rubiaca</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=67&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c9087248d250.jpg" alt="rubiaca" title="rubiaca" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>

</div><div class='tree_cols'>1
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_username"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=66&amp;Itemid=49">zorraida</a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_avatar"><strong></strong><a href="http://localhost/joomla/index.php?option=com_comprofiler&amp;task=userprofile&amp;user=66&amp;Itemid=49"><img src="http://localhost/joomla/images/comprofiler/tn0_4c9086ad0b71e.jpg" alt="zorraida" title="zorraida" class="cbThumbPict" /></a></span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_titulo"><strong>titulo:</strong>-</span></div>
				<div class="cbUserListFieldLine"><span class="cbListFieldCont cbUserListFC_cb_nacoinalidad"><strong>nacoinalidad:</strong>-</span></div>
</div>
	</div>
El css no lo pongo porque ya lo puse arriba en el primer post.
Pego una imagen para que se vea como se apilan mal las capas (el problema sucede a partir de la segunda fila).


Mil gracias por la ayuda
__________________
Videotutoriales de Drupal
  #5 (permalink)  
Antiguo 17/09/2010, 06:18
 
Fecha de Ingreso: junio-2008
Mensajes: 165
Antigüedad: 9 años, 6 meses
Puntos: 6
Respuesta: mostrar cada 4 tablas en 1 fila

Utiliza

#clase .clase {
margin-left:-Xpx; (Donde x es el número de pixels es ir probando, te recomiendo usar la herramienta Firebug de firefox)
position:absolute;
}
  #6 (permalink)  
Antiguo 17/09/2010, 10:35
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: mostrar cada 4 tablas en 1 fila

Cita:
Iniciado por cronosmen Ver Mensaje
Utiliza

#clase .clase {
margin-left:-Xpx; (Donde x es el número de pixels es ir probando, te recomiendo usar la herramienta Firebug de firefox)
position:absolute;
}
La verdad que ya lo he solucionado, pero gracias.
El problema era que uno de los campos "título" tenía un contenido demasiado largo, lo he limitado y ya funciona perfectamente.
De todas formas a dia de hoy sigo sin tener claro que diferencia existe entre abosolute y relative , yo suelo utilizar float y no necesito absolute ni relative (creo que este último lo hace por defecto pero no entiendo muy bien su significado).

Un saludo y gracias
__________________
Videotutoriales de Drupal
  #7 (permalink)  
Antiguo 18/09/2010, 03:26
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: mostrar cada 4 tablas en 1 fila

Hola:

Entonces puede resultarte útil el aporte que hizo Mikmoro al foro de CSS: Migración sin dolor.

Creo recordar que era el capítulo tercero donde explica muy clarito las diferencias entre relative, absolute, fixed y static.

Saludos.

  #8 (permalink)  
Antiguo 19/09/2010, 03:35
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: mostrar cada 4 tablas en 1 fila

Cita:
Iniciado por jomaruro Ver Mensaje
Hola:

Entonces puede resultarte útil el aporte que hizo Mikmoro al foro de CSS: Migración sin dolor.

Creo recordar que era el capítulo tercero donde explica muy clarito las diferencias entre relative, absolute, fixed y static.

Saludos.

Jomarura mil gracias . lo voy a revisar, de todas formas he visto algo de librosweb.es donde se explica muy bien lo del css, pero sigo liándome aveces con absolute y relative , y sobre todo mi problema es no saber bien cuando usar uno u otro.
Un saludo (::
__________________
Videotutoriales de Drupal
  #9 (permalink)  
Antiguo 19/09/2010, 03:36
Avatar de Dundee  
Fecha de Ingreso: junio-2002
Ubicación: El Médano
Mensajes: 1.310
Antigüedad: 15 años, 5 meses
Puntos: 8
Respuesta: mostrar cada 4 tablas en 1 fila

esta duplicado y no me deja borrarlo (::

Última edición por Dundee; 19/09/2010 a las 03:37 Razón: duplicado

Etiquetas: fila, tablas
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 20:58.