Foros del Web » Creando para Internet » CSS »

Ayuda: Div height:0 y innerHTML

Estas en el tema de Ayuda: Div height:0 y innerHTML en el foro de CSS en Foros del Web. Cita: Iniciado por gepd ... la solucion fué borrar el DOCTYPE... Mal asunto... el doctype aunque no es parte del juego de tags (x)html es ...

  #31 (permalink)  
Antiguo 25/06/2008, 19:52
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Ayuda: Div height:0 y innerHTML

Cita:
Iniciado por gepd Ver Mensaje
... la solucion fué borrar el DOCTYPE...
Mal asunto... el doctype aunque no es parte del juego de tags (x)html es imprescindible para conseguir la mejor compatibilidad entre navegadores... seguro que no has probado en todos (opera, safari...)

Como comenta Mikmoro () seguro que has hecho algún retoque posterior... y otro consejo, aunque por el total de los mensajes de este tema, es obvio, procura respetar los estándares.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #32 (permalink)  
Antiguo 25/06/2008, 19:55
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 10 años
Puntos: 6
Respuesta: Ayuda: Div height:0 y innerHTML

si, intentaré probar nuevamente que es lo que causa el conflicto, de todos modos así son el doctype, me funciona en IE 7, IE 8, safari win, firefox win, firefox mac, safari mac, opera mac es en los navegadores que he podido probar, seguiré trabajando en ellos y les comento que tal me fué


saludos y gracias por interezarse en el tema
  #33 (permalink)  
Antiguo 27/06/2008, 19:50
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 10 años
Puntos: 6
Respuesta: Ayuda: Div height:0 y innerHTML

acabo de modificar el codigo agregandole el doctype y me ha surgido algo en firefox, resulta que ya no toma el topmargin ni left, etc alguien sabe como solicionarlo, ya intententé poniendo margin:0px,en la css


saludos y gracias
  #34 (permalink)  
Antiguo 28/06/2008, 03:50
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: Ayuda: Div height:0 y innerHTML

Si pones lo que tienes ahora igual podemos encontrar la compatibilidad como la otra vez.

Mikel.
  #35 (permalink)  
Antiguo 28/06/2008, 07:24
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 10 años
Puntos: 6
Respuesta: Ayuda: Div height:0 y innerHTML

es mismo que dejaste para la coleccion, lo he probado en un nuevo archivo para asegurarme que no es problema con alguna otra propiedad css

http://www.forosdelweb.com/f53/ayuda...9/#post2449710


saludos
  #36 (permalink)  
Antiguo 28/06/2008, 13:18
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: Ayuda: Div height:0 y innerHTML

Cita:
Iniciado por gepd Ver Mensaje
He seguido Trabajando en el código y se me ha presentado un problema cuando actualisé a FF3, no me agranadaba la "barra" la solucion fué borrar el DOCTYPE y cambiar ésta parte

éste

Código:
contenido.style.height = altura + "px";

por éste

Código:
contenido.style.height = altura;

fué la única forma de poder hacerlo funcionar en FF3, comento ésto para que no pierda tanto tiempo al próximo que le pase ésto mismo

saludos
Entonces me he perdido en alguna parte. Decías "he seguido trabajando en el código". Decías que no te funcionaba en FF3 y que debías quitar el DOCTYPE y los px para que lo hiciera, pero al decirte a ver en qué punto estás con el código me dices que estás usando exactamente el que dejamos para la colección, que yo he comprobado que funciona correctamente en FF3.

No sé exactamente dónde pero veo que me he perdido con el problema actual.

Mikel.
  #37 (permalink)  
Antiguo 28/06/2008, 13:20
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 10 años
Puntos: 6
Respuesta: Ayuda: Div height:0 y innerHTML

Claro, he copiado el código en una nueva pagina limpia sin niun codigo aparte y he podido solucionar el problema que tenia con FF3 pero ahora me encuentro que no toma los parametros de topmargin ni leftmargin etc... (sólo en firefox), ésto hace que el efecto no sea muy bueno

saludos
  #38 (permalink)  
Antiguo 28/06/2008, 13:27
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: Ayuda: Div height:0 y innerHTML

De acuerdo. ¿Y dónde colocas esos parámetros? Es para intentar buscar una solución, que podría ser sencilla (o no )

Mikel.
  #39 (permalink)  
Antiguo 28/06/2008, 13:31
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 10 años
Puntos: 6
Respuesta: Ayuda: Div height:0 y innerHTML

supone que el en body yo coloco
<body topmargin="0" leftmargin="0" rigthmargin="0">

si pruebas el code en firefox te darás cuenta que deja un margen superior al expandir la "barra"
  #40 (permalink)  
Antiguo 28/06/2008, 17:42
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: Ayuda: Div height:0 y innerHTML

Ah, de acuerdo. Pruébalo así, que es lo correcto:

<body style="margin:0;">

