Foros del Web » Creando para Internet » HTML »

Centrar una web html

Estas en el tema de Centrar una web html en el foro de HTML en Foros del Web. Hola, Estoy intentando centrar una página web hecha con Dreamweaver. Ésta tiene una foto de fondo y varias capas superpuestas, en las que hay texto ...
  #1 (permalink)  
Antiguo 25/12/2008, 18:45
 
Fecha de Ingreso: noviembre-2008
Mensajes: 62
Antigüedad: 9 años
Puntos: 0
Centrar una web html

Hola,

Estoy intentando centrar una página web hecha con Dreamweaver. Ésta tiene una foto de fondo y varias capas superpuestas, en las que hay texto y swf Flash.
Llevo dando vueltas por internet, hace horas, y lo he probado todo, pero no funciona. No sé si es que no pongo el código en el punto adecuado.

Lo de meterlo en una celda y centrarla no me vale, ya que no puedo (o no sé hacerlo) meter capas en la celda. Lo de la celda me funciona para webs hechas sólo con Flash, metiendo todo el archivo swf dentro. Pero no en este caso, diseñado con Dreamweaver con capas.

Os paso todo el código, para ver si alguien me puede ayudar y decirme dónde y qué debo meter, para que se centre la web, en cada ordenador de los usuarios que la visiten. Gracias:


<!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>
<title>Mi web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="Description" CONTENT="Esta es mi web">
<META NAME="Keywords" CONTENT="mi, web">
<style type="text/css">
<!--
#Layer2 {
position:absolute;
left:39px;
top:27px;
width:933px;
height:118px;
z-index:5;
}
body {
background-color: #F2F2F2;
background-image: url(imagenes/madera%20clara.jpg);
}
#Layer3 {
position:absolute;
left:341px;
top:27px;
width:631px;
height:100px;
z-index:6;
background-color: #000000;
}
#Layer4 {
position:absolute;
left:0px;
top:0px;
width:470px;
height:59px;
z-index:7;
}
#Layer5 {
position:absolute;
left:392px;
top:39px;
width:548px;
height:69px;
z-index:8;
}
#Layer6 {
position:absolute;
left:121px;
top:294px;
width:213px;
height:190px;
z-index:5;
}
.Estilo108 {
font-family: "Arial Narrow";
font-size: 10px;
}
#Layer7 {
position:absolute;
left:0px;
top:0px;
width:140px;
height:310px;
z-index:5;
}
#Layer8 {
position:absolute;
left:120px;
top:291px;
width:209px;
height:188px;
z-index:6;
}
#Layer9 {
position:absolute;
left:107px;
top:296px;
width:244px;
height:182px;
z-index:5;
}
#Layer10 {
position:absolute;
left:7px;
top:29px;
width:18px;
height:20px;
z-index:5;
}
#Layer11 {
position:absolute;
left:6px;
top:14px;
width:16px;
height:21px;
z-index:5;
}
#Layer12 {
position:absolute;
left:6px;
top:24px;
width:34px;
height:28px;
z-index:5;
}
#Layer13 {
position:absolute;
left:933px;
top:568px;
width:58px;
height:12px;
z-index:5;
}
#Layer14 {
position:absolute;
left:28px;
top:20px;
width:957px;
height:536px;
z-index:7;
}
.Estilo2 {
font-family: "Arial Narrow";
font-size: 36px;
font-weight: bold;
}
.Estilo3 {font-family: "Arial Narrow"; font-size: 36px; font-weight: bold; color: #330000; }
#Layer15 {
position:absolute;
left:46px;
top:221px;
width:360px;
height:325px;
z-index:9;
}
.Estilo6 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #330000; }
.Estilo8 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #D3B6A0;
}
.Estilo9 {
font-size: 16px;
color: #D3B6A0;
}
.Estilo10 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</style>
</head>

