Posicion de una tabla

ananda · #1 (**permalink**) 01/05/2012, 01:21

Hola, he hecho una tabla en html para mostrar unos datos de la base de datos y no puedo posicionrla exactamente donde quiero. El problema es que al darle un margin-top al div que he creado se me pone un margin entre fila y fila de la tabla y yo quiero que haga el margin-top con la pagina para poder posicionar la tabla en el centro por ejemplo.

este es mi codigo:

Código PHP:

 
 <div class="divamigos1" name="divamigos1" id="divamigos1"> 
        <?php    
        $buscapara=mysql_query("SELECT * FROM registrados WHERE id='$para'",$conexion); 
        $fetchpara=mysql_fetch_array($buscapara); 
        $nombrepara=$fetchpara["nombre"]; 
        $apellidospara=$fetchpara["apellidos"]; 
        $idpara=$fetchpara["id"]; 
        ?> 
      
            <table name="amigos1" class="amigos1" id="amigos1"> 
             
         
    <tr> 
     
<td> 
<?php echo $nombrepara;?> <?php echo $apellidospara; ?> <a href="perfil.php?id=<?php echo $idpara;?>">IR</a> 
</td> 
</tr> 
            </table> 
        </div> 
   <?php 
    }

y este es el trozo de CSS que le corresponde:

Código PHP:

  .amigos1{ 
     
 
} 
 
.divamigos1{ 
     background-color: white; 
    border: 1px solid #22B14C; 
    margin-left: 22%; 
    margin-top: 5%; 
}

ananda · #2 (**permalink**) 01/05/2012, 06:01

Alguna idea???

chwc · #3 (**permalink**) 01/05/2012, 08:45

y por que no usas pixeles en vez de porcentaje ??
margin-top: 100px;

ananda · #4 (**permalink**) 01/05/2012, 11:53

Ya he probado de hacerlo en pixeles pero igualmente no puedo posicionar la dichosa tabla...

C2am · #5 (**permalink**) 01/05/2012, 18:18

Muestra el html generado por el php, no el php (además hay una } pero no veo donde abre).
Repito, muestra el html y el css completo, porque con lo pones de css no debería causarte problemas.
Saludos

ananda · #6 (**permalink**) 01/05/2012, 23:21

De acuerdo, gracias por interesarte, te dejo el código completo:

el código de la tabla

Código PHP:

  <?php 
session_start(); 
include('config.php');  
?> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 
<title>Mis amigos</title> 
<link rel="stylesheet" href="perfilcss.css" /> 
 
</head> 
<?php 
 
 
if(isset($_SESSION['correo'])){ 
 
$correouser=$_SESSION['correo']; 
 
 
 
$conexion=conectar(); 
$comprobacion1 = mysql_query("SELECT * FROM registrados WHERE correo='$correouser'",$conexion) or die ("Query Fallo".mysql_error()); 
            $row = mysql_fetch_array($comprobacion1); 
         
$nombresesion = $row["nombre"]; 
$apellidossesion = $row["apellidos"];  
$idsesion = $row["id"]; 
 
 
 
 
?> 
 
<body> 
 
<div id="menu" class="menu" > 
<input type="button" class="bmenu" onclick="location.href='miperfil.php'" value="Vipefy" /> 
<input type="button" class="bmenu" onclick="location.href='amigos.php'" value=" Mis amigos" /> 
<input type="button" class="bmenu" onclick="location.href='destruir.php'" value="Desconexión" /> 
<input type="button" class="bmenu" onclick="location.href='mensajes.php'" value="Mensajes" /> 
<input type="button" class="bnombre" value="<?php echo $nombresesion." ".$apellidossesion ?>" /> 
<input type="button" class="bmenuamis" onclick="location.href='newfriends.php'" value="Encontrar amistades" /> 
</div> 
 
 
<?php 
$amigoscole=mysql_query("SELECT * FROM amigos WHERE ((de = '$idsesion') OR (para = '$idsesion')) AND estado='2' ",$conexion); 
while ( $selecc= mysql_fetch_array($amigoscole)){ 
     
   $de=$selecc["de"]; 
   $para=$selecc["para"]; 
    
    if($de==$idsesion){ 
        ?> 
           <div class="divamigos1" name="divamigos1" id="divamigos1"> 
        <?php    
        $buscapara=mysql_query("SELECT * FROM registrados WHERE id='$para'",$conexion); 
        $fetchpara=mysql_fetch_array($buscapara); 
        $nombrepara=$fetchpara["nombre"]; 
        $apellidospara=$fetchpara["apellidos"]; 
        $idpara=$fetchpara["id"]; 
        ?> 
      
            <table name="amigos1" class="amigos1" id="amigos1"> 
             
         
    <tr> 
     
<td> 
<?php echo $nombrepara;?> <?php echo $apellidospara; ?> <a href="perfil.php?id=<?php echo $idpara;?>">IR</a> 
</td> 
</tr> 
            </table> 
        </div> 
   <?php 
    } 
     
if($para==".$idsesion."){ 
    ?> 
       <table name="amigos2" class="amigos2" value="Amigos"> 
    <tr> 
 
<td><a href="perfil.php?id=<?php echo $selecc['de']?>">IR</a></td> 
 
 
</tr> 
     
</table>  
   <?php  
} 
} 
 
 
}else { 
?> 
Esta sección es para usuarios, 
<a href="index.html">click aquí para iniciar sesión</a> 
 
</body> 
<?php 
} 
 
