Foros del Web » Creando para Internet » CSS »

Posicionar dos divs debajo de dos tablas alineadas horizontalmente

Estas en el tema de Posicionar dos divs debajo de dos tablas alineadas horizontalmente en el foro de CSS en Foros del Web. Holas! No me acabado de salir con esto. Tengo dos tablas posicionadas una al lado de la otra (eso bien) dos float:left Pero cuando quiero ...
  #1 (permalink)  
Antiguo 26/05/2009, 14:56
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Posicionar dos divs debajo de dos tablas alineadas horizontalmente

Holas!

No me acabado de salir con esto.
Tengo dos tablas posicionadas una al lado de la otra (eso bien) dos float:left
Pero cuando quiero posicionar sus respectivos paginadores debajo de cada tabla no hay manera.

La imagen que quiero conseguir es
http://www.cuelgalo.com/viewer.php?i...90_2tablas.PNG

Tengo un div que envuelve las dos tablas y sus paginadores, la estructura es la siguiente.

Código css:
Ver original
  1. <div class="tabla1 general">
  2. <table id="mytable1" cellspacing="0" summary="Accesos Fallidos">
  3. </table>
  4. <div class="pagination">
  5. </div>
  6. <table id="mytable2" cellspacing="0" summary="Accesos General">
  7. </table>
  8. <div class="pagination">
  9. </div>
  10. </div>

Cómo lo puedo hacer? he jugado con el float en el paginador pero me lo pone arriba de la tabla 2, por lo que entiendo que a lo mejor se debe mostra la tabla 1 y dos y luego crear un div para los paginadores y alinearlos igual que las tablas? xD

Muchas gracias
  #2 (permalink)  
Antiguo 26/05/2009, 15:03
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Posicionar dos divs debajo de dos tablas alineadas horizontalmente

Quizás este ejemplo te pueda venir bien, fijate en el código y dentro de cada div pon tu tabla sin ningún estilo, no debería darte problemas y te deberían quedar bien
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 26/05/2009, 15:13
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Posicionar dos divs debajo de dos tablas alineadas horizontalmente

¿los ".pagination" son los bloques azules de la imagen?
Si es así, puedes hacer de 2 formas que se coloque bajo su tabla respectiva, creando antes un contenedor para cada una de las tablas y su paginador que yo llamo ".bloque", al que sólo tendrás que definirlo como elemento en línea y quizás añadirle algún margen por estética:
Opción una:
Código html:
Ver original
  1. <div class="tabla1 general">
  2. <div class="bloque">
  3. <table id="mytable1" cellspacing="0" summary="Accesos Fallidos">
  4. <div class="corte"></div>
  5. <div class="pagination">
  6. </div>
  7. <div>
  8. <div class="bloque">
  9. <table id="mytable2" cellspacing="0" summary="Accesos General">
  10. <div class="corte"></div>
  11. <div class="pagination">
  12. </div>
  13. <div>
  14. </div>
y en el css:
Código css:
Ver original
  1. .corte {clear: both;}

2ª Opción
Añade en tu css
Código css:
Ver original
  1. #mytable1, #mytable2 {clear: both;}

por cierto, no se si es error o realmente quieres hacerlo así (como no muestras el css...):
Código html:
Ver original
  1. <div class="tabla1 general">
¿quieres aplicar las dos clases a ese div o se te escapó un guión? (los identificadores no pueden contener espacios en blanco)

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 26/05/2009 a las 15:24
  #4 (permalink)  
Antiguo 26/05/2009, 17:20
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: Posicionar dos divs debajo de dos tablas alineadas horizontalmente

Hola, neodani. Cuánto tiempo sin verte.

Yo siguiendo la idea de kseso?, pero un poquillo simplificada, lo haría algo así:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-es" lang="es-es">
<head>
<style type="text/css">
.bloque {float: left;
width: 40%;
}
table {width: 90%;}
.pagination {background-color: #33f;
width: 100px;
height: 20px;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="tabla1">
<div class="bloque">
<table id="mytable1" cellspacing="0" summary="Accesos Fallidos" border="1">
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
</table>
<div class="pagination"></div>
</div>
<div class="bloque">
<table id="mytable2" cellspacing="0" summary="Accesos General" border="1">
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
<tr><td>&nbsp;</td></tr>
</table>
<div class="pagination"></div>
</div>
</div>
</body>
</html>
(meto unas celdas para que se vean las tablas)
  #5 (permalink)  
Antiguo 27/05/2009, 01:01
Avatar de neodani  
Fecha de Ingreso: marzo-2007
Mensajes: 1.811
Antigüedad: 10 años, 9 meses
Puntos: 20
Respuesta: Posicionar dos divs debajo de dos tablas alineadas horizontalmente

Cita:
Iniciado por Mikmoro Ver Mensaje
Hola, neodani. Cuánto tiempo sin verte.

Yo siguiendo la idea de kseso?, pero un poquillo simplificada, lo haría algo así:

(meto unas celdas para que se vean las tablas)
Buenas, antes de nada muchas gracias por las ideas.

He utilizado la base de Mikmoro funcionó a la perfección
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 08:31.