div v/s tabla

naf · #1 (**permalink**) 24/12/2007, 08:33

Hola a todos, quisiera solicitar vuestra ayuda.
Tengo una tabla con n columnas desconosco la cantidad de columnas a tener puesto que el contenido de la tabla saldra de una base de datos.
En la parte del contenido de mi pagina tengo una columna alineada a la derecha (tiene ancho fijo, en px). lo que me queda del lado izquierdo no tiene ancho(ni en porcentaje, ni en px), solo tiene padding a la derecha para que el contenido no se monte sobre la columna derecha.
El problema esta en que la tabla al tener 8 columnas y mas se sobre pone a la columna derecha cuando la resolucion del monitor es de 1024 x764 y menor http://anfruns.aeurus.cl/especificaciones-tecnicas/
les dejo el link, para que me den sugerencias, se los agradeceria por que no es la primera vez que me pasa. Por ahora lo solucione con tablas, pero tengo claro que no es la mejor forma

hades87 · #2 (**permalink**) 25/12/2007, 17:24

perot e refieres a que seria lo mejor apra mostrar todos los campos? si meterlos en tablas o usar divs?

naf · #3 (**permalink**) 27/12/2007, 14:52

Cita:

Iniciado por hades87

perot e refieres a que seria lo mejor apra mostrar todos los campos? si meterlos en tablas o usar divs?

Te explico:
para diseñar mis sitios no utilizo tablas a no ser que liste datos, como es el caso actual.
El problema que tengo es que los div no se acomodan a la tabla que lista datos, por lo tanto tuve que reemplazar esos div, por tablas. Para que la tabla no se montara en la columna derecha.

Ojala me haya explicado mejor.

webosiris · #4 (**permalink**) 27/12/2007, 15:04

no entiendo yo tampoco... bueno, si entiendo (creo) el problema que planteas, pero así en el aire no entiendo porque te sucede... un poco de código que presente el problema podría ayudar

Para armar la columna derecha como haces? usas float o posición absoluta?

naf · #5 (**permalink**) 04/01/2008, 10:38

Cita:

Iniciado por webosiris

no entiendo yo tampoco... bueno, si entiendo (creo) el problema que planteas, pero así en el aire no entiendo porque te sucede... un poco de código que presente el problema podría ayudar

Para armar la columna derecha como haces? usas float o posición absoluta?

Perdon por no aver respondido antes, estaba trabajando en otro proyecto. Pero lo que me ha pasado me sigue dando vuelta.

Para responder a tú pregunta webosiris, utilizó float . Pero para que quede mas claro tengo la pagina original y les dejo el link para que lo revisen http://anfruns.aeurus.cl/especificaciones-tecnicas/index3.html.
Y la solucion que encontre (en realidad que fue la mas rapida) es usar tablas, de la siguiente manera http://anfruns.aeurus.cl/especificaciones-tecnicas/
dejo los link por que creo es mas facil de entender que si coloco el codigo.

Aunque este sitio fue entregado, aun me queda la duda y me gustaria saber como poder resolverlo, puesto que no sera la ultima vez que tenga que hacer un sitio similar.

Les agradesco que me ayuden y espero poder hacerlo cuando ustedes tengan alguna duda.

hades87 · #6 (**permalink**) 04/01/2008, 12:42

n puedo ver ninguna web :S

naf · #7 (**permalink**) 04/01/2008, 13:14

Intentalo de nuevo es que mi server, esta un poco lento.

hades87 · #8 (**permalink**) 04/01/2008, 16:55

lo que quieres decir que si tiene resolución de pantalla pequeña la tabla no se ve entera de una tirada no?

naf · #9 (**permalink**) 07/01/2008, 15:23

lo que quiero decir es que la tabla queda sobre la columna derecha, en vez de que la tabla empuje a la columna, simplemente queda por encima.

y no entiendo por que tiene ese comportamiento.

hades87 · #10 (**permalink**) 07/01/2008, 15:31

pon el codigo de la web y le echaremos un ojo

naf · #11 (**permalink**) 08/01/2008, 07:00

De acuerdo:
html:

Código:

<div id="right">
        <div class="caja-titulos-cotizar">
          <h2 class="text-h2">COTIZACION</h2>
        </div>
        <div class="columna-riht-contenido">
          <form>
            <fieldset>
            <label for="nombre">Nombres:
            <input name="nombre" type="text" class="form-1" id="nombre" title="Escriba su nombre" />
            </label>
            <label for="apellido">Apellidos:
            <input type="text" class="form-1" id="apellido" title="Escriba su apellido" />
            </label>
            <label for="modelo">Regi&oacute;n:</label>
            <select name="region" class="form-2" id="region" title="Selecione una región">
              <option>asdasdasd</option>
            </select>
            <label for="comuna">Comuna: </label>
            <select name="region" class="form-2" id="comuna"title="Selecione una comuna">
            </select>
            <label for="telefono">Tel&eacute;fono:
            <input name="telefono" type="text" class="form-1" id="telefono" title="Escriba su número teléfonico"/>
            </label>
            <label for="email">E-mail:
            <input name="email" type="text" class="form-1" id="email" title="Escriba su correo electrónico"/>
            </label>
            <label for="modelo">Modelo a cotizar:</label>
            <select name="modelo" class="form-2" id="modelo" title="Secciones el modelo a cotizar">
            </select>
            <label for="comentario">Comentario:
            <textarea name="comentario" rows="9" class="form-3" id="comentario" title="Escriba su mensaje"></textarea>
            </label>
            </fieldset>
            <div class="text-link-az">
              <input name="Submit22" type="submit" class="boton-enviar" value="Enviar" title="Presione el boton, para enviar su cotización"/>
            </div>
          </form>
        </div>
      </div>
<div id="contenido-izq">
        <div id="contenido-izq-columnas">
          <table border="0" cellpadding="0" cellspacing="0" id="tabla-resumen" summary=" Listado de especificaciones técnicas">
            <tr>
              <th class="fondo"></th>
              <th class="fondo">Version 01</th>
              <th class="fondo">Version 2 </th>
              <th class="fondo">Version 3</th>
              <th class="fondo">Version 4</th>
              <th class="fondo">Version 5</th>
              <th class="fondo">Version 6</th>
              <th class="fondo">Version 7</th>
            </tr>
            <tr>
              <th>Motor</th>
              <td>DOHC</td>
              <td>DOHC</td>
              <td>DOHC</td>
              <td>DOHC</td>
              <td>DOHC</td>
              <td>DOHC</td>
              <td>DOHC</td>
            </tr>
            <tr>
              <th>Potencia</th>
              <td>112 HP/6.000Rpm </td>
              <td>112 HP/6.000Rpm </td>
              <td>112 HP/6.000Rpm </td>
              <td>112 HP/6.000Rpm </td>
              <td>112 HP/6.000Rpm </td>
              <td>112 HP/6.000Rpm </td>
              <td>112 HP/6.000Rpm </td>
            </tr>
            <tr>
              <th >Torque</th>
              <td>Dato </td>
              <td>Dato </td>
              <td>Dato </td>
              <td>Dato </td>
              <td>Dato </td>
              <td>Dato </td>
              <td>Dato </td>
            </tr>
            <tr>
              <th class="fondo">Transmisi&oacute;n</th>
              <td class="fondo">Dato </td>
              <td class="fondo">Dato </td>
              <td class="fondo">Dato </td>
              <td class="fondo">Dato </td>
              <td class="fondo">Dato </td>
              <td class="fondo">Dato </td>
              <td class="fondo">Dato </td>
            </tr>
            <tr>
              <th class="sub-categoria">Sub-categoria</th>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
              <td class="sub-categoria">&nbsp;</td>
            </tr>
            <tr >
              <th>Otro dato </th>
              <td>$12.000.000 </td>
              <td>$12.000.000 </td>
              <td>$12.000.000 </td>
              <td>$12.000.000 </td>
              <td>$12.000.000 </td>
              <td>$12.000.000 </td>
              <td>$12.000.000 </td>
            </tr>
            <tr>
              <th>Otro dato</th>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </table>
          <p class="text-link-az"><a href="#subir">Subir</a></p>
          <div class="borrar"></div>
        </div>
      </div>

CSS:

Código:

#right{
	float:right;
	width:210px;
	padding-bottom: 10px;

}
.columna-riht-contenido{
	width: 198px;
	margin-left: 6px;
	float: none;
} 
#contenido-izq{
	padding-right:211px;
}
#contenido-izq-columnas{
	background-color: #FFFFFF;
	padding-bottom: 1px;
	padding-right: 12px;
	padding-top: 1px;
}
/*Tablas*/
#tabla-resumen{
	width: 98%;
	margin:15px auto 10px auto;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	text-align: left;
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #cccccc;
	border-left-color: #cccccc;
}
#tabla-resumen th{
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #cccccc;
	border-bottom-color: #cccccc;
	padding:5px 7px 5px 7px;
	color: #565656;
}
#tabla-resumen td{
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #cccccc;
	border-bottom-color: #cccccc;
	padding: 5px 7px 5px 7px;
	color: #565656;
}
#tabla-resumen .fondo{
	background-color: #cccccc;
	font-weight: bold;
	white-space: nowrap;
}
#tabla-resumen .sub-categoria{
	background-color: #eaeaea}