?> 
 
</html>

Y este es el CSS (es un poco largo, pero lo referente a la tabla está hacia el final)

Código PHP:

  .body { 
    background-color: #EBEBEB; 
} 
.logout { 
    background-color: black; 
    border-color: white; 
    border-width: 2px; 
    color: #FFC90E; 
    font-family: calibri; 
    font-size: 14px; 
} 
.menu { 
    background-color: #22B14C; 
    border: 2px solid #22B14C; 
    height: 30px; 
    left: 0; 
    position: fixed; 
    top: 0; 
    width: 1600px; 
} 
.bmenu { 
    background-color: #22B14C; 
    border: 2px solid #22B14C; 
    color: white; 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    height: 30px; 
    width: 120px; 
} 
.bnombre { 
    background-color: #22B14C; 
    border: 2px solid #22B14C; 
    color: white; 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    height: 30px; 
    position: fixed; 
    right: 15px; 
    top: 0; 
    width: 240px; 
} 
.envio { 
    background-color: white; 
    border: 4px solid #22B14C; 
    height: 345px; 
    margin-left: 54%; 
    margin-top: 10%; 
    width: 497px; 
} 
.campos { 
    margin-left: 23px; 
    margin-top: 11px; 
} 
.nombre { 
    background-color: #22B14C; 
    border: 2px solid #22B14C; 
    clear: both; 
    color: white; 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    height: 26px; 
    margin-left: 277px; 
    text-align: center; 
    width: 220px; 
} 
 
.menuvertical { 
    background-color: #22B14C; 
    height: 680px; 
    margin-left: -8px; 
    margin-top: -3%; 
    width: 147px; 
} 
 
 
.inpcurso { 
    background-color: #EBEBEB; 
    border: 2px solid black; 
    color: black; 
    font-size: 14px; 
    font-weight: bold; 
    height: 32px; 
    margin-top: 11%; 
    text-align: center; 
    width: 142px; 
} 
 
.curso { 
    color: white; 
    font-size: 14px; 
    font-weight: bold; 
    margin-left: 1%; 
    margin-top: 6%; 
    text-align: left; 
} 
.escuela { 
    color: white; 
    font-size: 14px; 
    font-weight: bold; 
    margin-left: 1%; 
    margin-top: 12%; 
    text-align: left; 
} 
.bmenuamis { 
    background-color: #22B14C; 
    border: 2px solid #22B14C; 
    color: white; 
    font-family: arial; 
    font-size: 14px; 
    font-weight: bold; 
    height: 30px; 
    width: 160px; 
} 
.buscaramigos { 
    background-color: white; 
    border: 1px solid #22B14C; 
    margin-left: 22%; 
    margin-top: 10%; 
    padding: 15px; 
} 
.nombreperf { 
    background-color: white; 
    border: 1px solid #22B14C; 
} 
.divnombre { 
    height: 40px; 
    margin-left: 40%; 
    margin-top: 2%; 
    text-align: center; 
    width: 200px; 
} 
.letrasol { 
    margin-left: 50%; 
    margin-top: 10%; 
    text-align: center; 
} 
.enviada { 
    background-color: white; 
    border: 3px solid red; 
    margin-left: 54%; 
    margin-top: -2%; 
    text-align: center; 
    width: 179px; 
} 
 
