Foros del Web » Creando para Internet » CSS »

Centrar una tabla

Estas en el tema de Centrar una tabla en el foro de CSS en Foros del Web. Hola a todos, Estoy armando una pagina de a poco, probando codigos CSS, jQuery, etc... Y tengo un pequeño problema con una tabla de 3 ...
  #1 (permalink)  
Antiguo 12/09/2010, 18:02
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Centrar una tabla

Hola a todos,

Estoy armando una pagina de a poco, probando codigos CSS, jQuery, etc...

Y tengo un pequeño problema con una tabla de 3 botones, que esta alineada hacia la izquierda... y lo que quiero es centrarla en el medio de la pantalla. Antes la tenia centrada pero se que lo estaba haciendo mal ya que solo lo veia yo centrado, en cambio otras personas con otras resoluciones la veian mal (lo hacia con margin-left).

La verdad que probe varias cosas y no logro que quede centrada...

En fin, aca les dejo una imagen de como se ve la pagina:



Y aca les dejo el codigo de la pagina:

Código:
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>TEST</title> 

<script type="text/javascript" src="greybox/AJS.js"></script> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.jgrowl.js"></script>

<link rel="stylesheet" type="text/css" href="jquery.jgrowl.css" />

<script type="text/javascript"> 
        var GB_ROOT_DIR = "./greybox/";
    </script> 
 
<script type="text/javascript" src="greybox/AJS_fx.js"></script> 
<script type="text/javascript" src="greybox/gb_scripts.js"></script> 
<link href="greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" /> 
 
</head> 
<body> 

<script type="text/javascript"> 
$(document).ready(function() {
	
	$("ul.gallery li").hover(function() { //On hover...
		
		var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
		
		//Set a background image(thumbOver) on the &lt;a&gt; tag 
		$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
		//Fade the image to 0 
		$(this).find("span").stop().fadeTo('normal', 0 , function() {
			$(this).hide() //Hide the image after fade
		}); 
	} , function() { //on hover out...
		//Fade the image to 1 
		$(this).find("span").stop().fadeTo('normal', 1).show();
	});
 
});
 
</script>

<style type="text/css">
body {
	background-color: #E6E6E6;
	margin: 0;
	padding: 0;
	font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}

img {border: none;}

ul.gallery {
	width: 100%;
	//list-style: none;
	//margin-top: 50px;
	//margin: 0 auto;
	padding: 0;
}

ul.gallery li {
	float: left;
	margin: 15px; padding: 0px;
	text-align: center;
	display: inline; /*--Gimp Fix aka IE6 Fix--*/
	//border: 1px solid black;
}

ul.gallery li a.thumb {
	width: 320px;
	height: 339px;
	padding: 5px;
	//border-bottom: 1px solid black;
	cursor: pointer;
}

ul.gallery li span { /*--Used to crop image--*/
	width: 320px;
	height: 339px;
	overflow: hidden;
	display: block;
}

ul.gallery li h2 {
	font-size: 1.5em;
	font-weight: normal;
	text-transform: uppercase;
	margin: 0px; padding: 0px;
	//background-color: black;
}

ul.gallery li a {
	text-decoration: none;
	font-weight: bold;
	display: block;
	color: #777;
}
 
.Estilo2 {font-size: 16px}

#contenido {
	width: 100%; 
	height: 100%; 
	display: block; 
	float: left; 
	padding: 0; 
	margin: 0; 
	border: 0; 
}
 
#footer {
	position:absolute;
	bottom:0px;
	width:100%;
	height: 200px;
}

#menuhoriz {
	//background:#000;
	//width: 380px;
	width: 35%;
	height: 75px;
	clear: both;
	color:white;
	border-bottom: 1px solid #ccc;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#footer-text {
	text-align: center;
	margin-top: 10px;
	color: grey;
}

#footer-text a {
	text-decoration: none;
	color: #0e5f89;
}

#footer-text a:hover {
	text-decoration: underline;
}

.icons {
	padding: 7px;
}

#header {
	width: 100%;
	height: 150px;
	background-color: grey;
	font-size: 40px;
	color: white;
	text-align: center;
}

.header-text {
	padding: 35px;
}

</style> 

</head> 
 
<body> 

<div id="contenido">
<!-- <center><h1>Venta de Next-Version</h1></center> -->
<div id="header">
<div class="header-text">HEADER</div>
</div>

<ul class="gallery">
	<li>
		<a onclick="$.jGrowl('En construccion!');" href="#" class="thumb"><span><img src="hardware.png" alt="" /></span></a>
		<h2 align="center"><a onclick="$.jGrowl('En construccion!');" href="#">Game Hosting</a></h2>
	</li>
	<li>
		<a onclick="$.jGrowl('En construccion!');" href="#" class="thumb"><span><img src="hardware.png" alt="" /></span></a>
		<h2 align="center"><a onclick="$.jGrowl('En construccion!');" href="#">Hardware</a></h2>
	</li>
	<li>
		<a onclick="$.jGrowl('En construccion!');" href="#" class="thumb"><span><img src="hardware.png" alt="" /></span></a>
		<h2 align="center"><a onclick="$.jGrowl('En construccion!');" href="#">Configuracion</a></h2>
	</li>
</ul>

</div>

<div id="footer">
<div id="menuhoriz">
	<span class="icons"><a target="_blank" href="http://www.facebook.com/pages/Next-Version/77381967482"><img src="icons/facebook.png" /></a></span>
	<span class="icons"><a target="_blank" href="http://twitter.com/nvnetgroup"><img src="icons/twitter.png" /></a></span>
    <span class="icons"><img src="icons/rss.png" /></span>
	<span class="icons"><a href="http://youtube.com" title="Youtube" rel="gb_page_fs[]"><img src="icons/youtube.png" /></a></span>
	<span class="icons"><a href="http://google.com.ar" title="Google" rel="gb_page_fs[]"><img src="icons/google.png" /></a></span>
