Foros del Web » Creando para Internet » CSS »

problema con el centrado de los div

Estas en el tema de problema con el centrado de los div en el foro de CSS en Foros del Web. Hola a todos. Veréis, tengo un problema, y es que estoy empezando con css y no se me da nada bien. Quiero hacer una capa ...
  #1 (permalink)  
Antiguo 31/05/2009, 06:43
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
problema con el centrado de los div

Hola a todos.

Veréis, tengo un problema, y es que estoy empezando con css y no se me da nada bien. Quiero hacer una capa contenedora centrada, pero no lo consigo. Lo único que consigo es que la capa contenedora se me quede alineada a la izquierda. Adjunto mi código:


Código Css


body{
background-color:#000000;
text-align:center;/*Para IE*/
}

#fondo{
margin:0 auto;
padding:0;
text-align:left;
}


Código HTML


<div id="fondo"><img src="images/fondo.jpg" width="884" height="1012">
<div id="encabezado"><img src="images/encabezado_pricipal.jpg" width="686" height="118"></div>
</div>

He probado muchísimas cosas pero no consigo que se me centre y pueda verse centrado en todas las resoluciones. Alguien me puede echar una mano?Muchas gracias!
  #2 (permalink)  
Antiguo 31/05/2009, 07:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el centrado de los div

dale una anchura a #fondo ( pero que no sea 100%) y, aunque no es imprescindible, posición relativa (por si acaso )

El text-aling actúa sobre el alineado de los contenidos alojados dentro un contenedor, no sobre la ubicación de este contenedor respecto a sus ancestros.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #3 (permalink)  
Antiguo 31/05/2009, 07:44
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: problema con el centrado de los div

Muchas gracias por responder tan rápido. Le añadi un width y logro centrarlo, pero no en todas las resoluciones. Ese es mi quebradero de cabeza, conseguir hacerlo en todas. También añadí position:relative y lo prove sin el, pero es lo mismo una cosa que otra. Que puedo hacer?
  #4 (permalink)  
Antiguo 31/05/2009, 07:52
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.777
Antigüedad: 13 años, 4 meses
Puntos: 76
Respuesta: problema con el centrado de los div

Creo que lo que te falta es ponerle un "display: block" a #fondo. Yo lo hice así en esta web con este CSS.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #5 (permalink)  
Antiguo 31/05/2009, 07:58
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el centrado de los div

Hablamos de centrado en la horizontal ¿verdad? Porque si es también en la vertical las propiedades que se necesitan son alguna más.
copia y ejecuta en tu navegador algo tan básico como esto
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>enésima respuesta al centrado</title>
  4. <style type="text/css">
  5. * {margin: 0; padding: 0; border: 0; position:relative:}
  6. html, body {
  7. background-color: #fff;
  8. }
  9. #contenedor{
  10. width: 50%;
  11. background-color: #cdcdcd;
  12. margin: 0 auto;
  13. height: 400px;
  14. }
  15.  
  16. </head>
  17. <div id="contenedor">
  18. <p><a href="http://www.forosdelweb.com/f53/problema-con-centrado-div-704903/#post2938993" title="Y yo visitante tampoco volveré a hacer pregunta tan elemental">A los cielos pongo por testigos que no volveré a explicar cómo centrar con css</a></p>
  19. </div>
  20. </body>
  21. </html>

Y pásate por www.librosweb.es y haz de sus pdf sobre css tus libros de cabecera durante un pequeño tiempo

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 31/05/2009 a las 08:30
  #6 (permalink)  
Antiguo 31/05/2009, 08:14
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.777
Antigüedad: 13 años, 4 meses
Puntos: 76
Respuesta: problema con el centrado de los div

Kseso, tu firma está provocando un bucle infinito que provocará que el Universo se repliegue sobre sí mismo.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #7 (permalink)  
Antiguo 31/05/2009, 08:21
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el centrado de los div

Cita:
Iniciado por Defero.tk Ver Mensaje
Kseso, tu firma está provocando un bucle infinito que provocará que el Universo se repliegue sobre sí mismo.
Pero ese bucle y su repliegue se realiza justo en el centro del universo y sólo afecta a los elementos descentrados por incumplimiento de su promesa
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 31/05/2009 a las 08:31
  #8 (permalink)  
Antiguo 31/05/2009, 08:49
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: problema con el centrado de los div

Lo siento pero es que no lo consigo. Lo veo bien en mi navegador pero en otras resoluciones se ve rodado a la derexa
  #9 (permalink)  
Antiguo 31/05/2009, 09:15
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.777
Antigüedad: 13 años, 4 meses
Puntos: 76
Respuesta: problema con el centrado de los div

Pon un enlace a la web, para que veamos dónde está el problema.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #10 (permalink)  
Antiguo 31/05/2009, 09:46
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: problema con el centrado de los div

