pagina web centrada con CSS

[maswordpress]

tengo este código css en mi web y no se como ponerlo centrado al navegador.
alguien puede ayudarme...?

body {
background-color: #000000;
}


#cuerpo {
position:absolute;
left:0px;
top:0px;
width:1636px;
height:auto;
background-color: #000000;
}

#cabecera_ {
position:absolute;
left:353px;
top:0px;
width:906px;
height:381px;
background-color:#141414;
}
#piecabecera {
position:absolute;
left:386px;
top:381px;
width:71px;
height:5px;

}

#icono-servicio1_ {
position:absolute;
left:457px;
top:381px;
width:85px;
height:91px;
background-color:#141414;
}
#lineaseparador_ {
position:absolute;
left:698px;
top:381px;
width:1px;
height:91px;
}

#icono-servicio2_ {
position:absolute;
left:699px;
top:381px;
width:77px;
height:91px;
background-color:#141414;
}

#titulo-servicio2_ {
position:absolute;
left:776px;
top:381px;
width:152px;
height:38px;
background-color:#141414;
color: #ffa900;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
padding-top: 5px;
}
#lineaseparador2_ {
position:absolute;
left:928px;
top:381px;
width:1px;
height:101px;
}

#icono-servicio3_ {
position:absolute;
left:929px;
top:381px;
width:96px;
height:91px;
background-color:#141414;
}

#titulo-servicio1_ {
position:absolute;
left:542px;
top:381px;
width:156px;
height:35px;
background-color:#141414;
color: #ffa900;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
font-size: 90%;
padding-top: 5px;
}
#titulo-servicio3_ {
position:absolute;
left:1025px;
top:381px;
width:153px;
height:43px;
background-color:#141414;
color: #ffa900;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 90%;
padding-top: 5px;
}

#text-servicio1_ {
position:absolute;
left:542px;
top:406px;
width:91px;
height:66px;
background-color:#141414;
font-size: small;
color: #FFFFFF;
}

#precio-servicio1_ {
position:absolute;
left:633px;
top:419px;
width:65px;
height:65px;
}

#text-servicio2_ {
position:absolute;
left:776px;
top:418px;
width:87px;
height:54px;
background-color:#141414;
font-size: small;
color: #FFFFFF;
}

#precio-servicio2_ {
position:absolute;
left:861px;
top:419px;
width:67px;
height:64px;
}
#text-servicio3_ {
position:absolute;
left:1025px;
top:419px;
width:86px;
height:53px;
background-color:#141414;
color: #FFFFFF;
font-size: small;
}
#precioservicio3_ {
position:absolute;
left:1111px;
top:419px;
width:67px;
height:63px;
}
#trozohojasmall_ {
position:absolute;
left:776px;
top:464px;
width:85px;
height:9px;
}

#trozohoja_ {
position:absolute;
left:698px;
top:472px;
width:163px;
height:10px;
}

#buscadordominio_ {
position:absolute;
left:457px;
top:482px;
width:241px;
height:109px;
background-color:#141414;
}

#hoja_ {
position:absolute;
left:698px;
top:482px;
width:481px;
height:277px;
background-color:#141414;
}

#presupuesto_ {
position:absolute;
left:457px;
top:591px;
width:241px;
height:39px;
background-color:#141414;
}
#lineasuperior_ {
position:absolute;
left:457px;
top:630px;
width:241px;
height:10px;
background-image: url(images/lineasuperior.jpg);
}
#lineaizquierda_ {
position:absolute;
left:457px;
top:640px;
width:1px;
height:119px;
}




#titulo-ultimoproyectos_ {
position:absolute;
left:458px;
top:640px;
width:238px;
height:34px;
background-color:#141414;
color: #FFFFFF;
font-weight: bold;
font-size: 115%;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
line-height: 30px;
}
#lineaderecha_ {
position:absolute;
left:696px;
top:640px;
width:2px;
height:119px;
background-image: url(images/lineaderecha.jpg);
}




#link-ultimosproyectos_ {
position:absolute;
left:458px;
top:674px;
width:238px;
height:79px;
background-color:#141414;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-size: 80%;
text-align: center;
border-left-color: #00CC00;
}
#link-ultimosproyectos_ a:link, a:visited {
color: #ffa900;
font-family: Arial, Helvetica, sans-serif;
}
#link-ultimosproyectos_ a:visited {
color: #ffa900;
}
#link-ultimosproyectos_ a:hover {
color: #FFFFFF;
}


