Centrado de pagina, ayuda!!

belbe · #1 (**permalink**) 25/03/2009, 09:43

Hola a todos? Como estan? esta muy bueno este foro.
Disculpen la molestia pero necesito su ayuda urgente.
Como centro esta pagina por css? ya he intentado de todo y no se centra. Aqui les envio el codigo:

table { border:0px; border-collapse:collapse ; width:100%}
td {vertical-align:top; padding:0px; }

td, table, select, input, textarea{
font-family:tahoma;
font-size:11px;
vertical-align:top;
line-height:14px;
color:#3D250D
}

form { margin:0 auto;text-align:center;
padding:0px}
body { margin:0 auto 0 auto;text-align:center;
padding:0px; background:#F2F2EA}

#menu { margin: 0 auto;
text-align:left;
width:766px; }

.bg{ background:url(images/header.jpg) no-repeat}
.bg1{ background:url(images/bg.gif) repeat-x}
.bg2{ background:url(images/menu_rb1.jpg) no-repeat right bottom}
.bg2_1{ background:url(images/menu_rb2.jpg) no-repeat right bottom}
.bg2_2{ background:url(images/menu_rb3.jpg) no-repeat right bottom}
.bg2_3{ background:url(images/menu_rb4.jpg) no-repeat right bottom}
.bg3{ background:url(images/bg1.jpg) repeat}
.bg4{ background:url(images/bg3.jpg) repeat-x}
.bg5{ background:url(images/bg2.jpg) repeat-y}
.bg6{ background:url(images/bg4.jpg) repeat-x #C9C9C3}
.bg7{ background:url(images/bg5.jpg) no-repeat right top}
.bg8{ background:url(images/foot_bg.jpg) repeat-x}
.bg9{ background: url(images/foot_bg1.jpg) repeat}
.bg10{ background:url(images/foot_bg2.jpg) repeat-y}
.bg11{ background:url(images/bg6.jpg) repeat-x #b1c5d3}
.bg12{ background:url(images/px.gif) repeat-x}
.bg13{ background:#b8c6d4 url(images/bg5_1.jpg) no-repeat right top}
.bg14{ background:url(images/flash_bg1.jpg) no-repeat}
.bg15{ background:url(images/flash_bg2.jpg) no-repeat}
.bg16{ background:url(images/flash_bg3.jpg) no-repeat}
.bg17{ background:url(images/flash_bg4.jpg) no-repeat}
.bg18{ background:url(images/flash_bg5.jpg) no-repeat}

strong{ color:#004d96}

b{ color:#0d0906}

a{ color:#004d96; text-decoration:underline; font-weight:bold}
a:hover{ text-decoration:none}

b a{ color:#0D0906; text-decoration:underline}
b a:hover{ text-decoration:none}

strong a{ color:#3C3535; text-decoration:underline}
strong a:hover{ text-decoration:none}

span a{ color:#3D250D; text-decoration:underline; font-weight:normal}
span a:hover{ text-decoration:none}

span{ color:#004d96}

span b{ color:#FFF}

.list ul{margin:auto; padding:0px; list-style:none; line-height:14px}
.list ul li { background:url(images/list_bg.gif) no-repeat 0 6px; padding-left:13px}
.list ul li a{ color:#004d96; text-decoration: underline; font-size:11px; font-weight:normal}
.list ul li a:hover{ text-decoration: none}

.list1 ul{margin:auto; padding:0px; list-style:none; line-height:16px}
.list1 ul li { background:url(images/list_bg.gif) no-repeat 0 7px; padding-left:13px}
.list1 ul li a{ color:#004d96; text-decoration: underline; font-size:11px; font-weight:normal}
.list1 ul li a:hover{ text-decoration: none}

.indent{ padding:22px 44px 0 0; text-align:center}
.indent1{ padding:19px 17px 20px 28px}
.indent2{ padding:14px 12px 8px 12px}
.indent3{ padding:19px 16px 8px 27px}
.indent4{ padding:0 21px 16px 0}
.indent5{ padding:21px 17px 20px 28px}
.indent6{ padding:20px 21px 20px 0}

.footer{ color:#2C1A0C; background:url(images/bg7.jpg) no-repeat; text-align:center; height:65px; vertical-align:middle}
.footer a{ color:#2C1A0C; text-decoration:none; font-weight:normal}
.footer a:hover{ text-decoration:underline}
.footer span a{ color:#004d96; text-decoration:underline; font-weight:normal}
.footer span a:hover{ text-decoration:none}
.footer span{color:#FFF}

.form input {
width:208px;
height:25px;
color: #3D250D;
border:#3D250D 1px solid;
padding:3px 0 0 7px;
background-color:#F2F2EA;
}

.form textarea {
width:201px;
height:106px;
color: #3D250D;
overflow: auto;
border:#3D250D 1px solid;
padding:3px 0 0 7px;
background-color:#F2F2EA;
}

Dalvenjha · #2 (**permalink**) 25/03/2009, 09:54

o_O usa divs, y como quieres centrar la web si la tabla contenedora tiene width:100% -.- creo que deberías explicarte mejor.

Saludos!!

belbe · #3 (**permalink**) 25/03/2009, 19:16

Hola, si el diseño me queda todo como quiero pero pegada a la derecha y lo quiero centrado, como hago? Como uso divs? se muy poco de programacion, pero no soy nada malo con el diseño, veran, esta es la pagina:
clcoseca . com

Si se dan cuenta, esta todo a la derecha y lo quiero central, necesito una ayudita por favor, muchas gracias

Calizman · #4 (**permalink**) 25/03/2009, 23:03

Saludos!!

Luego de hora y media de estar esperando a que tu web termine de cargar (no fue hora y media, pero un par de minutos si...

) Encontre la solucion a tu problema.

Escribe esto en el CSS:

table {
margin: 0px auto;
text-align: center;
}

Seguro eso te sirve!! Hasta Luego!!

belbe · #5 (**permalink**) 25/03/2009, 23:48

Hola CaLiZzZ como estas?
Muchas gracias por tu sugerencia, la probe y si me centro la pagina pero ahora todo se ve mal.

Tambien estoy viendo como hacer que cargue menos, pero por ahorita necesito resolver lo del centrado. Muchas gracias por tu ayuda y la de todos y disculpen la molestia, y bueno sigo necesitando su ayuda para resolver este problema, pueden entrar a la pagina para que vean como se deberia ver, solo que no se centra. Gracias a todos.

Nuevamente la pagina es: clcoseca . com

Calizman · #6 (**permalink**) 25/03/2009, 23:58

Emm...

Tu pediste centrar la tabla no? bueeno... al fin no se que es lo que quieres hacer! si te sirve de algo esto, podrias hacer lo siguiente:

En el CSS agregas:

#wrap {
margin: 0px auto;
}

Y en el HTML justo despues del body escribes:

<div id="wrap">

y cierras antes de cerrar el body:

</div>

esto encerrará toda la web, y la centrará!

Espero que te sirva, Hasta Luego!!

belbe · #7 (**permalink**) 26/03/2009, 09:31

Hola CaLiZzZ, muchisimas gracias por tu ayuda!
Hize eso ultimo que me pusistes pero no paso nada : (
La pagina sigue toda hacia la izquierda como vistes en la pagina que te mande.
Lo que deseo es que todo el diseño este en el centro, lo primero que me pusistes funciono, pero el diseño se daño el fondo se veia gris y muchas otras cosas cambiaron de posicion.
Como hago? : ( como puedo centrar todo y que todo se quede en su posicion pero centrado y que el fondo siga siendo el mismo? : (
Gracias por toda su ayuda, espero puedan ayudarme un poquito mas, gracias!

gVenom · #8 (**permalink**) 26/03/2009, 09:45

usa lo que ya te dieron:

Código HTML:

table {
margin: 0px auto;
text-align: center;
}

pero sin el text-align.

Código HTML:

table {
margin: 0px auto;
}

eso centra la tabla con lo que tenga adentro, pero sin mover nada de adentro.

belbe · #9 (**permalink**) 26/03/2009, 10:38

Hola gVenom, gracias por tu respuesta.
Intente eso y no funciono, y me borro el fondo : (
Aqui esta como me quedo el codigo del inicio:

table { margin: 0px auto;
border:0px; border-collapse:collapse ; width:50%}
td {vertical-align:top; padding:0px; }

td, table, select, input, textarea{
font-family:tahoma;
font-size:11px;
vertical-align:top;
line-height:14px;
color:#3D250D

Pero sigue sin ponerse de manera central, y ademas me borro el fondo : (.
Que puedo hacer? Gracias por todo

gVenom · #10 (**permalink**) 26/03/2009, 11:19

pues a ver si este te sirve.

Código HTML:

#contenedor{
   position:relative;
   margin:0 auto;
}

eso en tu css. luego en el html:

Código HTML:

<div id="contenedor">

tu tabla comienza aqui

</div>

lo que hicimos es encerrar todo el contenido de tu web en un div, que debe aparecer centrado. No se que usas de fondo, pero si lo pones en la tabla no deberia pasarle nada.

Adryi19 · #11 (**permalink**) 26/03/2009, 11:41

esta mal toda la estructura si se fijan la anidacion lo que deberias hacer ala tabla principal darle un tamaño no del 100% si no un 95% y no te funciona por que las tablas estan mal anidadas y demora cargar tu pagina por lo que se tiene que redibujar las tablas

te recomiendo esta pagina :

documentoweb.com

de todas formas aqui te dejo el ejemplo amigo de como quedaria si das un valor de width menos del que tienes y con margin

img8.imageshack.us/img8/629/dibujovan.jpg

PD: no es bueno usar plantillas
eso creo

belbe · #12 (**permalink**) 26/03/2009, 11:52

Muchas gracias gVenom, intente eso que me dijistes pero no paso nada : /
Lo intente de esta forma, este es el comienzo de mi css:

#contenedor{
position:relative;
margin:0 auto;
}
table { border:0px; border-collapse:collapse ; width:100%}
td {vertical-align:top; padding:0px; }

td, table, select, input, textarea{
font-family:tahoma;
font-size:11px;
vertical-align:top;
line-height:14px;
color:#3D250D
}

form { margin:0px; padding:0px}
body { margin:0px; padding:0px; background:#F2F2EA}

#menu { width:766px; }

y ahi sigue...

Y puse esto en el html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="style.css" type="text/css" rel="stylesheet">

<style type="text/css">

</style><body>
<div id="contenedor">
<table style="height:100%">
<tr>
<td>

y ahi sigue y al final antes de cerrar el body, puse </div>

Pero no paso nada : / , que podria hacer ahora? sera que lo estoy poniendo mal?
Muchisimas gracias por tu ayuda, espero puedas seguirme ayudando y no ser una molestia, gracias.

ArturoGallegos · #13 (**permalink**) 26/03/2009, 11:57

mucho relajo para un centrado no e visto tu pagina pero por el código aquí te va esto

para empezar tu contenedor principal no debe tener el ancho al 100% de lo contrario nunca podrías hacer que se centre pon un 80% o en pixeles unos 900px lo que se ajuste a tu diseño

/* yo are el ejemplo suponiendo que tienes 900px de ancho */

luego para centrar ya sea capa o tabla agregale un id (ejem: id="pag_centrada")

y en tu css pones

#pag_centrada{position:absolute; left:50%; margin-left:-450px;}

y santo remedio con eso centras la pagina

lo que te mencionaron antes es lo mas común para centrar ... esto que pongo yo es el ultimo recurso que uso para no seguir atrasando proyectos

también puedes intentar esto

body{margin:0; padding:0;} tu estas usándolo con {margin:0 auto; padding:0 auto;}

ahí muchos que usan eso de 0 auto pero no se debe de hacer eso esta mal o usas uno o no usas nada

en caso de las capas se centran con agregar en el estilo "margin:auto" y las tablas con "align:center" y no text-aling

si no funciona el align:center en el css aplicalo directo a la tabla <table align="center">

sale pues que tengas mucha suerte

belbe · #14 (**permalink**) 26/03/2009, 12:30

Ok muchas gracias Adryi19 leere los links que me enviastes.
Lo que me dijo Ag666 funciono : D, pero solo ahora tengo un problema : / y es que el fondo que antes tenia que era azul, ya no esta ahora es algo gris, como arreglo eso? : ( se que he sido una molestia pero necesito su ayuda. Muchisimas gracias por todo : D

gVenom · #15 (**permalink**) 26/03/2009, 13:07

Ese color sale de aqui:

Código css:

Ver originalbody { margin:0px; padding:0px; background:#F2F2EA}

cambialo

belbe · #16 (**permalink**) 27/03/2009, 09:36

Hola mucha ayuda a todos por todo.
La pagina esta centrada, ahora tengo otro problema y es que cuando la centro y pongo el color de fondo parecido al que tenia antes mis dos cuadros que tengo del mismo color del fondo agarran ese color tambien (el color que le coloque al fondo). Como arreglo eso? que pasa?.
Aqui les paso la pagina para que la vean: clcoseca .com

Y aqui el script del html:

<style type="text/css">

</style><body>
<div id="pag_centrada">
<table style="height:100%">
<tr>
<td>
<table style="height:286px">
<tr>
<td class="bg">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http: //download.macromedia .com /pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,24"
width="766" height="286">
<param name="movie" value="flash/header_2_v8.swf?button=0">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="menu" value="false">

<object data="flash/header_2_v8.swf?button=0"
width="766" height="286" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="menu" value="false">
<param name="pluginurl" value="pagina macromedia">
FAIL (the browser should render some flash content, not this).
</object>

</object> </td>
<td style="width:100%" class="bg1"></td>
</tr>
</table> </td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="bg14">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="pagina macromedia=8,0,0,24"
width="766" height="50">
<param name="movie" value="flash/header_1_v8.swf?button=0">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="menu" value="false">

<object data="flash/header_1_v8.swf?button=0"
width="766" height="50" type="application/x-shockwave-flash">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<param name="menu" value="false">
<param name="pluginurl" value="pagina macromedia">
FAIL (the browser should render some flash content, not this).
</object>

</object> </td>
<td style="width:100%" class="bg3"></td>
</tr>
</table> </td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table style="width:738px; height:366px">
<tr>
<td style="width:247px">
<table>
<tr>
<td style="height:220px">
<div class="indent1">
<p class="form"><span class="style8">Quienes</span><span class="style7"> somos?</span><br>
<br style="line-height:19px">
<strong>C.L. Corretaje de Seguros, C.A. , Empresa fundada en el año 1992</strong><br>
<br style="line-height:4px">
inscrita bajo el N° 92-S-552 en el Ministerio de Hacienda, Superintendencia de Seguros,se complace en ofrecer sus servicios en su especialidad de asesoria e intermediación para sus necesidades de seguros.</p>
<p class="form"><span class="style2"><a href="index-1.html">Informese mas de nosotros por aqui</a></span><a href="index-1.html"><br>
</a><br style="line-height:21px">
<br>
</p>
</div> </td>
</tr>
<tr>
<td class="bg6">
<table style="height:146px" class="bg7">
<tr>
<td class="indent2">
<p><img src="images/p1_1.jpg" alt="" align="left" style="margin-right:18px">
<span class="style8">Corretaje en linea</span><br style="line-height:7px">
<br>
<br style="line-height:9px">
Desea saber todo sobre su poliza de manera online?<br>
<br style="line-height:19px">
<a href="un link a la intranet"><img src="images/more_info.jpg" alt="" border="0"></a><br>
</p> </td>
</tr>
</table> </td>
</tr>
</table> </td>
<td style="width:491px">
<table>
<tr>
<td style="height:219px" class="bg11">
<div class="indent3"><span class="style8">Nuestra<span class="style7">mision</span></span><br>
<br style="line-height:19px">
<table style="width:448px">
<tr>
<td style="height:80px; width:234px">
<div class="indent4">
<img src="images/p1_2.jpg" alt="" align="left" style="margin-right:17px">
<br style="line-height:4px">
<b><a href="#">Garantizar la mas alta satisfacción de nuestros clientes</a></b></div> </td>
<td style="height:80px; width:214px">
<p><img src="images/p1_3.jpg" alt="" align="left" style="margin-right:17px"><b><a href="#">Ofrecer la mas eficiente gestión y apoyo en el manejo de los siniestros</a></b></p> </td>
</tr>
<tr>
<td style="height:57px; width:234px">
<div class="indent4">
<img src="images/p1_4.jpg" alt="" align="left" style="margin-right:17px">
<br style="line-height:4px">
<b><a href="#">Proporcionar asesoria técnica </a></b></div> </td>
<td style="height:57px; width:214px">
<img src="images/p1_5.jpg" alt="" align="left" style="margin-right:17px">
<b><a href="#">Ofrecer un equipo humano especializado, comprometido con la filosofía de calidad de servicio y apoyado en tecnología de punta</a></b></td>
</tr>
</table>
</div> </td>
</tr>
<tr>
<td style="height:147px" class="bg12">
<br style="line-height:20px">
<img src="images/spacer.gif" alt="" width="28" height="1"><span class="style9">Nuestra<strong><span class="style7">vision</span></strong></span><br>
<br style="line-height:12px">
<table style="width:470px">
<tr>
<td style="width:130px">
<img src="images/p1_6.jpg" alt="" style="margin-left:8px"> </td>
<td style="width:340px" class="list">
<p><b>Ser la mejor empresa de Corretaje de Seguros a nivel nacional, que garantice tranquilidad y protección, satisfaciendo la necesidades de seguros del mercado</b><br style="line-height:10px">
</p>
<ul>
<li><a href="#">Adecuados planes y coberturas.</a></li>
<li><a href="#"> Generar altos niveles de satisfacción a nuestros clientes , empleados y accionistas. </a></li>
</ul> </td>
</tr>
</table> </td>
</tr>
</table> </td>
</tr>
</table> </td>
<td style="width:28px" class="bg5"><img src="images/spacer.gif" alt="" width="28" height="1"><br></td>
<td style="width:100%" class="bg3"></td>
</tr>
</table> </td>
</tr>
<tr>
<td style="height:14px" class="bg4"></td>
</tr>
<tr>
<td>
<table>
<tr>
<td>
<table style="width:738px" class="bg10">
<tr>
<td class="bg8">
<table>
<tr>
<td class="footer"><p><a href="index-1.html">Nosotros</a><img src="images/spacer.gif" alt="" width="13" height="1"><span>:</span><img src="images/spacer.gif" alt="" width="13" height="1"><a href="index-2.html">Ubicacion</a><img src="images/spacer.gif" alt="" width="13" height="1"><span>:</span><img src="images/spacer.gif" alt="" width="13" height="1"><a href="index-4.html">Aseguradoras</a><img src="images/spacer.gif" alt="" width="13" height="1"><span>:</span><img src="images/spacer.gif" alt="" width="13" height="1"><a href="index-5.html">Noticias </a><span>:</span><img src="images/spacer.gif" alt="" width="13" height="1"><a href="index-6.html"> Contactos </a><span>:</span><img src="images/spacer.gif" alt="" width="13" height="1"><a href="index.html">Home</a></p>
<p><br>
CL Corretaje© 2008 | <span><a href="index-7.html">Privacy policy</a></span> </p></td>
</tr>
</table> </td>
</tr>
</table> </td>
<td style="width:28px" class="bg9"></td>
<td style="width:100%" class="bg9"></td>
</tr>
</table> </td>
</tr>
<tr>
<td style="height:100%">
<table style="height:100%">
<tr>
<td style="width:738px" class="bg10"><img src="images/spacer.gif" alt="" width="738" height="1"><br></td>
<td style="width:100%" class="bg9"></td>
</tr>
</table> </td>
</tr>
</table>
</body>
</html>

ArturoGallegos · #17 (**permalink**) 27/03/2009, 15:26

consejo amigo cuando pidas ayuda con algo especifico como en este caso tus tablas pon el código que usas para la tabla y el css que le estas aplicando y no todo el código del sitio, así sera mas fácil ubicarnos para ayudarte.

coloca el código que ya tengas en tu sitio para verlo funcionando...

vi tu sitio y note colocaste el código que te había dicho tal cual, si observas bien tu sitio no esta centrado por que no es de 900px como yo dije en el ejemplo, ajusta ese dato...

en el flash de la cabecera tienes un grabe problema se muestra duplicado o no se como este no lo cheque pero se ve muy feo ese descuadre cuando carga, revisalo...

pie de pagina mismo problema de medidas no es igual al del contenido ajustalo para dar presentación

y por ultimo prueba colocar tu código así

.bg11{background: #b1c5d3 url(images/bg6.jpg) repeat-x;}

en todas tus lineas de css veo que la ultima instrucción la dejas volando y no pones el ";"

si no cierras correctamente con ese punto y coma el explorador nunca pasa a leer la siguiente instrucción... o bueno no se los demas miembos del foro que te puedan decir yo creo que ayi esta el problema.

si no funciona con eso prueba agregarle !important; y que quede asi
.bg11{background: #b1c5d3 url(images/bg6.jpg) repeat-x !important;}

y perdon por tanto choro jaja me emocione taba en un momento de ocio sin nada que hacer

belbe · #18 (**permalink**) 28/03/2009, 22:41

Hola Ag666 Como estas?
Nuevamente, muchisimas gracias por todo.
Lamentablemente aun no se arregla el fondo sigue siendo del color ese que es como blanco. Como lo arreglo? y cuando le pongo otro color los cuadros blancos todavia me siguen agarrando ese color.
Muchas gracias por todo amigos, su ayuda ha sido invaluable de verdad, gracias.