Foros del Web » Creando para Internet » CSS »

Problemas de centrado y height

Estas en el tema de Problemas de centrado y height en el foro de CSS en Foros del Web. Soy navatillo en lo del CSS, pero he comprobado que tiene algunos defectos por resolver en la compatibilidad de los diversos navegadores. El mayor problema ...
  #1 (permalink)  
Antiguo 09/01/2009, 04:30
 
Fecha de Ingreso: noviembre-2005
Mensajes: 86
Antigüedad: 12 años
Puntos: 0
Problemas de centrado y height

Soy navatillo en lo del CSS, pero he comprobado que tiene algunos defectos por resolver en la compatibilidad de los diversos navegadores.
El mayor problema que he visto es con el centrado, tanto de texto, como de imagenes, como de tablas o divs. En IE funciona sin problemas, pero en Firefox no centra nada.
El centrado de divs solo funciona con margin:0 auto; y en cuanto pones un margin-top o margin-left diferente ya no hay nada que hacer.
Otro defecto que veo es con el height. En las tablas funciona de maravilla con cualquier navegador, pero no sucede lo mismo con el CSS. Sin embargo el width va de maravilla.
¿Cómo os arreglais para solucionar estos problemas?
  #2 (permalink)  
Antiguo 09/01/2009, 05:19
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de centrado y height

Cita:
Iniciado por informa Ver Mensaje
Soy navatillo en lo del CSS, pero he comprobado que tiene algunos defectos por resolver en la compatibilidad de los diversos navegadores.
Exactamente al contrario, es decir, son los navegadores los que tienen defectos y problemas a la hora de interpretar CSS. Son ellos los que deben ser compatibles con CSS, no al contrario.

Cita:
Iniciado por informa Ver Mensaje
el mayor problema que he visto es con el centrado, tanto de texto, como de imagenes, como de tablas o divs. En IE funciona sin problemas, pero en Firefox no centra nada.
Iba a contestar a cada uno de los puntos, pero creo que debes leer un poco más antes de emitir semejantes juicios. No afirmes nada de lo que no estés completamente seguro. Has entendido algunas cosas exactamente al revés.

Si tienes alguna duda concreta plantéala y seguro que alguien se preta a ayudarte y explicarte.
__________________
Visita mi nueva web idplus.org

Última edición por Mikmoro; 09/01/2009 a las 10:51
  #3 (permalink)  
Antiguo 09/01/2009, 12:17
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Problemas de centrado y height

Yo si me tomare el tiempo de contestar cada uno de los puntos, ya que la incompatibilidad es uno de mis temas favoritos! y mas cuando el afectado es mi Fiel y Confiable amigo FireFox!
Cita:
Soy navatillo en lo del CSS, pero he comprobado que tiene algunos defectos por resolver en la compatibilidad de los diversos navegadores.
El mayor problema que he visto es con el centrado, tanto de texto, como de imagenes, como de tablas o divs. En IE funciona sin problemas, pero en Firefox no centra nada.
Estoy totalmente deacuerdo con Mik cuando dice que no saques jucios adelantados sin antes de estar completamente seguro de que tu jucio es veridico! te invitaria a que diseñaras una pagina solo para FireFox y que luego la vieras en IE e hicieras una para IE y la vieras en FF, te daras cuenta que no solo ese es el problema, sino que la realidad es que IE tiene tantos errores para entender el CSS que nos complica la vida a todos... y aunque FF no es ningun santo, es mucho mas facil hacer paginas para FF que para IE (sino porque crees que hay tantos hacks para IE 6 y 7, y hay menos para FF?)

Cita:
El centrado de divs solo funciona con margin:0 auto; y en cuanto pones un margin-top o margin-left diferente ya no hay nada que hacer.
El centrado de los divs no solo funciona con eso, tambien funciona con otras herramientas como el tan usado text-align: center y un margin: auto al div que quieres centrar... pero esto no es malo! para nada... es mucho mejor, ya que creo que es la forma correcta de centrar las cosas... es como que digas que lo malo del CSS es que solo con text-align: center; puedes centrar los textos! realmente no es que sea malo.. o que sea problematico, sino que es lo correcto!

Cita:
Otro defecto que veo es con el height. En las tablas funciona de maravilla con cualquier navegador, pero no sucede lo mismo con el CSS. Sin embargo el width va de maravilla.
Te sorprenderias de la cantidad de problemas que tiene width... pero son problemas que pasan... como programador CSS tienes que estar abierto a nuevas ideas y ser creativo con tus soluciones... Realmente te invito a hacer una pagina solo para FF y veras que de problemas tendras...

