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 <a> 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.