Foros del Web » Creando para Internet » CSS »

Cómo centro la página sin importar tamaño de pantalla?

Estas en el tema de Cómo centro la página sin importar tamaño de pantalla? en el foro de CSS en Foros del Web. Amigos del foro, vean que mi problema es este, ojalá me puedan ayudar: cómo 'fijo' los elementos de mi página para que aparezcan siempre 'centrados' ...
  #1 (permalink)  
Antiguo 27/02/2008, 10:47
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 11 años, 7 meses
Puntos: 1
Cómo centro la página sin importar tamaño de pantalla?

Amigos del foro, vean que mi problema es este, ojalá me puedan ayudar:
cómo 'fijo' los elementos de mi página para que aparezcan siempre 'centrados' en cualquier pantalla sin importar el tamaño de esta?
Mi código html es este:
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>.:: Bravo Studio | Gr&aacute;fico | Arquitect&oacute;nico | Fotograf&iacute;a | Imagen ::.</title>

<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">

<meta HTTP-EQUIV="Content-Script-Type" CONTENT="text/css">

<meta name="description" content="Diseno,Grafico,Fotografia,Internet">

<meta name="keywords" content="diseño,diseno,internet,web,interfase,fotografia,retoque,perspectiva,3d,cartel,carteles,flyer,imagen,identidad,publicidad,

campaña publicitaria, mala, yerba, malayerba, arquitectura, presentacion,packing,branding,booklet,editorial,ilustracion,render,rendering">

<link rel="STYLESHEET" type="text/css" href="bravo.css">
</head>

<body>

<center>
<table align="center" border="3" bordercolor="#333" cellpadding="0" cellspacing="0" width="1000" height="600">
<td align="center" valign="middle" width="1000" height="650">
<div id="logo">
<p><img src="logo.png">
</div>

<div id="menu">
<a href="home.htm" class="menutext">HOME</a> |

<a href="graf.htm" class="menutext">GRAFICO</a> |

ARQUITECTONICO |

<a href="foto.htm" class="menutext">FOTOGRAFIA</a> |

<a href="contac.htm" class="menutext">CONTACTO</a>
</p></div>

<div id="imgall">
<p><img src="imgarq.gif" vspace="20"></p>
</div>

<div id="menu2">
<p><a href="graf.htm"><img src="2graf.gif" vspace="10"></a>
<a href="foto.htm"><img src="2foto.gif"></a>
</p></div>

<div id="thumb">
<p><a href="arq1.htm"><img src="arq1.gif" vspace="9" hspace="2"></a>
<a href="arq2.htm"><img src="arq2.gif" vspace="9" hspace="2"></a>
<a href="arq3.htm"><img src="arq3.gif" vspace="9" hspace="2"></a>
<a href="arq4.htm"><img src="arq4.gif" vspace="9" hspace="2"></a>
<a href="arq5.htm"><img src="arq5.gif" vspace="9" hspace="2"></a>
<a href="arq6.htm"><img src="arq6.gif" vspace="9" hspace="2"></a>
<a href="arq7.htm"><img src="arq7.gif" vspace="9" hspace="2"></a>
<a href="arq8.htm"><img src="arq8.gif" hspace="2"></a>
<a href="arq9.htm"><img src="arq9.gif" hspace="2"></a>
<a href="arq10.htm"><img src="arq10.gif" hspace="2"></a>
<a href="arq11.htm"><img src="arq11.gif" hspace="2"></a>
<a href="arq12.htm"><img src="arq12.gif" hspace="2"></a>
<a href="arq13.htm"><img src="arq13.gif" hspace="2"></a>
<a href="arq14.htm"><img src="arq14.gif" hspace="2"></a>
</p></div>

<div id="click">
<p><a href="contac.htm"><img src="2contac.gif" vspace="10"></a>
</p></div>

<div id="info">
<p>Ilustraci&oacute;n, Packing, Booklet, Editorial, Identidad Corporativa, Re-Branding | 
Fotograf&iacute;a a Modelo, Publicitar&iacute;a, Paisaje, Retoque Fotogr&aacute;fico<br>
3D Arquitect&oacute;nico, Perspectiva, Rendering, Presentaci&oacute;n a Cliente | 
Dise&ntilde;o de Interfase, Proyecto Web, Programaci&oacute;n, Administraci&oacute;n de Portal<br>
<span>[email protected] | [55].5868.8090 | [04455].2768.8992</span>
</p></div>