¿Cómo os arreglais para solucionar estos problemas?

Preguntamos en Este Foro! o nos pasamos toda una semana entera agotando recursos...

Espero haber ayudado en el tema! y espero que te queden claros cada uno de los puntos!
Saludos! y Suerte!!

PD: Espero el Link de tu pagina eh! =D
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #4 (permalink)  
Antiguo 12/01/2009, 04:56
 
Fecha de Ingreso: noviembre-2005
Mensajes: 86
Antigüedad: 12 años
Puntos: 0
Respuesta: Problemas de centrado y height

En primer lugar, peron por las prisas. Ello me llevó a poner los datos al revés: eS cierto que el que falla es IE.

Pero el problema del centrado lo sigo teniendo igual. Esta claro que una gran número de internautas siguen usando IE (por desgracia). Solo hay que ver las estadisticas de nuestras webs. Luego hay que seguir programando para que esta gente vea aceptablemente el contenido. Ello conlleva el tener que seguir utilizando el <center> de toda la vida.

Os pongo un ejemplo de mi prueba:
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<style type="text/css">
.centrado {margin:0 auto; width:300px; height:200px; background:#DEDEDE;}
.tabla_centrada {margin:0 auto; padding:10px;}



.centrado1 {margin-top:50px; width:300px; height:200px; background:#BBB;}
.tabla_centrada1 {padding:20px;}
</style>
</HEAD>
<BODY>
<div class="centrado">
Este div deberia estar en el centro, porque tiene margin:0 auto; sin embargo, en IE no se centra
<table class="tabla_centrada"><tr><td bgcolor="FF0000">Tabla que deberia estar centrada<br>sin embargo, en IE no se centra</td></tr></table>
</div>




<div class="centrado1">
Este div deberia estar en el centro, pero no se centra por no tener margin:auto
<table class="tabla_centrada1"><tr><td bgcolor="FF0000">Tabla que deberia estar centrada<br>sin embargo, en IE no se centra</td></tr></table>
</div>
</BODY>
</HTML>
  #5 (permalink)  
Antiguo 12/01/2009, 05:06
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de centrado y height

Te lo centrará perfectamente tanto en IE como Firefox si en lugar de esto:

Cita:
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
usas un doctype adecuado, por ejemplo:
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
__________________
Visita mi nueva web idplus.org
  #6 (permalink)  
Antiguo 12/01/2009, 07:10
 
Fecha de Ingreso: noviembre-2005
Mensajes: 86
Antigüedad: 12 años
Puntos: 0
Respuesta: Problemas de centrado y height


Si tienes razón Mikmoro. El primer ejemplo si. pero el segundo no.
¿Cómo hay que hacer para cuando tenemos que usar otro margin? ¿Se pone un nuevo div en balnco que haga las veces del margin?
  #7 (permalink)  
Antiguo 12/01/2009, 07:29
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de centrado y height

Perdona pero no entiendo a qué te refieres con el primer o segundo ejemplo, ni con lo de otro margin.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 12/01/2009, 09:27
 
Fecha de Ingreso: enero-2009
Mensajes: 5
Antigüedad: 8 años, 11 meses
Puntos: 0
Respuesta: Problemas de centrado y height

Informa...

Mira yo he tenido el problema del centrado en firefox y explorer y una vez encontré una buena solución.

Esta solución consiste en definir dentro del CSS el body normal y a continuación un body adicional con el centrado para Firefox.

body{
text-align: center;
}
body{
text-align: -moz-center;
}

Ojalá te sirva...
  #9 (permalink)  
Antiguo 12/01/2009, 20:21
Avatar de Calizman
Organiza competencias CSS
 
Fecha de Ingreso: octubre-2008
Ubicación: Ciudad de Guatemala, Guatemala
Mensajes: 1.122
Antigüedad: 9 años, 2 meses
Puntos: 83
Respuesta: Problemas de centrado y height

Noooo!!! nigeriano10!! eso solo lo centrara en FF!

lo primero esta bien, la propiedad del Body! pero con la unica diferencia que a los divs que estan debajo de el body le pones margin: 0 auto; y listo! tienes tus divs centrados!

Las preguntas de informa no las entendi, al igual que Mik. Explicate mejor y con gusto te ayudamoes!
__________________
[ Mi Sitio Personal ]
"La felicidad no es una estacion de llegada... Es un modo de viajar"
Tom Schreiter
  #10 (permalink)  
Antiguo 13/01/2009, 03:10
 
Fecha de Ingreso: noviembre-2005
Mensajes: 86
Antigüedad: 12 años
Puntos: 0
Respuesta: Problemas de centrado y height

La pregunta sobre cómo centrar el div se refiere al <div class="tabla_centrada1">.
Como el class="centrado1" tiene un margin distinto a auto, ya no hay forma de que se centre. Mi solución apuntaba a seguir dejando el <div class="centrado1"> con margin:0 auto; y hacer una chapucilla que equivalga a ese margin mediante un nuevo div que tenga height:50px. Es simplemente una sugerencia. No me gusta nada esta solución, pero es que no se me ocurre otra si no quiero volver al <center>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<HEAD>
<TITLE>New Document</TITLE>
<style type="text/css">
.separador_para_suplir_el_margin { margin-top:50px;}
.centrado {margin:0 auto; width:300px; height:200px; background:#DEDEDE;}
.tabla_centrada {margin:0 auto; padding:10px;}
</style>
</HEAD>
<BODY>
<div class="separador_para_suplir_el_margin"><div>
<div class="centrado">
Este div se centra, por tener margin:auto
<table class="tabla_centrada"><tr><td bgcolor="FF0000">Tabla que debe estar centrada</td></tr></table>
</div>
</BODY>
</HTML>
  #11 (permalink)  
Antiguo 13/01/2009, 03:14
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de centrado y height

Pues lo siento pero aun lo entiendo menos. ¿Estás hablando de centrado horizontal o vertical?
__________________
Visita mi nueva web idplus.org
  #12 (permalink)  
Antiguo 14/01/2009, 03:42
 
Fecha de Ingreso: noviembre-2005
Mensajes: 86
Antigüedad: 12 años
Puntos: 0
Respuesta: Problemas de centrado y height

El problema que expongo es claramente de centrado horizontal de los div.
Aqui tienes el ejemplo. Este div tendría que estar centrado, pero no se centra porque por exigencias de la programación tiene que tener un margen superior determinado. Al no poder tener margin:0 auto; ¿cómo lo centramos horizontalmente?:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
<HEAD>
<TITLE>New Document</TITLE>
<style type="text/css">
.contenedor {margin:50px; width:400px; height:200px; background:#DEDEDE;}
.tabla_centrada {margin:0 auto; padding:10px;}
</style>
</HEAD>
<BODY>
<div class="contenedor">Este div NO se centra, porque no tiene margin:0 auto; <br> ya que necesita tener un margen superior: 50px</div>
</BODY>
</HTML>
  #13 (permalink)  
Antiguo 14/01/2009, 03:49
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de centrado y height

Cita:
Iniciado por informa Ver Mensaje
El problema que expongo es claramente de centrado horizontal de los div.
Aqui tienes el ejemplo. Este div tendría que estar centrado, pero no se centra porque por exigencias de la programación tiene que tener un margen superior determinado. Al no poder tener margin:0 auto; ¿cómo lo centramos horizontalmente?:
Pero veamos: el margen superior no afecta para nada al centrado horizontal, es decir, que si tú pones:
margin: 50px auto;
la caja se centra horizontalmente igual.

Lo que me ha desconcertado es que incluyeras:
<div class="separador_para_suplir_el_margin"><div>
para intentar engañarlo para el centrado horizontal.

En resumen, los márgenes superior e inferior no afectan al centrado horizontal (izquierda y derecha).
__________________
Visita mi nueva web idplus.org
  #14 (permalink)  
Antiguo 14/01/2009, 03:51
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de centrado y height

Incluso si quieres que sólo tenga margen superior, puedes poner:

margin: 50px auto 0 auto;

y se centrará.
__________________
Visita mi nueva web idplus.org
  #15 (permalink)  
Antiguo 15/01/2009, 03:30
 
Fecha de Ingreso: noviembre-2005
Mensajes: 86
Antigüedad: 12 años
Puntos: 0
Respuesta: Problemas de centrado y height

Gracias Mikmoro: La solución está en margin: 50px auto 0 auto;

No sabia esta formula. Funciona perfectamente.

Saludos.
  #16 (permalink)  
Antiguo 15/01/2009, 03:46
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Problemas de centrado y height

Me alegro. Para otra vez, no hay como formular la consulta correcta y precisa para recibir la ayuda más adecuada.

Saludos.
__________________
Visita mi nueva web idplus.org
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 15:16.