En un principio, si le pones el margin: 0 auto; que te ha dicho kseso? no deberías tener problemas.
__________________
No diseñes usando tablas.

Última edición por hades87; 31/05/2009 a las 15:47
  #11 (permalink)  
Antiguo 31/05/2009, 13:29
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el centrado de los div

Hola Zeross
Copia y pega todo mi código (y nada más que mi código) en un archivo de texto nuevo. Incluido el doctype.
Renómbralo a .html.
Ábrelo con tu navegador y redimensiona la ventana a la anchura que tú quieras (mayor a 2 px y en nº par de píxeles a tamaños ínfimos .

Va una cerveza virtual a ver si siempre se coloca o no en el centro. Del comportamiento del texto contenido no hablamos.

Ya nos dirás quién pone la cerveza.
Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 31/05/2009, 13:30
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problema con el centrado de los div

Hola:

Cita:
Iniciado por Defero.tk Ver Mensaje
Kseso, tu firma está provocando un bucle infinito que provocará que el Universo se repliegue sobre sí mismo.
Cita:
Iniciado por kseso? Ver Mensaje
Pero ese bucle y su repliegue se realiza justo en el centro del universo y sólo afecta a los elementos descentrados por incumplimiento de su promesa
¡Que filosóficos estais hoy!

Saludos.

  #13 (permalink)  
Antiguo 31/05/2009, 13:34
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problema con el centrado de los div

Hola Zeross:

Deberias poner al principio de todo del css lo siguiente:

Código:
* {
    padding: 0;
    margin:0 auto;
}
Lo que te hace un reseteo de todos los padding y margin de tu css, lo que te ayuda a eliminar los padding y margin por defecto de todos los navegadores.

Para tener más información al respecto buscate en google informacion sobre reset en css.

Saludos.

  #14 (permalink)  
Antiguo 31/05/2009, 13:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el centrado de los div

No Jomaruro.
No tiene porqué darle ese valore (margin: 0 auto) de forma universal. Seguramente le traerá muchos más problemas que otra cosa. Ya le coloco un "mini-reset" y le he dado a entender de la importancia del doctype.

Un saludo.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 31/05/2009, 14:49
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: problema con el centrado de los div

Hola:

Bueno, yo siempre lo pongo así y, que yo sepa, no me ha dado problemas. Pero sabes más que yo así que lo tendré en cuenta a partir de ahora. ¡Gracias!

Saludos.

  #16 (permalink)  
Antiguo 31/05/2009, 17:55
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: problema con el centrado de los div

Saludos. He probado nuevamente con el código de Kseso? y me funciona, en varias resoluciones, pero en concreto, en la resolución 1024 - 768 no me funciona(y supongo que habrá algunas mas, pero no lo he comprobado). En el código le he añadido al body la propiedad text-align:center; y en el nombre de la capa text-align:left, para que pueda verse en IE y me funciona correctamente, pero como ya os he dicho, no en esa resolución. Voy avanzando poco a poco xDD. Como podría verlo por fin todo centrado en todas las resoluciones?
  #17 (permalink)  
Antiguo 31/05/2009, 18:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el centrado de los div

Cita:
Iniciado por zeross Ver Mensaje
... pero en concreto, en la resolución 1024 - 768 no me funciona(y supongo que habrá algunas mas, pero no lo he comprobado).

Lo siento, Zeross, pero no me lo creo que mi código (entero y sólo mi código) no centre ese contenedor en cualquier resolución (salvedad hecha de lo dicho anteriormente).
Y me gustaría ver una captura de pantalla en 1024px horizontales. Otra cosa muy distintas es cómo estés trasladándolo a tu código.

Para centrar tu página SÓLO tienes que colocar todo el contenido en una caja llamada #contenedor, RESPETA la propiedad "margin: X auto X auto;" y dale una anchura ya sean px, %, em o lo que quieras. Y déjate de tanto text-align y otras cosas por el estilo.

En lo que es y no es, te pongo una captura del código de referencia en 1024px de anchura. Lo único que he cambiado es el tamaño de la fuente para forzar varias líneas. Colocada en miniatura para no descuadrar el foro:
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #18 (permalink)  
Antiguo 31/05/2009, 18:54
Avatar de -Defero-
Colaborador
 
Fecha de Ingreso: julio-2004
Ubicación: Guipúzcoa
Mensajes: 4.777
Antigüedad: 13 años, 4 meses
Puntos: 76
Respuesta: problema con el centrado de los div

Repito lo que ya he dicho:

Cita:
Iniciado por Defero.tk Ver Mensaje
Pon un enlace a la web, para que veamos dónde está el problema.
Sin eso, lo demás es perder el tiempo, como hablar del sexo de los ángeles.
__________________
abogado en Errenteria + procuradora en San Sebastián = equipo imparable
  #19 (permalink)  
Antiguo 31/05/2009, 18:57
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: problema con el centrado de los div

Cuan aclarador ha resultado tu frase Defero.tk
__________________
No diseñes usando tablas.
  #20 (permalink)  
Antiguo 31/05/2009, 19:16
Avatar de Kenichi  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 160
Antigüedad: 8 años, 11 meses
Puntos: 6
Respuesta: problema con el centrado de los div

Buenas, lamento entrometerme en el tema pero veo que aun no se ha encontrado la solucion :-p
Una cosa muy simple es darle un width con % pero que no sea 100, como dijeron antes, y luego, agregarle un margen a la izquierda que sea la mitad de lo que le falta a ese width para llegar a 100, por ejemplo:

Código HTML:
<html>
<head>
<style type="text/css">
#div {
    width:90%;
    margin-left:5%;
}
</style>
</head>
<body>
<div id="div">Esto esta centrado</div>
</body>
</html> 
Asi queda centrado en forma horizontal y si no funciona, como ultimo recurso puedes usar <center> y </center> Aunque no lo recomiendo
  #21 (permalink)  