<div id="anim">
<p><img src="anim.gif"></p></div>
</td>
</table>
</center>
</body>
</html>
... y mi código css es este:

Código:
/* CSS Document */

BODY {
background-color: #2d291c;
font: normal normal 11px/10pt Helvetica, Tahoma, Arial;
color: #d07614;
}
IMG {
border: 0;
text-decoration: none;
}
SPAN {
font: normal bold 11px/10pt Helvetica, Tahoma, Arial;
color: #d4ceaf;
text-align: center;
line-height: 15px;
}
#logo {
position: absolute;
z-index: 1;
width: 76px;
height: 75px;
top: 25px;
left: 335px;
}
#menu {
position: absolute;
z-index: 6;
width: 365px;
height: 10px;
top: 85px;
left: 429px;
}
#imgall {
position: absolute;
z-index: 2;
width: 545px;
height: 295px;
top: 125px;
left: 233px;
background-image: url(backall.gif);
background-repeat: no-repeat;
}
#menu2 {
position: absolute;
z-index: 4;
width: 100px;
height: 294px;
top: 125px;
left: 800px;
background-image: url(backmenu2.gif);
background-repeat: no-repeat;
}
#click {
position: absolute;
z-index: 7;
width: 70px;
height: 100px;
top: 450px;
left: 233px;
background-image: url(backclik.gif);
background-repeat: no-repeat;
}
#thumb {
position: absolute;
z-index: 5;
width: 462px;
height: 147px;
top: 450px;
left: 320px;
background-image: url(backthumb.gif);
background-repeat: no-repeat;
}
#anim {
position: absolute;
z-index: 3;
width: 100px;
height: 100px;
top: 450px;
left: 800px;
}
#info {
position: absolute;
z-index: 1;
width: 705px;
height: 40px;
top: 610px;
left: 213px;
text-align: center;
line-height: 13px;
}
#imgcontac {
position: absolute;
z-index: 2;
width: 150px;
height: 300px;
top: 115px;
left: 398px;
}
#formtext {
position: absolute;
z-index: 3;
width: 300px;
height: 300px;
top: 115px;
left: 560px;
}
a {
text-decoration: none; 
color: #bc2e00;
}
a:link {
color: #bc2e00;
}
a:visited {
color: #d07614;
}
a:hover {
color: #a97b00;
}
a:active {
color: #bc2e00;
}
...alguien puede ayudarme, porfa?. Gracias.
  #2 (permalink)  
Antiguo 27/02/2008, 12:58
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Re: Cómo centro la página sin importar tamaño de pantalla?

En este caso que la tabla es el contenedor principal, puedes hacerlo así:


Código HTML:
body {text-align: center;}  /* Esto es para que funcione con IE */

table { margin: 0 auto;  text-align: left;}

Última edición por pitufoweb; 27/02/2008 a las 13:05
  #3 (permalink)  
Antiguo 27/02/2008, 13:37
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 11 años, 7 meses
Puntos: 1
Re: Cómo centro la página sin importar tamaño de pantalla?

Gracias pitufoweb, ese código va en mi hoja de estilos, no es así.
Ahora, sino fuese 'una tabla' el contenedor, cómo se haría? yo encerré todo en una tabla para lograr el 'centrado'; pero supongo que hay mejores y óptimas maneras de hacerlo, no?
  #4 (permalink)  
Antiguo 27/02/2008, 14:14
Avatar de pitufoweb  
Fecha de Ingreso: enero-2008
Ubicación: Un Mundo Raro
Mensajes: 1.148
Antigüedad: 9 años, 10 meses
Puntos: 181
Re: Cómo centro la página sin importar tamaño de pantalla?

Pues en ves de la tabla pones un div y le pones una id para que le puedas pones los estilos.

Seria algo así:

Código HTML:
body {text-align: center;}  /* Esto es para que funcione con IE */

#contenedor { width:1000px; margin:0 auto;  text-align:left;  border: solid 3px #CCC;}

Código HTML:
<div id="contenedor">

