centrar pagina web en todos los navegadores

[diapos_e]

Hola a todos,
Soy nueva en el foro, y necesito vuestros consejos.

No conozco mucho html ni css, estoy autodidacta y cada ves es mas dificil conseguir algo simple.
Estoy trabajando en esta pagina http://www.tufotografoenibiza.com/arquitectura.html y en mi ordenador se ve bien como en esta imagen

Ya no se que hacer, asi que les agradezco mucho cualquier consejo que pensais que me sirva.

Gracias.

Saludos,
Diana

[Triby]

De entrada, tienes muchos errores HTML que puedes revisar en: http://validator.w3.org/check?uri=ht...Inline&group=0

Aparte, las tablas no son adecuadas para estructurar una página, realmente necesitas buscar algún tutorial sobre maquetado con CSS.

Por cierto, bienbenida a FDW.

[andreslgo]

efectivamente la maquetacion en tablas no es la mejor, aunque muchas veces se ve mas sencillo. Si lo que queres es centrar la web en todos los navegadores debes trabajar con un div de un ancho fijo, que puede ser dado en px, em o % y en el css le agregas un margin: 0 auto; de esta manera queda centrado. Espero te sirva el tip, y cualquier cosa no dudes en preguntar que para eso estamos todos.

[diapos_e]

Iniciado por Triby

De entrada, tienes muchos errores HTML que puedes revisar en: [url]http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tufotografoenibiza.com% 2Farquitectura.html&charset=%28detect+automaticall y%29&doctype=Inline&group=0[/url]

Aparte, las tablas no son adecuadas para estructurar una página, realmente necesitas buscar algún tutorial sobre maquetado con CSS.

Por cierto, bienbenida a FDW.

Muchas gracias por los consejos y por la bienvenida, lo mirare en esa pagina.
Saludos!

[diapos_e]

Iniciado por andreslgo

efectivamente la maquetacion en tablas no es la mejor, aunque muchas veces se ve mas sencillo. Si lo que queres es centrar la web en todos los navegadores debes trabajar con un div de un ancho fijo, que puede ser dado en px, em o % y en el css le agregas un margin: 0 auto; de esta manera queda centrado. Espero te sirva el tip, y cualquier cosa no dudes en preguntar que para eso estamos todos.

No lo sabia, lo probare a ver como queda.

Muchas gracias ;)

[diapos_e]

Hola de nuevo,

Despues de vuestros consejos me he puesto a leer un poco en internet, y he hecho cambios. La unica cosa que no consiguo es centrar las imagenes de la galeria con el Diapos Estudio y el menu.
[URL="http://tufotografoenibiza.com/arquitectura3.html"]http://tufotografoenibiza.com/arquitectura3.html[/URL]

Os dejo una parte del css


#arquitectura1 {
position:absolute;
top:150px;
margin: 0 auto;
width:433px;
height:650px;
z-index:8;
visibility:visible;
}
#arquitectura2 {
position:absolute;
top:180px;
margin: 0 auto;
width:433px;
height:650px;
z-index:9;
visibility:hidden;
}
#arquitectura3 {
position:absolute;
top:150px;
margin: 0 auto;
width:650px;
height:433px;
z-index:10;
visibility:visible;
}

#marquitectura1 {
position:absolute;
margin-left:340px;
top:173px;
width:80px;
height:80px;
z-index:15;
background-color: #666;
visibility: visible;
}
#marquitectura2 {
position:absolute;
margin-left:440px;
top:173px;
width:80px;
height:80px;
z-index:16;
background-color: #666666;
visibility: visible;
}
#marquitectura3 {
position:absolute;
margin-left:340px;
top:276px;
width:80px;
height:80px;
z-index:17;
background-color: #666666;
visibility: visible;
}

body {
background-image: url();
background-color:#FFF;
text-align:center;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
body,td,th {
font-family: Verdana, Geneva, sans-serif;
color:#666;
}
a {
font-family: Verdana, Geneva, sans-serif;
}
p.ex1
{
text-align:center;
font-family:Verdana,Helvetica,Swiss;
font-size:11px;
color:#B7B7B7;
text-decoration:none;
}
p.menu
{
text-align:center;
font-family:Verdana,Helvetica,Swiss;
font-size:12px;
color:#888888;
text-decoration:none;
}

#arquitectura {
float:center;
top:188px;
width:160px;
height:160px;
z-index:22;
visibility: visible;
}

#books {
align:center;
top:188px;
width:160px;
height:160px;
z-index:56;
visibility: visible;
}
#eventos {
align:center;
top:280px;
width:160px;
height:160px;
z-index:57;
visibility: visible;
}
#restauracion_imagenes {
align:center;
top:280px;
width:160px;
height:160px;
z-index:58;
visibility: visible;
}

#div.container
{
text-align:center;
width:100%;
margin: 0 auto;
border:1px white;
line-height:150%;
}

#thumbnail
{
position:absolute;
top:100px;
width:130px;
margin-left: 10px;
border-left:0px solid gray;
padding:0;
}
#es {
position:absolute;
top:99px;
z-index:6;
visibility: visible;
margin-left: 400px;
}
#en {
position:absolute;
top:101px;
z-index:7;
visibility: visible;
margin-left: 435px;
}

a
{

width:12%;
text-decoration:none;
color:#505050 ;
background-color:white;
padding-top:0.3em;
padding-bottom:0.3em;
padding-right:0px;
padding-left:0px;
margin:0px;
}
ul
{
text-align:center;
top:12px;
width:100%;
padding:0px;
margin:0px;
list-style-type:center;
font-size:small;
color:#999999;
font-family:Verdana,Helvetica,Swiss;
padding-right:0px;
padding-left:0px;
}

li{text-align:center;display:inline;}
a:hover {background-color:white}
a.title {background-color:white}

.input {
text-decoration: none;
font-size: 11px;
font-family: Verdana,Helvetica,Swiss;
color: #000000;
background-color: #FEFEFE;
border: 1px solid #999;
border-color: #CCCCCC;
scrollbar-face-color:#EEEEEE;
scrollbar-arrow-color:#666666;
scrollbar-track-color:#FFFFFF;
scrollbar-shadow-color:#AAAAAA;
scrollbar-highlight-color:#FFFFFF;
scrollbar-3dlight-color:#888888;
scrollbar-darkshadow-Color:#888888;
}
div.titulo
{
text-align:center;
text-decoration:none;
letter-spacing:2.8px;
margin:0 auto;
clear:left;
font-size:22px;
font-family:"Trebuchet MS",Tahoma,Arial,Helvetica,Verdana;
color:#333;
background-color: #FFFFFF;
z-index:3;
}
div.gallery {
position:absolute;
float:left;
margin:0 auto;
}
div.footer {
text-align:center;
margin-top:300px;
font-family:Verdana, Geneva, sans-serif;
clear:both;
font-size:12px;
z-index:59;
visibility: visible;
vertical-align:bottom;
}

Les agradezco si le echariais un vistazo :)

Saludos

[loncho_rojas]

pero si en container le pones

#container
{

text-align:center;
width:100%;
margin:0 auto;
border:1px white;
line-height:100%;
}

nunca se ta va a centrar, ni aunque le pongas ALING en la etiqueta...

deberías poner un ancho fijo y ahi te va a funcionar el margin

#container
{

text-align:center;
width:850px;
margin:0 auto;
border:1px white;
line-height:100%;
}