<body>
<div id="Layer13"><span class="Estilo108">Dise&ntilde;o: Casas </span></div>
<div id="Layer14">
<p align="center" class="Estilo2">&nbsp;</p>
<p align="center" class="Estilo3"><br />
<br />
<br />
<span class="Estilo8">(MIWEB)</span></p>
<p align="center" class="Estilo6"><span class="Estilo9">ESTA <br />
ES MI <span class="Estilo10">WEB</span></span><br />
</p>
</div>
<div id="Layer15">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="365" height="326">
<param name="movie" value="imagenes/Imagen4.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="imagenes/Imagen4.swf" width="365" height="326" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" ></embed>
</object>
</div>
<form action="" method="post" name="form1" id="form1">
</form>
<div id="Layer1" style="position:absolute; left:22px; top:16px; width:970px; height:546px; z-index:8;"><img src="imagenes/EL FONDO.jpg" width="970" height="546" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="29,139,113,172" href="http://www.miweb.es/web/contacta.html" />
<area shape="rect" coords="116,140,203,171" href="http://www.miweb.es/web/donde.html" />
<area shape="rect" coords="207,140,293,171" href="http://www.miweb.es/web/que.html" />
<area shape="rect" coords="298,141,385,171" href="http://www.miweb.es/web/album.html" />
</map></div>
</body>
</html>
  #2 (permalink)  
Antiguo 25/12/2008, 19:28
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Centrar una web html

Pues a ver que te responden, porque has posicionado la capas con absolute y claro es bastante más difícil... para hacerlo, requiere que rediseñes la web...

Aresillo!!
  #3 (permalink)  
Antiguo 26/12/2008, 11:07
 
Fecha de Ingreso: noviembre-2008
Mensajes: 62
Antigüedad: 9 años
Puntos: 0
Respuesta: Centrar una web html

Bueno, no sé otra manera de usar capas. Yo las voy dibujando, según necesito, encima del lienzo de diseño. ¿Hay otra manera?
  #4 (permalink)  
Antiguo 26/12/2008, 11:23
 
Fecha de Ingreso: agosto-2004
Mensajes: 265
Antigüedad: 13 años, 3 meses
Puntos: 0
Respuesta: Centrar una web html

en el apartado de css, de este foro, busca un tema, que habla de centrar una web en cualquier resolucion, y tienes la respuesta.

salu2
__________________
Recuerda que si señalas con el dedo, el resto de los dedos te señalan a ti!
  #5 (permalink)  
Antiguo 26/12/2008, 17:27
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Centrar una web html

Realmente posicionar todo como absoluto no es recomendable para nada. Pero viendo que ya lo tienes hecho asi y dudo que quieras modificarlo todo, creo que la unica solucion es agregar lo siguiente a los estilos del body:

margin:0 auto;
position:relative;
width:970px;

Seguramente tambien quieras cambiar y que el color de fondo (supongo que la imagen tambien) en vez de tenerla el body, la tenga el html.

Espero te sea de ayuda.
__________________
oohh... quisiera ser godines!!!
  #6 (permalink)  
Antiguo 27/12/2008, 17:33
 
Fecha de Ingreso: noviembre-2008
Mensajes: 62
Antigüedad: 9 años
Puntos: 0
Respuesta: Centrar una web html

Safe, quisiera probar lo que me dices, pero no estoy nada familiarizada con el código y me pierdo. Me ¿podríais decir dónde poner, exactamente, en el código de mi web que os he enviado, lo que me dice Safe?
  #7 (permalink)  
Antiguo 29/12/2008, 13:42
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Centrar una web html