aquí iría todo el contenido de la pagina.

</div> 
  #5 (permalink)  
Antiguo 27/02/2008, 14:14
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Cómo centro la página sin importar tamaño de pantalla?

pues peudes diseñar enteramente tu página con css, y al div contenedor ponerle un margin: auto.
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 27/02/2008, 16:06
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 11 años, 7 meses
Puntos: 1
Re: Cómo centro la página sin importar tamaño de pantalla?

Entonces:
1. Quiere decir que si yo pongo un div 'contenedor' y elimino la 'tabla' y la 'td', ese div 'contenedor' hará la misma función? la 'tabla' y la 'td' las puse para 'encerrar' y sobre todo 'centrar' en horizontal y vertical todos mis elementos.
2. Para qué manifestar 'margin: auto', qué función específica tiene en el caso?

Gracias pitufoweb y hades87, gracias.
  #7 (permalink)  
Antiguo 27/02/2008, 16:12
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Cómo centro la página sin importar tamaño de pantalla?

pues yo te desaconsejo encarecidamente uqe uses tablas apra el diseño, te recomendaría que te pasaras a diseñar en xhtml y css, el amrgin: auto, e centra la capa contenedor en la pantalla de cualquier ordenador, así tenga la resolución que tenga se vera centrado.
__________________
No diseñes usando tablas.
  #8 (permalink)  
Antiguo 27/02/2008, 16:47
 
Fecha de Ingreso: mayo-2006
Mensajes: 212
Antigüedad: 11 años, 7 meses
Puntos: 1
Re: Cómo centro la página sin importar tamaño de pantalla?

hades 87....excelente!!, funcionó óptimo. Muchas gracias!!
les dejo los códigos, en ellos (html) uso vspace para lograr centrar la imagen a su respectivo background, mismos que están encerrados en un div, igual les dejo el link para que chequen lo que apenas llevo de una de las páginas....

la página es http://www.demonpage.com.mx Porfavor critiquen mis códigos, eso me va a ayudar muchísimo...

y el código css es:

Cita:
/* CSS Document */

BODY {
text-align: center;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-position: bottom;
background-color: #1a1303;
font: normal normal 11px/10pt Helvetica, Tahoma, Arial;
color: #d07614;
}
IMG {
border: 0;
text-decoration: none;
}
SPAN {
font: normal bold 11px/10pt Helvetica, Tahoma, Arial;
color: #d4ceaf;
text-align: center;
line-height: 15px;
}
#contenido {
width: 1000px;
margin: 0 auto;
text-align: center;
}
#logo {
position: absolute;
z-index: 1;
width: 76px;
height: 75px;
top: 25px;
left: 285px;
}
#menu {
position: absolute;
z-index: 6;
width: 365px;
height: 10px;
top: 85px;
left: 379px;
}
#imgall {
position: absolute;
z-index: 2;
width: 545px;
height: 295px;
top: 125px;
left: 183px;
background-image: url(backall.gif);
background-repeat: no-repeat;
}
#menu2 {
position: absolute;
z-index: 4;
width: 100px;
height: 294px;
top: 125px;
left: 750px;
background-image: url(backmenu2.gif);
background-repeat: no-repeat;
}
#click {
position: absolute;
z-index: 7;
width: 70px;
height: 100px;
top: 450px;
left: 183px;
background-image: url(backclik.gif);
background-repeat: no-repeat;
}
#thumb {
position: absolute;
z-index: 5;
width: 462px;
height: 147px;
top: 450px;
left: 270px;
background-image: url(backthumb.gif);
background-repeat: no-repeat;
}
#anim {
position: absolute;
z-index: 3;
width: 100px;
height: 100px;
top: 450px;
left: 750px;
}
#info {
position: absolute;
z-index: 1;
width: 705px;
height: 40px;
top: 610px;
left: 163px;
text-align: center;
line-height: 13px;
}
#imgcontac {
position: absolute;
z-index: 2;
width: 150px;
height: 300px;
top: 115px;
left: 398px;
}
#formtext {
position: absolute;
z-index: 3;
width: 300px;
height: 300px;
top: 115px;
left: 560px;
}
A {
text-decoration: none;
color: #bc2e00;
}
A:link {
color: #bc2e00;
}
A:visited {
color: #d07614;
}
A:hover {
color: #a97b00;
}
A:active {
color: #bc2e00;
}
el código html es:

Cita:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>.:: Bravo Studio | Gr&aacute;fico | Arquitect&oacute;nico | Fotograf&iacute;a | Imagen ::.</title>

<meta HTTP-EQUIV="content-type" CONTENT="text/html; charset=ISO-8859-1">

<meta HTTP-EQUIV="Content-Script-Type" CONTENT="text/css">

<meta name="description" content="Diseno,Grafico,Fotografia,Internet">

<meta name="keywords" content="diseño,diseno,internet,web,interfase,foto grafia,retoque,perspectiva,3d,cartel,carteles,flye r,imagen,identidad,publicidad,

campaña publicitaria, mala, yerba, malayerba, arquitectura, presentacion,packing,branding,booklet,editorial,il ustracion,render,rendering">

<link rel="STYLESHEET" type="text/css" href="bravo.css">
</head>

<body>

<center>
<div id="contenido">

<div id="logo">
<p><img src="logo.png">
</div>

<div id="menu">
<a href="home.htm" class="menutext">HOME</a> |

<a href="graf.htm" class="menutext">GRAFICO</a> |

ARQUITECTONICO |

<a href="foto.htm" class="menutext">FOTOGRAFIA</a> |

<a href="contac.htm" class="menutext">CONTACTO</a>
</p></div>

<div id="imgall">
<p><img src="imgarq.gif" vspace="12"></p>
</div>

<div id="menu2">
<p><a href="graf.htm"><img src="2graf.gif" vspace="3"></a>
<a href="foto.htm"><img src="2foto.gif"></a>
</p></div>

<div id="thumb">
<p><a href="arq1.htm"><img src="arq1.gif" vspace="1"></a>
<a href="arq2.htm"><img src="arq2.gif" vspace="1"></a>
<a href="arq3.htm"><img src="arq3.gif" vspace="1"></a>
<a href="arq4.htm"><img src="arq4.gif" vspace="1"></a>
<a href="arq5.htm"><img src="arq5.gif" vspace="1"></a>
<a href="arq6.htm"><img src="arq6.gif" vspace="1"></a>
<a href="arq7.htm"><img src="arq7.gif" vspace="1"></a>
<a href="arq8.htm"><img src="arq8.gif"></a>
<a href="arq9.htm"><img src="arq9.gif"></a>
<a href="arq10.htm"><img src="arq10.gif"></a>
<a href="arq11.htm"><img src="arq11.gif"></a>
<a href="arq12.htm"><img src="arq12.gif"></a>
<a href="arq13.htm"><img src="arq13.gif"></a>
<a href="arq14.htm"><img src="arq14.gif"></a>
</p></div>

<div id="click">
<p><a href="contac.htm"><img src="2contac.gif" vspace="1"></a>
</p></div>

<div id="info">
<p>Ilustraci&oacute;n, Packing, Booklet, Editorial, Identidad Corporativa, Re-Branding |
Fotograf&iacute;a a Modelo, Publicitar&iacute;a, Paisaje, Retoque Fotogr&aacute;fico<br>
3D Arquitect&oacute;nico, Perspectiva, Rendering, Presentaci&oacute;n a Cliente |
Dise&ntilde;o de Interfase, Proyecto Web, Programaci&oacute;n, Administraci&oacute;n de Portal<br>
<span>[email protected] | [55].5868.8090 | [04455].2768.8992</span>
</p></div>

<div id="anim">
<p><img src="anim.gif"></p>
</div>

</div>

</body>
</html>
en éste es donde utilizo vspace para centrar las imágenes.

Gracias........

Última edición por emiliano espinosa; 27/02/2008 a las 17:02
  #9 (permalink)  
Antiguo 28/02/2008, 02:25
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Re: Cómo centro la página sin importar tamaño de pantalla?

mira todos los nombres los pondría en minúsculas en le css, y los background lso optimizaría así:

background: url(bg.jpg) repeat-x bottom #1a1303;

de esta forma te ahorras tiempo y espacio. Y en el html lo pondría todo en minúsculas menos el doctype.
__________________
No diseñes usando 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 10:35.