</div>
<div id="footer-text">
Copyright © 2010 <a href="http://www.nv-arg.com.ar">Next-Version NetGroup</a>. Todos los derechos reservados<br />
<!-- <a onclick="$.jGrowl('Oh hi!');">Contacto</a> | Test | Test | Test -->
</div>

</body> 
</html>
Cabe aclarar que lo relacionado con la table es lo que vean sobre "gallery", asi no pierden el tiempo viendo codigo de mas.

De paso algunas otras optimizaciones en cuanto al codigo no vendrian nada mal =p.

Gracias de antemano.

PD: Estaba en duda si postearlo en CSS o en HTML... pero supongo que lo correcto es aca en CSS.
  #2 (permalink)  
Antiguo 12/09/2010, 18:43
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Centrar una tabla

Hola!

La cosa es simple, primero tienes que crear un div que abarque todo el ancho de la web y texto centrado:

Código HTML:
Ver original
  1. <div style="width:100%; text-align:center">

Tambien puedes usar el metodo de <center> Tu contenido </center>

Lo tendrías que poner arriba (<center>) y abajo (</center>) del codigo que desees centrar.

Espero que te sirva


Saludos
  #3 (permalink)  
Antiguo 13/09/2010, 05:13
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: Centrar una tabla

Muchas gracias.. pero no funciono. Y por ese motivo ya decidi no usar mas ese codigo (el de los 3 botones grandes), que lo habia sacado de un ejemplo de un efecto de jQuery y la verdad que era bastante incomodo trabajar con el.

Asi que en cuanto a los botones principales pienso armarlos de 0... mi pregunta es la siguiente:

Yo quiero dividir 3 partes horizontalmente (como estaban los 3 botones en el ejemplo) y hacerlo mediante porcentajes para que quede bien sin importar la resolucion... me podrian dar un ejemplo simple de como hacerlo? Yo mas o menos tengo una idea... una forma seria usando 3 divs, dandole float:left y demas. Pero no estoy del todo seguro, por eso un ejemplo me vendria perfecto para saber cual es la mejor forma de hacer esto... de todos modos ahora voy a ir probando y si me sale cualquier cosa edito.

PD: O incluso si tienen una pagina de ejemplo con 3 items divididos horizontalmente en toda la pantalla me vendria bien.
  #4 (permalink)  
Antiguo 13/09/2010, 05:23
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Centrar una tabla

Hola de nuevo!

Si me pasas tu dirección web (por comentario) puedo mirar a ver que es lo que falla.


Saludos
  #5 (permalink)  
Antiguo 13/09/2010, 05:36
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 9 años, 3 meses
Puntos: 20
Respuesta: Centrar una tabla

Cita:
Iniciado por Shaito Ver Mensaje
Lo tendrías que poner arriba (<center>) y abajo (</center>) del codigo que desees centrar.
El uso de la eqtiqueta <center> ya esta algo obsoleto y no se recomienda. Para centrar usa margin:0 auto;

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #6 (permalink)  
Antiguo 13/09/2010, 08:33
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: Centrar una tabla

Cita:
Iniciado por Shaito Ver Mensaje
Hola de nuevo!

Si me pasas tu dirección web (por comentario) puedo mirar a ver que es lo que falla.


Saludos
El tema es que ya esta... opte por usar otro metodo... removi los 3 botones que estaban en el medio de la pagina y lo que quiero saber ahora es como hacer 3 divisiones que ocupen entre las 3... el 100% de la pagina (en porcentajes para que quede bien en todas las resoluciones).

Cita:
Iniciado por Impostor Ver Mensaje
El uso de la eqtiqueta <center> ya esta algo obsoleto y no se recomienda. Para centrar usa margin:0 auto;

Saludos¡¡
Ah si, habia leido por ahi que esa etiqueta quedo obsoleta... y respecto al margin: 0 auto; si, me funciono en varias cosas excepto en esa tabla que tenia antes... como tenia un codigo un tanto molesto de manejar (para mi) decidi borrar esa parte y empezar de 0.

Y lo que quiero ahora es hacer lo que detalle arriba, en este post.

Gracias de antemano.
  #7 (permalink)  
Antiguo 13/09/2010, 08:39
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Centrar una tabla

Hola!

Pues puedes usar, a mi vista lo más apropiado para esta opción es una tabla. Pero una cosa, lo pongas como lo pongas si la resolución de la pantalla es muy grande... se va a ver feo tan separado:

<table style="width:100%">
<tr>
<td style="width:33%"></td>
<td style="width:33%"></td>
<td style="width:33%"></td>
</tr>
</table>

Es 33% pues juntos hacen un 99% que abarca de forma centrada (text-align:center) todo el ancho de la tabla en su interior.

La tabla general tiene un 100% para abarcar todo el ancho de la web.
  #8 (permalink)  
Antiguo 14/09/2010, 08:12
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: Centrar una tabla

Gracias... justo ayer que me quede sin internet me puse a toquetear y lo hice mas o menos de esa forma pero en mi caso con divs... esta mal?

Es decir, un div de 100% y 3 divs dentro de 33% cada uno.
  #9 (permalink)  
Antiguo 14/09/2010, 08:32
Avatar de Shaito  
Fecha de Ingreso: agosto-2010
Mensajes: 383
Antigüedad: 7 años, 4 meses
Puntos: 37
Respuesta: Centrar una tabla

Hola!

Si, igualmente esta bien, pero con los divs tienes que tener cuidado, si no entran en el ancho, el último se caerá se quedará abajo, a diferencia de las table que no hacen eso


Saludos

Etiquetas: tablas
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 18:35.