Foros del Web - Problemas de centrado y height

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - Problemas de centrado y height (http://www.forosdelweb.com/f53/problemas-centrado-height-660493/)

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?

Respuesta: Problemas de centrado y height

Cita:

Iniciado por informa (Mensaje 2735619)

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 (Mensaje 2735619)

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.

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:

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

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>

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" />

Respuesta: Problemas de centrado y height

:arriba:
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?

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.

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...

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!

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>

Respuesta: Problemas de centrado y height

Pues lo siento pero aun lo entiendo menos. ¿Estás hablando de centrado horizontal o vertical?

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>

Respuesta: Problemas de centrado y height

Cita:

Iniciado por informa (Mensaje 2742339)

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).

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á.

Respuesta: Problemas de centrado y height

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

No sabia esta formula. Funciona perfectamente.

Saludos.

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.