#lineabase_ {
position:absolute;
left:458px;
top:752px;
width:238px;
height:7px;
background-image: url(images/lineabase.jpg);
}

#etiqueta-publicidad_ {
position:absolute;
left:457px;
top:763px;
width:181px;
height:139px;
}
#footer_ {
position:absolute;
left:638px;
top:763px;
width:473px;
height:33px;
background-color:#FF8B00;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
padding-left: 10px;
padding-top: 5px;
}

#icon-gruponf_ {
position:absolute;
left:1111px;
top:763px;
width:68px;
height:33px;
background-color:#FF8B00;
}

#publicidad_ {
position:absolute;
left:638px;
top:796px;
width:540px;
height:106px;
background-color:#000000;
}
#text-servicio1_ a:link {
color: #747577;
padding-left: 3px;
font-size: 70%;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#text-servicio2_ a:link {
color: #747577;
padding-left: 3px;
font-size: 70%;
font-family: Geneva, Arial, Helvetica, sans-serif;
line-height: 180%;
}
#text-servicio3_ a:link {
color: #747577;
padding-left: 3px;
font-size: 70%;
font-family: Geneva, Arial, Helvetica, sans-serif;
}

#text-servicio1_ a:visited {
color: #747577;
padding-left: 3px;
font-size: 70%;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
#text-servicio2_ a:visited {
color: #747577;
padding-left: 3px;
font-size: 70%;
font-family: Geneva, Arial, Helvetica, sans-serif;
line-height: 180%;
}
#text-servicio3_ a:visited {
color: #747577;
padding-left: 3px;
font-size: 70%;
font-family: Geneva, Arial, Helvetica, sans-serif;
}


#text-servicio1_ a:hover {
color: #FFFFFF;
}
#text-servicio2_ a:hover {
color: #FFFFFF;
}
#text-servicio3_ a:hover {
color: #FFFFFF;
}

[xurxinho]

El problema es que tu para centrar la pagina estas utilizando posiciones absolutas con lo cual situas los contenedores en posiciones fijas de la pantalla con los cual no puedes centrar.

</head>
<style type="text/css">
#cuerpo {
position:absolute;
left:0px;
top:0px;
width:10px;
height:10px;
background-color: #000000;
}
</style>
</head>

<body style="padding:0px;margin:0px">
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border:1px solid #ca0000;position:relative"><tr><td>
<div id="cuerpo">hola</div>
</div>
</td></tr></table>
</body>
</html>

En este caso aparece una tabla centrada y el contendor cuerpo aparece dentor de la tabla en la posicion absuluta x,y. Para ubicar dentro de un contenedor un elemento este tiene que tener obligatoriamente su position en relative. Si yo a la tabla le quitase el atributo position:relative el cuadrado negro tomaría como referencia el punto x,y de la pantalla, es decir del body.

Pero si lo que quieres es centrar contenido con esto te llega


<body style="padding:0px;margin:0px">
<table border="0" cellpadding="0" cellspacing="0" align="center" style="border:1px solid #ca0000;width:800px"><tr><td>
bla bal balba b al
</td></tr></table>
</body>
</html>

[maswordpress]

