Foros del Web » Creando para Internet » CSS »

div v/s tabla

Estas en el tema de div v/s tabla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/12/2007, 08:33
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
div v/s tabla

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

Última edición por naf; 27/12/2007 a las 14:47
  #2 (permalink)  
Antiguo 25/12/2007, 17:24
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: div v/s tabla

perot e refieres a que seria lo mejor apra mostrar todos los campos? si meterlos en tablas o usar divs?
  #3 (permalink)  
Antiguo 27/12/2007, 14:52
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: div v/s tabla

Cita:
Iniciado por hades87 Ver Mensaje
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.
  #4 (permalink)  
Antiguo 27/12/2007, 15:04
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: div v/s tabla

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?
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #5 (permalink)  
Antiguo 04/01/2008, 10:38
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: div v/s tabla

Cita:
Iniciado por webosiris Ver Mensaje
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.
  #6 (permalink)  
Antiguo 04/01/2008, 12:42
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: div v/s tabla

n puedo ver ninguna web :S
  #7 (permalink)  
Antiguo 04/01/2008, 13:14
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: div v/s tabla

Intentalo de nuevo es que mi server, esta un poco lento.
  #8 (permalink)  
Antiguo 04/01/2008, 16:55
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: div v/s tabla

lo que quieres decir que si tiene resolución de pantalla pequeña la tabla no se ve entera de una tirada no?
  #9 (permalink)  
Antiguo 07/01/2008, 15:23
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: div v/s tabla

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.
  #10 (permalink)  
Antiguo 07/01/2008, 15:31
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: div v/s tabla

pon el codigo de la web y le echaremos un ojo
  #11 (permalink)  
Antiguo 08/01/2008, 07:00
naf
 
Fecha de Ingreso: agosto-2007
Ubicación: Chile
Mensajes: 23
Antigüedad: 10 años, 3 meses
Puntos: 0
Re: div v/s tabla

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}
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 21:43.