Foros del Web » Creando para Internet » CSS »

Problema con Tablas (div)

Estas en el tema de Problema con Tablas (div) en el foro de CSS en Foros del Web. ¿Qué tal? ¿Cómo vamos? Espero que todo bien. Esta vez escribo para consultarles sobre una duda que tengo. Y es que he estado desarrollando mi ...
  #1 (permalink)  
Antiguo 15/08/2008, 18:41
Avatar de canon882  
Fecha de Ingreso: febrero-2007
Ubicación: Lima, Perú.
Mensajes: 152
Antigüedad: 10 años, 10 meses
Puntos: 0
Pregunta Problema con Tablas (div)

¿Qué tal? ¿Cómo vamos? Espero que todo bien. Esta vez escribo para consultarles sobre una duda que tengo. Y es que he estado desarrollando mi plantilla en Joomla y me estuvo yendo todo genial. Sin embargo, parece que tengo un problema con las tablas (supongo que el problema no tiene nada que ver con Joomla, sino con la CSS de la tabla).

Miren este modelo de tablas que he desarrollado:


Sin embargo, al empezar a rellenarla tengo este problema:


Como verán, la segunda tabla de la primera columna se correo hasta llegar al final de la primera tabla de la segunda columna. Quisiera saber de qué manera, con CSS, puedo evitar este problema.

PD: Las 'tablas' las estoy desarrollando con los comandos 'div'. Al final adjunto los códigos.

Muchas gracias por su atención.

index.php

Cita:
<div id="contenido">

<div id="tabla01_columna_01">
</div>

<div id="tabla01_columna_02">
</div>

<div id="tabla02_columna_01">
</div>

<div id="tabla03_columna_01">
</div>

</div>
template_css.css
Cita:
#contenido {
color: #000000;
width: 755px;
float: left;
padding: 0px;
margin: 0px 0px 0px 0px;
border: solid;
border-color:#FFFFFF;
border-width:10px;
background: #CCCCCC;
}

#tabla01_columna_01 {
float: left;
color: #000000;
border: 0px solid #000000;
background: #999999;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 555px;
}

#tabla01_columna_02 {
color: #000000;
vertical-align:top;
border: 0px solid #000000;
background: #CCCCCC;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 200px;
float:left;
}

#tabla02_columna_01 {
float: left;
color: #000000;
border: 0px solid #000000;
background: #999999;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 100%;
display: inline;
}

#tabla03_columna_01 {
float: left;
color: #000000;
border: 0px solid #000000;
background: #999999;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 555px;
}

Última edición por canon882; 15/08/2008 a las 18:49
  #2 (permalink)  
Antiguo 15/08/2008, 18:52
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
Respuesta: Problema con Tablas (div)

Pruébalo así:

Cita:
<div id="contenido">

<div id="tabla01_columna_02">
</div>


<div id="tabla01_columna_01">
</div>

<div id="tabla02_columna_01">
</div>

<div id="tabla03_columna_01">
</div>

</div>
y ponle a la columna 2 de la tabla 1 un float: right; en la css.

P.D.: los div no son comandos, son cajas
__________________
Visita mi nueva web idplus.org
  #3 (permalink)  
Antiguo 15/08/2008, 18:58
Avatar de canon882  
Fecha de Ingreso: febrero-2007
Ubicación: Lima, Perú.
Mensajes: 152
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Problema con Tablas (div)

Muchas gracias por tu respuesta, pero sigue igual.

Para que veas que no te miento: www.anderock.com/v05/
  #4 (permalink)  
Antiguo 15/08/2008, 19:02
Avatar de canon882  
Fecha de Ingreso: febrero-2007
Ubicación: Lima, Perú.
Mensajes: 152
Antigüedad: 10 años, 10 meses
Puntos: 0
De acuerdo Respuesta: Problema con Tablas (div)

Ya lo corregí. Era por un problema en las dimensiones de una tabla de primera columna. Le puse como anchura (width) 100%.
  #5 (permalink)  
Antiguo 15/08/2008, 19:03
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
Respuesta: Problema con Tablas (div)

Ah, muy bien, no obstante, te sigo recomendando que hagas lo que te he dicho; funciona mejor que todos los float left.
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 15/08/2008, 19:12
Avatar de canon882  
Fecha de Ingreso: febrero-2007
Ubicación: Lima, Perú.
Mensajes: 152
Antigüedad: 10 años, 10 meses
Puntos: 0
Respuesta: Problema con Tablas (div)

Una consulta adicional (si las reglas del Foro lo permiten).

Había puesto el ancho (width) de 100%, porque la columna de la derecha sólo se muestra en la página inicial. Entonces, al navegar por otros enlaces, Joomla automáticamente 'borra' dicha columna. Por eso, le había puesto ese ancho a las columnas de la izquierda, para que ocupen todo el ancho posible. ¿Me podrías explicar cómo hacer para que, poniéndole el ancho de 100%, se note bien? O sea, que no se descuadre.

Muchas gracias por tu atención.

PD: Los que tienen ancho de 100% son las tablas de la primera columna. La columna de la derecha tiene un tamaño fijo de 200px.
  #7 (permalink)  
Antiguo 15/08/2008, 19:19
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
Respuesta: Problema con Tablas (div)

Si no le pones ningún width, como son divs (y no tablas), ocuparán el 100% del espacio disponible, siempre que no estén flotadas. Este es uno de los problemas que puedes evitar con el sistema que te decía: pones primero la columna de la derecha flotada a la derecha, y luego pones la de la izquierda sin flotar y sin width, de esta manera, la de la izquierda se deberá ajustar al espacio disponible.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 15/08/2008, 19:26
Avatar de canon882  
Fecha de Ingreso: febrero-2007
Ubicación: Lima, Perú.
Mensajes: 152
Antigüedad: 10 años, 10 meses
Puntos: 0
De acuerdo Respuesta: Problema con Tablas (div)

Pues, tienez razón. Al no darle dimensiones, me ocupa todo, sin embargo, vuelve a aparecer dicho problema de que la segunda tabla de la primera columna se salta hasta el final de la primera tabla de la segunda columna.
  #9 (permalink)  
Antiguo 16/08/2008, 12:01
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
Respuesta: Problema con Tablas (div)

Amigo, no tiene mucho sentido que intente ayudarte si no das la información como es. Hablas de tablas y dices que lo haces con divs; luego muestras el código y sólo pones divs; luego yo te doy esta respuesta (que no sé si has leido):

Cita:
Si no le pones ningún width, como son divs (y no tablas),
y finalmente dices que no te funciona como te he indicado, y cuando entro a tu pagina a ver qué es lo que tienes, me encuentro con que en realidad SÍ son tablas dentro de los divs, por lo que, como te había explicado en el comentario de arriba, mi solución funcionaría en caso de ser divs y no tablas.

Así no se puede hacer mucho. Hasta la vista.
__________________
Visita mi nueva web idplus.org
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 15:09.