Los cambios deberian ser los que a continuacion aparecen en negrita:

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>
<title>Mi web</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META NAME="Description" CONTENT="Esta es mi web">
<META NAME="Keywords" CONTENT="mi, web">
<style type="text/css">
<!--
#Layer2 {
position:absolute;
left:39px;
top:27px;
width:933px;
height:118px;
z-index:5;
}
html {
background-color: #F2F2F2;
background-image: url(imagenes/madera%20clara.jpg);
}
body {
margin:0 auto;
position:relative;
width:970px;
}
#Layer3 {
position:absolute;
left:341px;
top:27px;
width:631px;
height:100px;
z-index:6;
background-color: #000000;
}
#Layer4 {
position:absolute;
left:0px;
top:0px;
width:470px;
height:59px;
z-index:7;
}
#Layer5 {
position:absolute;
left:392px;
top:39px;
width:548px;
height:69px;
z-index:8;
}
#Layer6 {
position:absolute;
left:121px;
top:294px;
width:213px;
height:190px;
z-index:5;
}
.Estilo108 {
font-family: "Arial Narrow";
font-size: 10px;
}
#Layer7 {
position:absolute;
left:0px;
top:0px;
width:140px;
height:310px;
z-index:5;
}
#Layer8 {
position:absolute;
left:120px;
top:291px;
width:209px;
height:188px;
z-index:6;
}
#Layer9 {
position:absolute;
left:107px;
top:296px;
width:244px;
height:182px;
z-index:5;
}
#Layer10 {
position:absolute;
left:7px;
top:29px;
width:18px;
height:20px;
z-index:5;
}
#Layer11 {
position:absolute;
left:6px;
top:14px;
width:16px;
height:21px;
z-index:5;
}
#Layer12 {
position:absolute;
left:6px;
top:24px;
width:34px;
height:28px;
z-index:5;
}
#Layer13 {
position:absolute;
left:933px;
top:568px;
width:58px;
height:12px;
z-index:5;
}
#Layer14 {
position:absolute;
left:28px;
top:20px;
width:957px;
height:536px;
z-index:7;
}
.Estilo2 {
font-family: "Arial Narrow";
font-size: 36px;
font-weight: bold;
}
.Estilo3 {font-family: "Arial Narrow"; font-size: 36px; font-weight: bold; color: #330000; }
#Layer15 {
position:absolute;
left:46px;
top:221px;
width:360px;
height:325px;
z-index:9;
}
.Estilo6 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; color: #330000; }
.Estilo8 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
color: #D3B6A0;
}
.Estilo9 {
font-size: 16px;
color: #D3B6A0;
}
.Estilo10 {font-family: Verdana, Arial, Helvetica, sans-serif}
-->
</style>
</head>

<body>
<div id="Layer13"><span class="Estilo108">Dise&ntilde;o: Casas </span></div>
<div id="Layer14">
<p align="center" class="Estilo2">&nbsp;</p>
<p align="center" class="Estilo3"><br />
<br />
<br />
<span class="Estilo8">(MIWEB)</span></p>
<p align="center" class="Estilo6"><span class="Estilo9">ESTA <br />
ES MI <span class="Estilo10">WEB</span></span><br />
</p>
</div>
<div id="Layer15">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="365" height="326">
<param name="movie" value="imagenes/Imagen4.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="imagenes/Imagen4.swf" width="365" height="326" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent" ></embed>
</object>
</div>
<form action="" method="post" name="form1" id="form1">
</form>
<div id="Layer1" style="position:absolute; left:22px; top:16px; width:970px; height:546px; z-index:8;"><img src="imagenes/EL FONDO.jpg" width="970" height="546" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="29,139,113,172" href="http://www.miweb.es/web/contacta.html" />
<area shape="rect" coords="116,140,203,171" href="http://www.miweb.es/web/donde.html" />
<area shape="rect" coords="207,140,293,171" href="http://www.miweb.es/web/que.html" />
<area shape="rect" coords="298,141,385,171" href="http://www.miweb.es/web/album.html" />
</map></div>
</body>
</html>
__________________
oohh... quisiera ser godines!!!
  #8 (permalink)  
Antiguo 29/12/2008, 17:14
 
Fecha de Ingreso: noviembre-2008
Mensajes: 62
Antigüedad: 9 años
Puntos: 0
Respuesta: Centrar una web html

Safe, MUCHÍSIMAS GRACIAS! parece que sí funciona, al menos en mi portátil, donde me quedaba espacio a la derecha. Lo comprobaré también en cualquier otro ordenador diferente, aunque pinta bien.
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 23:56.