o mejor todavía, en la css

body {margin: 0;}

Mikel.
  #41 (permalink)  
Antiguo 28/06/2008, 17:44
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 10 años
Puntos: 6
Respuesta: Ayuda: Div height:0 y innerHTML

ya lo hice y no funciona, lo había escrito unos post mas arriba :)
que trabajito ésto de compatibilidad xD

pero me entretiene...
  #42 (permalink)  
Antiguo 28/06/2008, 18:15
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: Ayuda: Div height:0 y innerHTML

Pues a mi también me divierten mucho los retos, pero en este caso sigo sin saber qué es lo que no funciona.

http://www.araudi.net/forosdelweb/gepd3.html#

¿En este ejemplo no ves el texto y los enlaces absolutamente pegados arriba, a izquierda y derecha con FF2 o 3?

Es el código original de la colección + margin 0 en el body.

Mikel.
  #43 (permalink)  
Antiguo 28/06/2008, 18:17
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 10 años
Puntos: 6
Respuesta: Ayuda: Div height:0 y innerHTML

Hey, ahora sí, te lo agradezco muchisimo, creo que tendré que buscar mas sobre css, es lo que me cuesta mas en éste momento...

gracias nuevamente! :D
  #44 (permalink)  
Antiguo 28/06/2008, 18:22
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: Ayuda: Div height:0 y innerHTML

Estudia y pregunta lo que necesites, que se te ayudará en lo que se pueda

Saludos.

Mikel.
  #45 (permalink)  
Antiguo 01/07/2008, 22:41
Avatar de gepd  
Fecha de Ingreso: diciembre-2007
Mensajes: 142
Antigüedad: 10 años
Puntos: 6
Respuesta: Ayuda: Div height:0 y innerHTML

me ha surgido una duda cual es la diferencia entre:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

y éste:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

ya que en un principio había puesto el segundo para lo que estaba tratando de hacer a lo largo de todo el post, pero luego he querido y he logrado poner un div a 100% pero he tenido que cambiar el doctype a éste

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

cual es la diferencia?

no he probado pero estoy seguro que no me funcionará la "barra".
  #46 (permalink)  
Antiguo 15/07/2008, 08:54
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Ayuda: Div height:0 y innerHTML

No pensé volver a este tema, pero mientras hacía una versión del efecto para guardarme, apareció algo extraño.
Quizá debi abrir otro, con otro ejemplo, donde se viera mejor el problema. Lo que pasa es que lo encontré trabajando con este código, y aquí mismo ya se mencionó el asunto de las alturas y los márgenes fantasma.
Por eso vuelvo, aunque seguramente me van a poner un enlace a algún tema donde ya lo hayan resuelto.

Antes de empezar —y para que no no pienses que estoy ignorando tu pregunta— te diré que en las FAQ y en todo el Foro hay información sobre los DTD. Y supongo que aparecen más con cualquier buscador. Éste sería como para empezar.

http://www.w3.org/QA/Tips/Doctype

Yo no puedo ayudarte más, gepd, porque no los entiendo mucho; siempre estaba por estudiarlos con la idea de hacer mis propios doctype, y al final los dejé. Me acostumbré a usar el de HTML transicional, que funciona bastante bien en todos los navegadores.

En fin, volviendo a mi asunto, esta es la versión que hice teniendo en cuenta el "zoom" para Firefox 2 o menores y que tiene corregido el bug del tamaño de texto.

Código HTML:
<!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>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>gepd - Mikel - caricatos</title>
<script type="text/javascript">

var altura3 = 0;

function agrandar(){
var contenido1 = document.getElementById("barra1");
var contenido2 = document.getElementById("texto1");
var altura1 = contenido1.offsetHeight; 
var altura2 = contenido2.offsetHeight;

if(altura1 < altura2){
altura3 = altura3 + 0.1;
contenido1.style.height = altura3 + "ex";
setTimeout("agrandar()",25);
}
}

function achicar(){
var contenido1 = document.getElementById("barra1");
var contenido2 = document.getElementById("texto1");

if(altura3 > 0.1){
altura3 = altura3 - 0.1;
contenido1.style.height = altura3 + "ex";
setTimeout("achicar()",25);
}
else {
contenido1.style.height = altura3 = 0;
}
}
</script>
<style type="text/css">

body {margin:0; background-color:#000000; color:#ffffff; 
font-size:100%;}

#barra1 {background-color:#ffffff; color:#000000; height:0; 
overflow: hidden; font-size:20pt;}

