Foros del Web » Creando para Internet » CSS »

pagina web centrada con CSS

Estas en el tema de pagina web centrada con CSS en el foro de CSS en Foros del Web. tengo este código css en mi web y no se como ponerlo centrado al navegador. alguien puede ayudarme...? body { background-color: #000000; } #cuerpo { ...
  #1 (permalink)  
Antiguo 01/04/2009, 06:55
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
pagina web centrada con CSS

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;
}
  #2 (permalink)  
Antiguo 01/04/2009, 07:30
 
Fecha de Ingreso: marzo-2009
Mensajes: 171
Antigüedad: 8 años, 8 meses
Puntos: 4
Respuesta: pagina web centrada con CSS

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>
  #3 (permalink)  
Antiguo 01/04/2009, 09:45
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

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>
  #4 (permalink)  
Antiguo 01/04/2009, 10:04
Avatar de gVenom  
Fecha de Ingreso: julio-2008
Ubicación: Costa Rica
Mensajes: 1.455
Antigüedad: 9 años, 5 meses
Puntos: 53
Respuesta: pagina web centrada con CSS

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.
__________________
"Al que venciere y guardare mis obras hasta el fin, yo le daré autoridad sobre las naciones."
Apocalipsis 2: 26
Servicios para Pymes http://dst.co.cr
  #5 (permalink)  
Antiguo 01/04/2009, 10:46
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

gracias gvenom he echo lo que me dices y sigue sin moverse :(
  #6 (permalink)  
Antiguo 01/04/2009, 10:53
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

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!!!
  #7 (permalink)  
Antiguo 02/04/2009, 02:53
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

Una pregunta...porque cuando lo exporto del photoshop al css ...me añade a los nombres de las div un guion bajo......#nombredeladiv_ ?????
  #8 (permalink)  
Antiguo 02/04/2009, 18:47
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: pagina web centrada con CSS

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

body {
background-color: #000000;
margin:0 auto;
position:relative;
width:1636px;
}
__________________
oohh... quisiera ser godines!!!
  #9 (permalink)  
Antiguo 03/04/2009, 06:44
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

Gracias, si alguien ve en el codigo cosas mejorable, que puede estas mejor de otra forma me lo decis.
  #10 (permalink)  
Antiguo 03/04/2009, 06:57
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: pagina web centrada con CSS

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..
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #11 (permalink)  
Antiguo 03/04/2009, 09:06
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

aha ese lo entiendo, pero por me un ejemplo de lo que decis.
  #12 (permalink)  
Antiguo 03/04/2009, 09:10
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

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.
  #13 (permalink)  
Antiguo 03/04/2009, 09:12
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

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?
  #14 (permalink)  
Antiguo 03/04/2009, 10:35
 
Fecha de Ingreso: mayo-2007
Mensajes: 15
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

lo mas sencillo es agregar dentro del body en el css

body {

margin:0 auto;

}

y listo
  #15 (permalink)  
Antiguo 03/04/2009, 12:41
 
Fecha de Ingreso: febrero-2009
Mensajes: 7
Antigüedad: 8 años, 10 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

tenes que sacar el position:absolute y asigarme a la div contenedora margin:auto
  #16 (permalink)  
Antiguo 05/04/2009, 22:37
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: pagina web centrada con CSS

Cita:
Iniciado por maswordpress Ver Mensaje
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.
__________________
oohh... quisiera ser godines!!!
  #17 (permalink)  
Antiguo 07/04/2009, 10:03
 
Fecha de Ingreso: marzo-2009
Mensajes: 23
Antigüedad: 8 años, 9 meses
Puntos: 0
Respuesta: pagina web centrada con CSS

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.
  #18 (permalink)  
Antiguo 07/04/2009, 21:03
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: pagina web centrada con CSS

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.
__________________
oohh... quisiera ser godines!!!
  #19 (permalink)  
Antiguo 08/04/2009, 09:00
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: pagina web centrada con CSS

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
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
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:53.