.divsoli { 
    height: 25px; 
    width: 426px; 
    margin-left:50%; 
    margin-top:10%; 
} 
.botonsoli { 
    background-color: white; 
    border: 1px solid red; 
} 
.divenviada { 
    margin-left: 41%; 
    margin-top: 2%; 
} 
.botonenv { 
    background-color: white; 
    border: 1px solid red; 
    width: 178px; 
} 
.divagregar { 
    height: 40px; 
    margin-left: 54%; 
    margin-top: -2%; 
    width: 178px; 
} 
.agregar { 
    background-color: white; 
    border: 1px solid red; 
    height: 34px; 
    width: 172px; 
} 
.botonamistad { 
    background-color: white; 
    border: 1px solid red; 
} 
.divamistad { 
    height: 23px; 
    margin-left: 54%; 
    margin-top: -2%; 
    width: 150px; 
} 
 
.selectcolegio{ 
    background-color: #EBEBEB; 
    height: 32px; 
    text-align: center; 
    width: 142px; 
} 
 
.cartelamigos{ 
 
    height: 40px; 
    margin-left: 23%; 
    margin-top: -12%; 
    text-align: center; 
    width: 184px; 
} 
 
.divsoli{ 
    margin-left: 385%; 
    margin-top: -45%; 
    text-align: center; 
    width: 386px; 
} 
 
.fotoenperfil { 
    border: 1px solid black; 
    height: 331px; 
    margin-left: 38%; 
    text-align: center; 
    width: 331px; 
} 
 
.fotoperfil { 
    border: 1px solid black; 
    height: 331px; 
    margin-left: 38%; 
    margin-top: 10%; 
    text-align: center; 
    width: 331px; 
} 
 
.novedades { 
    background-color: white; 
    border: 1px solid #22B14C; 
    margin-left: 2%; 
    margin-top: 2%; 
    padding: 4px; 
    width: 370px; 
} 
 
.fecha { 
    display: inline; 
    margin-left: 71%; 
} 
 
.titulo{ 
     
    text-align:center; 
    color:green; 
    font-weight:bold; 
} 
 
.titulonovedades { 
     
    color:green; 
    font-weight:bold; 
    font-size:20px; 
    margin-left:2%; 
    margin-top:5%; 
     
} 
 
.amigos1{ 
     
 border: 1px solid #22B14C; 
 margin-top:25px; 
} 
 
.divamigos1{ 
 
}

ananda · #7 (**permalink**) 02/05/2012, 12:36

Alguien puede ayudarme? Ya llevo dos días así....

C2am · #8 (**permalink**) 02/05/2012, 13:00

La etiqueta <table> me parece que no tiene el atributo value, value es solo para campos de formularios. creo.

Me parece que tu explicación no es del todo correcta, o yo no sigo entendiendo.
Dices:

Cita:

El problema es que al darle un margin-top al div que he creado se me pone un margin entre fila y fila de la tabla y yo quiero que haga el margin-top

Y mirando lo que publicas no tienes nada que afecte a las <tr> de la tabla (filas), o a <td> (celdas). Entonces se me ocurre que en realidad no es eso lo que quieres decir, o no muestra algo más que está afectando a las tablas.

Antes te pedí que no mostrarás php, solo el html. Entonces para eso lo que tienes que hacer es abrir tu página desde el navegador , click derecho - mostrar código fuente y luego copiar ese código.

Saludos.
PD: no desesperes, ten en cuenta que es un foro y la ayuda puede tardar. Entre más tarda es porque no te supiste explicar lo suficiente.

Si puedes dejar un enlace también es válido

ananda · #9 (**permalink**) 02/05/2012, 13:09

Hmm es posible que tengas razón, a ver, como lo explico. Tengo una tabla y automáticamente se pone arriba del todo y yo lo que quiero es que quede por ejemplo en el centro de la página, no arriba del todo pero al darle un margin-top lo que pasa es que se me hace un margen entre dato y dato de la tabla y no entre la página. Quiero que quede una tabla en el centro de la página, por ejemplo.