.abajo {width:1em; height:1em; font-size:6px; border-style:solid; 
border-top-color:#ffffff; border-left-color:#000000; 
border-right-color:#000000; border-bottom-color:#000000; 
border-top-width:1em; border-left-width:0.5em; 
border-right-width:0.5em; border-bottom-width:1px; 
background-color:#ffffff; padding:0; cursor:pointer;}

.arriba {width:1em; height:1em; font-size:6px; border-style:solid; 
border-top-color:#000000; border-left-color:#000000; 
border-right-color:#000000; border-bottom-color:#ffffff; 
border-top-width:1px; border-left-width:0.5em; 
border-right-width:0.5em; border-bottom-width:1em; 
background-color:#fffffff; padding:0; cursor:pointer;}

#pag {padding:0 10px 15px 10px;}

img {height:6em; background-color:#808080; color:#800000;
font-family:gothic, celtic, decorative, fantasy, cursive; }
</style>
</head>
<body>
<center><input type=button class=abajo onClick="agrandar()" 
title="ABRE" value="" /> 
<input type=button class=arriba onClick="achicar()" 
title="CIERRA" value="" /></center>

<div id="barra1"><div id="texto1">QWERTYUIOP. QWERTYUIOP. 
QWERTYUIOP. </div></div>

<div id="pag">
<h2>Panel superior se abre con animaci&oacute;n y botones.</h2>
<img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" 
alt="IMAGEN">
</div>

</body>
</html> 
Como dato adicional, ese "zoom" también funciona en Internet Explorer 6; aunque no sé cuánta utilidad tendrá, sabiendo que Microsoft ya le había puesto uno propietario con CSS.

El cambio de formato más evidente son los botones en forma de flecha, reemplazando a los falsos enlaces que estaban bajo el panel.
Y resulta que se ven perfecto en IE y en Opera. No en Firefox : están desfasados.

Estuve peleando la última semana con un efecto que no anda en Opera y no sé por qué. Como me siento un inútil con baja autoestima, no quiero fracasar también en descubrir el motivo para que un botón me quede más abajo que el otro. Por eso les dejo el ejemplo, para ver si alguien le encuentra —o le encontró— una explicación razonable.
  #47 (permalink)  
Antiguo 15/05/2009, 16:20
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Ayuda: Div height:0 y innerHTML

Parece que el problema no sólo es difícil de resolver, sino también de explicar. Todavía pienso si no debí ponerlo en otro tema; aunque el código salió de aquí, lo cierto es que no tiene ningún paso de variables entre las funciones ... y terminó con dos botones desfasados además de un zoom a destiempo.

O no.

Varias veces preguntaron por un zoom para Firefox 2, o también para IExplorer 6, cuando la ruedita del ratón sólo agrandaba texto relativo. Las nuevas versiones ya traen uno de "contenido" y de "acercar" respectivamente. Así que con este ejemplo estaba llegando tarde.
Bue, eso creí hasta que probé un Safari para Windows. No tiene zoom, así que el código todavía sirve.

Como el título de este tema dice otra cosa, voy a buscar algún otro tema sobre zoom, y lo enlazo; para que lo vean los que usan el buscador.

Igual sigo insistiendo : si alguien sabe qué pasa con esos botones, agradezco cualquier información. En Safari se ven bien.
  #48 (permalink)  
Antiguo 21/07/2009, 22:08
Avatar de alelita1980  
Fecha de Ingreso: octubre-2003
Ubicación: Buenos Aires
Mensajes: 25
Antigüedad: 14 años, 1 mes
Puntos: 0
Respuesta: Ayuda: Div height:0 y innerHTML

En vez de dejar el contenido vacío con
Código:
div.innerHTML = "";
uso esto
Código:
div.innerHTML = "<div class='nada'>"; 
y declaro la clase .nada en mi css así:
Código:
.nada {
margin-top: -18px;
}


Funciona y fácil
Slds
  #49 (permalink)  
Antiguo 09/08/2009, 13:11
(Desactivado)
 
Fecha de Ingreso: noviembre-2002
Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 15 años, 1 mes
Puntos: 317
Respuesta: Ayuda: Div height:0 y innerHTML

Lo que no entiendo es cómo va a resolver eso lo de los botones desfasados. A menos que te estés refiriendo a algo que ya está resuelto desde hace mucho, arriesgando este tema al cierre, cuando todavía no me respondieron.

Aunque no creo. Porque ese ejemplo no funciona.
Pero si era así; en vez de innerHTML se podría recomendar el uso de nodos, porque mover el margen no 'vacía' nada. Ni desaparece, allí se sigue viendo todo 'arriba' del div contenedor. Y para colmo éste no "colapsa" la altura, sigue mostrando alguna pequeña reserva de la que hablábamos antes.

Para eso se usa overflow:hidden, que permite achicar el contenedor hasta desaparecerlo.
Y hablando de desaparecer, con display:none "borramos" el div del contenido. ¿Cuál sería el sentido de moverlo con margen negativo?.

Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<body>
<div style="margin-top:100px; border:1px solid red;">
<div style="margin-top: -18px; color: black; 
background-color: yellow; font-size: 18px;">
Texto contenido que se sigue viendo.
</div></div>
</body>
</html> 
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 18:32.