Antiguo 31/05/2009, 19:21
 
Fecha de Ingreso: septiembre-2008
Mensajes: 22
Antigüedad: 9 años, 2 meses
Puntos: 1
Respuesta: problema con el centrado de los div

si nada de eso sirve solo pega en tus css esto:

body { text-align:center; }

#divcentrado { margin: 0 auto 0 auto; width: tuanchopx; }

reemplaza #divcentrado por el div que quieras centrar y cambia tu ancho por el ancho de tu div y yap
  #22 (permalink)  
Antiguo 01/06/2009, 17:25
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: problema con el centrado de los div

Saludos a todos! Perdonar por la tardanza pero he estado trabajando y no he tenido tiempo de postear. He probado lo que me decís y nada. No puedo poner un enlace a la página porque estoy trabajando en localhost, pero os pondré unas capturas de pantalla de como lo veo en mi pc con mi resolución 1280x1024 y en la otra resolucion.

no me deja poner url. Si alguien es tan amable y las puede subir se las podría pasar por privado para que las puedan ver.


adjunto mi codigo


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "lo que va aquí lo tengo puesto pero no puedo poner url">
<html xmlns="lo que va aquí lo tengo puesto pero no puedo poner url">
<head>
<title>enésima respuesta al centrado</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; position:relative;}

html,body {
background-color: #000000;
text-align:center;
}

#fondo{
width: 66%;
margin: 0 auto;
text-align:left;
}
</style>
</head>
<body>
<div id="fondo">
<img src="images/fondo.jpg" width="865" height="871"> </div>
</body>
</html>


Qué hago mal?
  #23 (permalink)  
Antiguo 01/06/2009, 17:43
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problema con el centrado de los div

Cita:
<style type="text/css">
* {margin: 0; padding: 0; border: 0; position:relative;}

html,body {
background-color: #000000;
text-align:center;
}

#fondo{
width: 66%;
margin: 0 auto;
text-align:left;
}
</style>
</head>
<body>
<div id="fondo">
<img src="images/fondo.jpg" width="865" height="871" /> </div>
</body>
</html>
Éste ya no es el código que yo te daba como ejemplo. Has añadido un elemento en el html (que por cierto, dejas sin cerrar la etiqueta imag: /> )
Y ¿cómo debe gestionar #fondo el hecho de que su contenido sea mayor que él mismo? 1280px-(laterales del navegador)*0.66<865 px (anchura de la imagen).
Haz la prueba:
1ª: pon un background-color y un borde de un pixel a #fondo y después de ver dónde está colocado elimina la imagen. ¿adivinas la razón de que aparentemente no lo vieses centrado a partir de cierta resolución?

Para esos casos te conviene informarte sobre las propiedades "min-width" y "overflow"

el text-aling yo no lo usaría en esa caja, si en algún momento lo necesitase ya lo declararía exprésamente.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 01/06/2009 a las 18:06
  #24 (permalink)  
Antiguo 02/06/2009, 09:08
 
Fecha de Ingreso: mayo-2009
Mensajes: 13
Antigüedad: 8 años, 6 meses
Puntos: 0
Respuesta: problema con el centrado de los div

Saludos! Keseso? he mirado lo que me has dicho, y lo que hice fue redimensionar el width y el height de la capa #fondo al tamaño de la imagen. Por ahora me funciona, lo he estado probando en el trabajo. Cuando llegue a mi casa haré la prueba definitiva. Ya comentaré que tal. Muchas gracias por todo!
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

SíEste tema le ha gustado a 3 personas




La zona horaria es GMT -6. Ahora son las 19:57.