Espero haberme explicado, te dejo el código html.

Código PHP:

   
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
 
<title>Mis amigos</title> 
<link rel="stylesheet" href="perfilcss.css" /> 
 
</head> 
 
<body> 
 
<div id="menu" class="menu" > 
<input type="button" class="bmenu" onclick="location.href='miperfil.php'" value="Vipefy" /> 
<input type="button" class="bmenu" onclick="location.href='amigos.php'" value=" Mis amigos" /> 
<input type="button" class="bmenu" onclick="location.href='destruir.php'" value="Desconexión" /> 
<input type="button" class="bmenu" onclick="location.href='mensajes.php'" value="Mensajes" /> 
<input type="button" class="bnombre" value="Marc Ananda Moreno Mauri" /> 
<input type="button" class="bmenuamis" onclick="location.href='newfriends.php'" value="Encontrar amistades" /> 
</div> 
 
 
           <div class="divamigos1" name="divamigos1" id="divamigos1"> 
              
            <table name="amigos1" class="amigos1" id="amigos1"> 
             
         
    <tr> 
     
<td> 
Nombre4 <a href="perfil.php?id=5">IR</a> 
</td> 
</tr> 
            </table> 
        </div> 
              <div class="divamigos1" name="divamigos1" id="divamigos1"> 
              
            <table name="amigos1" class="amigos1" id="amigos1"> 
             
         
    <tr> 
     
<td> 
Nombre3 <a href="perfil.php?id=2">IR</a> 
</td> 
</tr> 
            </table> 
        </div> 
              <div class="divamigos1" name="divamigos1" id="divamigos1"> 
              
            <table name="amigos1" class="amigos1" id="amigos1"> 
             
         
    <tr> 
     
<td> 
Nombre2 <a href="perfil.php?id=3">IR</a> 
</td> 
</tr> 
            </table> 
        </div> 
              <div class="divamigos1" name="divamigos1" id="divamigos1"> 
              
            <table name="amigos1" class="amigos1" id="amigos1"> 
             
         
    <tr> 
     
<td> 
Nombre1 <a href="perfil.php?id=6">IR</a> 
</td> 
</tr> 
            </table> 
        </div> 
              <div class="divamigos1" name="divamigos1" id="divamigos1"> 
              
            <table name="amigos1" class="amigos1" id="amigos1"> 
             
         
    <tr> 
     
<td> 
Nombre <a href="perfil.php?id=4">IR</a> 
</td> 
</tr> 
            </table> 
        </div> 
    
</html>

Espero respuesta, muchas gracias por el interés.

C2am · #10 (**permalink**) 02/05/2012, 21:39

El problema es que tienes esta estructura:

Código HTML:

Ver original<div><table><tr><td>contenido</td></tr></table></div>
 
<div><table><tr><td>contenido</td></tr></table></div>
 
<div><table><tr><td>contenido</td></tr></table></div>
 
<div><table><tr><td>contenido</td></tr></table></div>

Es decir tienes tantos div como filas, lo cual no es problema de css, sino de una mala maquetación.
Suponiendo que por x causas seguimos con el div y dentro la tabla debería ser:

Código HTML:

Ver original<div>
<table>
<tr>
<td>contenido</td>
</tr>
<tr>
<td>contenido</td>
</tr>
<tr>
<td>contenido</td>
</tr>
<tr>
<td>contenido</td>
</tr>
 
</table>
</div>

Y si el contenido es solamente un listado de nombre y nada mas, yo dejaría de lado la tabla, y usaría una lista desordenada.

Código HTML:

Ver original<div>
<ul>
<li>contenido</li>
<li>contenido</li>
<li>contenido</li>
<li>contenido</li>
<li>contenido</li>
</ul>
</div>

Fijate que limpio que queda el código.

Es más si solo usas ese div para contener a la lista, habría que analizar si es necesario.

En resumen, el problema no es tanto el css, sino la forma en como tiene estructurada esa parte de tu html.

Saludos

ananda · #11 (**permalink**) 03/05/2012, 10:05

Muchisimas gracias, el problema estaba en, como tu has explicado perfectamente, la maquetación del CSS, me ha funcionado a la primera poniendo en práctica tu método, gracias.