Foros del Web » Creando para Internet » CSS »

Posicion de una tabla

 Estas en el tema de Posicion de una tabla en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/05/2012, 01:21
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Posicion de una tabla
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%;
} 
  #2 (permalink)  
Antiguo 01/05/2012, 06:01
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Posicion de una tabla
Alguna idea???
  #3 (permalink)  
Antiguo 01/05/2012, 08:45
Avatar de chwc  
Fecha de Ingreso: julio-2008
Ubicación: Buenos Aires ! :D
Mensajes: 814
Antigüedad: 16 años, 3 meses
Puntos: 103
Respuesta: Posicion de una tabla
y por que no usas pixeles en vez de porcentaje ??
margin-top: 100px;
  #4 (permalink)  
Antiguo 01/05/2012, 11:53
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Ya he probado de hacerlo en pixeles pero igualmente no puedo posicionar la dichosa tabla...
  #5 (permalink)  
Antiguo 01/05/2012, 18:18
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 10 meses
Puntos: 306
Respuesta: Posicion de una tabla
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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 01/05/2012, 23:21
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Posicion de una tabla
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{

} 
  #7 (permalink)  
Antiguo 02/05/2012, 12:36
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Posicion de una tabla
Alguien puede ayudarme? Ya llevo dos días así....
  #8 (permalink)  
Antiguo 02/05/2012, 13:00
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 10 meses
Puntos: 306
Respuesta: Posicion de una tabla
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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #9 (permalink)  
Antiguo 02/05/2012, 13:09
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Posicion de una tabla
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.
  #10 (permalink)  
Antiguo 02/05/2012, 21:39
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 10 meses
Puntos: 306
Respuesta: Posicion de una tabla
El problema es que tienes esta estructura:

Código HTML: 
Ver original
  1. <div><table><tr><td>contenido</td></tr></table></div>
  2.  
  3. <div><table><tr><td>contenido</td></tr></table></div>
  4.  
  5. <div><table><tr><td>contenido</td></tr></table></div>
  6.  
  7. <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
  1. <div>
  2. <table>
  3. <tr>
  4. <td>contenido</td>
  5. </tr>
  6. <tr>
  7. <td>contenido</td>
  8. </tr>
  9. <tr>
  10. <td>contenido</td>
  11. </tr>
  12. <tr>
  13. <td>contenido</td>
  14. </tr>
  15.  
  16. </table>
  17. </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
  1. <div>
  2. <ul>
  3. <li>contenido</li>
  4. <li>contenido</li>
  5. <li>contenido</li>
  6. <li>contenido</li>
  7. <li>contenido</li>
  8. </ul>
  9. </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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #11 (permalink)  
Antiguo 03/05/2012, 10:05
Avatar de ananda  
Fecha de Ingreso: enero-2012
Mensajes: 345
Antigüedad: 12 años, 10 meses
Puntos: 14
Respuesta: Posicion de una tabla
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.

Etiquetas: html, posicion, tabla, fondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 04:45.