puff, gracias xurxinho por contestarme.. la posición absolute me lo puso el photoshop, exporte directamente del photoshop al css, aunque lo meta en una tabla la web completa se mantiene en el mismo sitio, si le quito la posicion absolute algunos me funciona bien pero no todos...y hay divisiones que no tengo ni idea de como colocarlas si no es con el absolute.
no se si me explico....
:( adjunto pongo el html para que veas las div como van colocadas.

<body>
<div id="cuerpo">

<div id="cabecera_">
<img src="images/cabecera.jpg" />

</div>

<div id="piecabecera_">
<img id="piecabecera" src="images/piecabecera.jpg" width="71" height="5" alt="" /></div>
<div id="icono-servicio1_">
<img id="icono_servicio1" src="images/icono_servicio1.jpg" width="85" height="91" alt="" /> </div>
<div id="lineaseparador_">
<img id="lineaseparador" src="images/lineaseparador.jpg" width="1" height="91" alt="" /> </div>
<div id="icono-servicio2_">
<img id="icono_servicio2" src="images/icono_servicio2.jpg" width="77" height="91" alt="" /> </div>
<div id="titulo-servicio2_">servicio2</div>
<div id="lineaseparador2_">
<img id="lineaseparador2" src="images/lineaseparador2.jpg" width="1" height="101" alt="" /> </div>
<div id="icono-servicio3_">
<img id="icono_servicio3" src="images/icono_servicio3.jpg" width="96" height="91" alt="" /> </div>
<div id="titulo-servicio1_">servicio1 </div>
<div id="titulo-servicio3_">servicio3</div>
<div id="text-servicio1_">texto ...<br />
<br />
<img src="images/flecha.jpg" width="6" height="7" /><a href="link">M&aacute;s informaci&oacute;n</a> </div>
<div id="precio-servicio1_">
<img id="precio_servicio1" src="images/precio_servicio1.jpg" width="65" height="63" alt="desde 60&euro;" /> </div>
<div id="text-servicio2_">textg...
<img src="images/flecha.jpg" alt="" width="6" height="7" /><a href="link">M&aacute;s informaci&oacute;n</a></div>
<div id="precio-servicio2_">
<img id="precio_servicio2" src="images/precio_servicio2.jpg" width="67" height="60" alt="desde 198&euro;" /> </div>
<div id="text-servicio3_">texto<br />
<img src="images/flecha.jpg" alt="" width="6" height="7" /><a href="link">M&aacute;s informaci&oacute;n</a></div>
<div id="precioservicio3_">
<img id="precioservicio3" src="images/precioservicio3.jpg" width="67" height="60" alt="" /> </div>
<div id="trozohojasmall_"><img src="images/trozohojasmall.jpg" /></div>
<div id="trozohoja_"><img src="images/trozohoja.jpg" /></div>
<div id="buscadordominio_">
<img id="buscadordominio" src="images/busca.jpg" width="241" height="109" alt="" /> </div>
<div id="hoja_"><img src="images/hoja.jpg" name="hoja" width="481" height="277" id="hoja" /></div>
<div id="presupuesto_">
<img id="presupuesto" src="images/presupuesto.jpg" width="241" height="39" alt="" /> </div>
<div id="lineasuperior_"><img src="images/lineasuperior.jpg" /></div>
<div id="lineaizquierda_">
<img id="lineaizquierda" src="images/lineaizquierda.jpg" width="1" height="119" alt="" /> </div>
<div id="titulo-ultimoproyectos_">&iexcl;titulo!</div>
<div id="lineaderecha_">
<img id="lineaderecha" src="images/lineaderecha.jpg" width="2" height="119" alt="" /> </div>
<div id="link-ultimosproyectos_"> texto </div>
<div id="lineabase_"> <img src="images/lineabase.jpg" /> </div>
<div id="etiqueta-publicidad_">
<img id="etiqueta_publicidad" src="images/etiqueta_publicidad.jpg" width="181" height="139" alt="publicidad" /> </div>
<div id="footer_">texto<strong></strong> </div>
<div id="icon-gruponf_">
<img id="icon_gruponf" src="images/icon_gruponf.jpg" width="68" height="33" alt="" /> </div>
<div id="publicidad_"> </div>
</div>
</body>

[gVenom]

eso se soluciona asi: El photoshop te ha creado un div nombrado tabla_01 o algo asi, en posición absoluta, dentro de este se encuentra todo lo demás, solo cambia el absolute por relative, y le agregas margin:0 auto; y listo, todo debe estar centrado.

[maswordpress]

gracias gvenom he echo lo que me dices y sigue sin moverse :(

[maswordpress]

ya me ha funcionado!!!!!!!!!! tenias razon gvenom! muchas gracias.....me seguia sin funcionar porque el fallo quue he tenido k he diseñado la web en photoshop con 1636pixeles de ancho...y claro tenia div k aunque no haya nada el resto de las div me las mantenia en la misma posicion....he recortado el tamaño de la web y va a la perfeccion.
Valiente tonteria... que me ha echo perder tiempo.
Un saludo y muchisimas gracias ....sois unos cracks!!!

[maswordpress]

Una pregunta...porque cuando lo exporto del photoshop al css ...me añade a los nombres de las div un guion bajo......#nombredeladiv_ ?????

[safe]

creo que lo mas sencillo es agregar los siguientes estilos al body:

body {
background-color: #000000;
margin:0 auto;
position:relative;
width:1636px;
}

[maswordpress]

Gracias, si alguien ve en el codigo cosas mejorable, que puede estas mejor de otra forma me lo decis.

[Aresillo]

nunca un código será profesional cuando utilizas un programa que lo exporta y lo convierte. La única forma de solventar todos los errores es hacerlo a mano.
Lo que pasa es que cualquier programa mete un exceso de código y el caso que nos traes es uno de ellos..

[maswordpress]

aha ese lo entiendo, pero por me un ejemplo de lo que decis.

[maswordpress]

ya entiendo porque el photoshop incluye el guion bajo...para que la id de la div y la id de las fotos no sean la misma.Entonces le incluye un guion bajo al nombre de la div.

[maswordpress]

Aresillo una pregunta,,,, no es mas rápido exportar un diseño en photoshop a css con las posiciones de las div, y luego y depurando que hacerlo de cero?
como optimizarías ese código?

[dfiesta]

lo mas sencillo es agregar dentro del body en el css

body {

margin:0 auto;

}

y listo

[sbdesigner]

tenes que sacar el position:absolute y asigarme a la div contenedora margin:auto

[safe]

Iniciado por maswordpress

Aresillo una pregunta,,,, no es mas rápido exportar un diseño en photoshop a css con las posiciones de las div, y luego y depurando que hacerlo de cero?
como optimizarías ese código?

Ese codigo devuelto por photoshop no contiene ni una linea que se acerque al correcto uso del HTML. Osea, es un HTML que en si no significa nada, es codigo no semantico.
HTML es un lenguaje para estructurar informacion, la informacion en el 95% de los casos es texto. Aun cuando por cuestiones graficas necesites utilizar una imagen para mostrar un texto (por ejemplo, porque quieres usar una tipo X con un efecto X), en el codigo HTML tiene que estar el texto y despues por CSS reemplazas ese texto por la imagen (la famosa separacion de informacion y presentacion).
¿Porque digo que esa presencia del texto en el codigo es la correcta? porque ¿que pasa si alguien ingresa a tu web atraves de un dispositivo que no lee/muestra imagenes (por ejemplo, un lector de pantalla para ciegos)? si tu web solo son imagenes no "vería" nada.
Por lo tanto un ejemplo de como seria pasar un parte de tu web a un codigo HTML correcto seria cambiar esto:

Código HTML:

<div id="cabecera_">
  <img src="images/cabecera.jpg" />
</div> 

Por esto:

Código HTML:

 <h1 id="cabecera_">Nombre de tu web</h1> 

Y a esto ultimo mediante un CSS similar al siguiente lo reemplazas por una imagen:

Código HTML:

#cabecera_ { 
  background: url(images/cabecera.jpg) no-repeat; 
  height:50px; // El alto de la imagen
  text-indent:-9999px;
  width:230px; // El ancho de la imagen
}

De este modo si el dispositivo a traves del que se ve la web lee imagenes y lee estilos CSS se vera una imagen y sino se leera el texto.

Partiendo de esa base, en la que el codgio HTML no vale nada, no tiene ni sentido intentar mejorar el CSS. Ya que el CSS se utiliza para dar un aspecto visual a un codigo HTML correctamente estructurado.

Esta claro que estoy llevando este tema a un nivel mas avanzado y "filosofico" de lo que es el desarrollo web y que con codigos tan horribles como esos autogenerados puedes hacer una web y que nadie se entere o se queje.
Pero parece que recien estas comenzando con este tema, asi que creo que es el mejor momento para que empiezes a conocer la forma correcta de maquetar una web.

[maswordpress]

gracias SAFE por tu comentario, no conocerás una web que se hable de estos temas de optimizacion del codigo css y html.
Me gustaria mejorar los códigos de mis webs.

[safe]

En estos mismos foros hay unas guias al respecto:

http://www.araudi.net/migracion/migr...sin_dolor.html
http://www.araudi.net/migracion/migr..._parte_II.html

Yo no los he leido, pero seguro que para comenzar son mas que suficiente.

[Aresillo]

yo sí que lo he leido y bueno, no se trata de optimización sino de una conversion de las antiguas tablas a css... lo que a él le vendría bien es leerse algún librillo de css
mira en librosweb.com el de introducción al css