Foros del Web » Creando para Internet » CSS »

Etiqueta "nobr" no aceptada

Estas en el tema de Etiqueta "nobr" no aceptada en el foro de CSS en Foros del Web. Hola a todos, el siguiente código es de una galería de imágenes que se mueve hacia los lados al poner el cursor encima, estoy validando ...
  #1 (permalink)  
Antiguo 18/12/2005, 13:45
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Etiqueta "nobr" no aceptada

Hola a todos, el siguiente código es de una galería de imágenes que se mueve hacia los lados al poner el cursor encima, estoy validando el código de toda la página y todo está bien excepto que la etiqueta "nobr" no está admitida y no tengo ni idea de qué hacer para sustituirla o eliminarla. Resulta que si la quito, la galería de imágenes (no he puesto el jScript pues no sé si vale la pena) corre bien en Explorer pero se queda quieta en Mozilla ¿alguien tiene alguna idea de qué debo hacer? se lo agradecería mucho pues quisiera validarlo todo de una vez y no puedo.

Código:
<div id="galeria">
  <div id="motioncontainer" style="position:relative;width:600px;height:52px;overflow:hidden;">
    <div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

      <nobr id="trueContainer">
       <a href="../../actualizacion_dic_05/activos/imagenes/albumes/caribe/HTM/imagen1.htm"><img src="../../actualizacion_dic_05/activos/imagenes/albumes/caribe/miniaturas/imagen1.jpg" border=1></a> 
       <a href="#"><img src="../../actualizacion_dic_05/activos/imagenes/albumes/caribe/miniaturas/imagen2.jpg" border=1></a> 
       <a href="../../actualizacion_dic_05/activos/imagenes/albumes/caribe/HTM/imagen3.htm"><img src="../../actualizacion_dic_05/activos/imagenes/albumes/caribe/miniaturas/imagen3.jpg" border=1></a> 
       <a href="#"><img src="foto1"></a> 
       <a href="#"><img src="foto2"></a>
       ....................
       ....................
       ....................
       <a href="#"><img src="ultima foto"></a> 
      </nobr>
    </div>
  </div>
</div>



#galeria {
	width: 600px;
	margin: 0 auto 20px;
}
#galeria img {
	margin: 0 auto;
	text-align: left;
}
#motioncontainer{ 
position:relative;width:600px;height:52px;overflow:hidden;}
#motiongallery{position:absolute;left:0;top:0;white-space: nowrap;}


#motioncontainer a img{ /*image border color*/
    border: 1px solid #ccc;
}
#motioncontainer a:hover img{ /*image border hover color*/
    border: 1px solid navy;
}

#motioncontainer a:hover{
    color: red; /* Dummy definition to overcome IE bug */
}

#statusdiv{
   padding: 2px;
   background-color: #FFC;
   border: 1px solid gray;
   visibility: hidden;
}
  #2 (permalink)  
Antiguo 19/12/2005, 12:31
(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
Hola gutiw :

Código:
white-space:nowrap;
pero algunos navegadores viejos no lo entienden en el style, así que también deja las etiquetas.
  #3 (permalink)  
Antiguo 19/12/2005, 16:54
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
hola furoya, gracias por el código, pero no sé en qué parte de la hoja de estilos ponerlo y de todos modos, si dejo las etiquetas seguirán sin validarmelo en W3c ¿no?
¿me lo puedes explicar mejor?
Gracias
  #4 (permalink)  
Antiguo 20/12/2005, 12:03
Avatar de marioStudios
Colaborador
 
Fecha de Ingreso: octubre-2005
Ubicación: Chiapas; México.
Mensajes: 1.625
Antigüedad: 12 años, 1 mes
Puntos: 211
Que tipo de DOCTYPE estas usando, lo puedes variar, si es sí, pues te quitas de problemas y si no, pues usa un estilo dentro del documento actual (dentro de las etiquetas head).

<head>
<style type="text/css">
<!--
.Desbordate {nowrap:nowrap;}
//-->
</style>
</head>
__________________
Diseño Gráfico Digital - Fotomontajes - marioStudios
Debes Mat 6:33 con Heb 11:1, DLB. Luc 2:14!!!
  #5 (permalink)  
Antiguo 20/12/2005, 12:41
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Estoy usando

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Le he creado el estilo en Head como me dices y me marca en rojo que es una propiedad CSS no válida.
  #6 (permalink)  
Antiguo 21/12/2005, 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
Hola de nuevo :

Cita:
...el código, pero no sé en qué parte de la hoja de estilos ...
Es que ya lo tienes puesto en el código.

Código:
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
además de la hoja de estilos, de última se lo pones a la etiqueta nobr, pero no creo que ande, porque el atributo es para bloques.

Cita:
...si dejo las etiquetas seguirán sin validarmelo en W3c ¿no?...
Depende del DOCTYPE, como ya te explicaron.

Si es para algún examen y te califican por validación, vas a tener que revisar el resto del código, porque en FF tiene que andar y es necesario que te aprueben. De otra forma los puedes dejar, para que se vea también en los navegadores viejos (ningún usuario va a ocupar su tiempo en validarte la página, pero si se van a molestar si el efecto no se ve). quizá agrandando el div que contiene las imágenes... ¿que pasa si pones solamente 2?. Ahora no tengo un Mozilla para probar el código. Pero tiene que andar.

marioStudios : ¿en qué navegadores anda ese atributo?
  #7 (permalink)  
Antiguo 21/12/2005, 16:25
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Hola furoya:
Creo que una imagen vale más que mil palabras, o eso dicen... la página está aquí: http://www.costaricaway.net/pruebas/...reportajes.htm
Es la puesta en DIVs de la web anterior hecha con tablas, el único problema que tengo (bueno ahora no sé si hay más pues he añadido cosas y la tengo que validar otra vez) es ese maldito "nobr", que creo que es una etiqueta propietaria de IE. El código de la galería deslizante no es mío, lo bajé de internet y lo he intentado adaptar, pero no me sale bien, pues aunque funciona no me pasa la validacoón del W3C y me gustaría pasarla.
Sobre lo de cambiar el DOCTYPE pues será, pero yo no sé cual hay que poner, todavía estoy bastante flojo en estas cosas, pues es mi primera página y he ido aprendiendo sobre la marcha.
Dime si se te ocurre algo para eliminar o sustituir la etiqueta y que pueda validar.
Muchas gracias
  #8 (permalink)  
Antiguo 21/12/2005, 17:06
 
Fecha de Ingreso: octubre-2005
Mensajes: 536
Antigüedad: 12 años, 1 mes
Puntos: 1
Hola a todos.

Aunque discrepo de su consejo, la información básica que ha aportado furoya es correcta, salvo en un detalle.

Tanto da el DOCTYPE, nobr no es un elemento válido en ningún DOCTYPE válido.

En teoría, nobr es para impedir la ruptura de lineas, la propiedad apropiada para esto es white-space:nowrap; que tienes incluida en la 'div id="motiongallery"'

Como el elemento nobr no tiene ningún estilo asociado puedes eliminar las etiquetas:
<nobr id="trueContainer"> y </nobr> . Ya está, problema resuelto.
  #9 (permalink)  
Antiguo 21/12/2005, 18:21
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Jorolo, el problema, como explicaba en mi primera pregunta, es que si quito el nobr deja de funcionar en FF, en cambio en IE sí lo hace y además, eso lo añado ahora, no entiendo la función de ese nobr en este caso concreto, pues sería redundante con la propiedad nowrap ¿no?
  #10 (permalink)  
Antiguo 22/12/2005, 11:41
(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
A ver. Estuve mirando el sitio a vuelo de pájaro, y me parece que debe haber mejores escripts para hacer eso mismo, o por lo menos más modernos, ya que no contempla a Firefox. Hubiera ayudado poner un enlace al

http://www.costaricaway.net/pruebas/...tiongallery.js

para poder estudiarlo. Y trueContainer no se puede eliminar. Hay que reemplazarlo con un span o similar para que lo mueva.

No sabía que nobr ni siquiera estaba en

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
todos los días uno se entera de algo nuevo.

Dejo un enlace por si lo quieres adaptar o buscar nuevos códigos.

modificar codigo scroll.

Y no es redundante, insisto, es para compatibilidad con navegadores viejos.

P.D. : Encontré esto, quizá sirva

http://www.google.com/custom?q=nobr&....blooberry.com
  #11 (permalink)  
Antiguo 22/12/2005, 13:26
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Gracias Furoya, voy a juntar toda la información que me has dado y a ver qué sale, debo ponerme a estudiar jS urgentemente pues así no llego aningún sitio.
  #12 (permalink)  
Antiguo 23/01/2006, 18:16
(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
Hola de nuevo :

no es nada, gutiw; me molestó algo el hecho de que te encapricharas con quitar la etiqueta nobr, si ya sabes que funciona y la necesitas para hacer el efecto compatible. Que un validador no la acepte no me parece excusa.

Pero en fin, si después de todas las explicaciones sigues con la misma idea, no hay nada que hacer. Salvo reescribir el código.

Más arriba comenté que "quizá agrandando el div que contiene las imágenes" porque si el tamaño alcanza para todas, no tienen por qué derrapar; y el nobr o el white-space: nowrap ya no tienen sentido.

El ejemplo que pusiste tiene varios puntos difíciles. Uno es que calcula la velocidad según la posición del puntero -sobre el banner y con respecto al origen del documento- y eso es complicado, no muy seguro y usa códigos diferentes para cada navegador. Es decir, que si el javascript es propetario puede no adaptarse a algún otro y estamos en la misma que con el nobr : no les va a andar.
Como sé que no estás muy práctico con javascript, hice un desplazador que tiene un escript elemental, es solamente un loop que va desplazando la tira (cambia el left de la posición relativa) a distintas velocidades.

El fuerte está en HTML y CSS, por lo que vas a tener que hacer muchos ajustes a mano, pero no creo que sea problema para ti.

La tira de imágenes es del tipo "sin fin" -donde termina vuelve a empezar- y la posición del puntero la "mido" con 2 capas transparentes mapeadas en 'cebra' vertical ( las puedes ver cambiando background+color por background-color ). Cada raya de la cebra tiene un onmouseover que asigna la velocidad paso y dispara una función para desplazar; y un onmouseout que detiene el loop para recomenzarlo limpio en la siguiente raya o detenerlo si el puntero sale del banner.

La velocidad es progresiva de adentro hacia afuera; en IE funciona bien, pero en FF no se nota. Quizá le erré en los valores o la máquina que usé estaba lenta; igual lo puedes probar tú y ajustarlo a gusto (sí, una por una).

Hay un par de hacks que no validan en CSS, pero tu problema era el HTML ¿no?. -Insisto : ¿NO?- Así que solamente tienes que meter tus imágenes y empezar a hacer los ajustes de estilo.

Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

<html>
<head><title>SLIDE. </title>
<script type="text/javascript">
var tiempo, desp, anchoImag, paso;

function desplazaD(){
document.title = desp+" "+paso; /*MUESTRA POSIC. Y VELOCIDAD EN TÍTULO*/
if(desp >= 0){
desp = (anchoImag*-1);
}
desp += 1;
document.getElementById("linea").style.left = desp +"px";

ruloD();
}

function ruloD(){
tiempo = setTimeout("desplazaD()", paso);
}

function desplazaI(){
document.title = desp+" "+paso; /*MUESTRA POSIC. Y VELOCIDAD EN TÍTULO*/
if(desp <= anchoImag*-1){
desp = 0;
}
desp -= 1;
document.getElementById("linea").style.left = desp +"px";

ruloI();
}

function ruloI(){
tiempo = setTimeout("desplazaI()", paso);
}


function inicio(){
anchoImag = document.getElementById("medidor").offsetWidth;
var imag = document.getElementById("medidor").innerHTML;

//alert(anchoImag+" "+document.getElementById("linea").offsetWidth)

document.getElementById("linea").innerHTML = imag + imag;
document.getElementById("linea").style.width = (anchoImag*2)+4 + "px";
/*ES POSIBLE QUE HAYA QUE AJUSTAR EL '4' DE (anchoImag*2)+4 SEGÚN EL ANCHO 
DE LOS BORDER DE ENLACE*/
desp = 0;
document.getElementById("linea").style.left = desp + "px";

//alert(anchoImag+" "+document.getElementById("linea").offsetWidth)
}

window.onload = inicio;
</script>
<style type="text/css">
#cont {width:330px; overflow:hidden; border:3px solid blue; position:relative; 
height:72px; background-color:#ffcc99; }

#linea {margin:4px 0; position:absolute; height:62px; 
padding:0; background-color:#ffcc99; 
width:650px; /*DEBE SER MAYOR QUE LA SUMA DEL ANCHO DE LAS 
IMÁGENES Y SUS BORDES; PARA ESTAR SEGUROS DE QUE NO DERRAPAN SE PUEDE 
CAMBIAR TEMPORARIAMENTE EL overflow:hidden DE #cont*/
}

a.botones {border-width:4px; border-color:#00ff00; border-style:solid; 
background-color:#cccccc; font-size:50px; }

a.botones:link {border-color:#00ff00; }

a.botones:visited {border-color:#00ff00; }

a.botones:hover {border-color:#ff0000; }

a.botones:active {border-color:#0000ff; }

a.botones img {width:50px; height:50px; vertical-align:top; margin-top:2px; 
_margin-top:4px; /*HACK PARA IE*/}

#medidor {background-color:#000000; }

#tapa0, #tapa1 {position:absolute; width:130px; height:76px; border-width:0; 
background+color:red; /*ES PARA "VER" LAS CAPAS MAPEADAS, BORRARLO*/}

#tapa0 {top:0; left:0; }

#tapa1 {top:0; left:200px; }
</style>
</head>
<body>
<!--[if lt IE 5.5000]> 
<style>
#li--nea {width:620px; }
.botones{height:58px; }
</style>
<![endif]-->

<h1>Desplaza im&aacute;genes. (IE/FF)</h1>

<div id="cont">
<div id="linea">
<span id="medidor">
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/cool.gif" alt="cool" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/wink.gif" alt="wink" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/frown.gif" alt="frown" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/biggrin.gif" alt="biggrin" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/chillando.gif" alt="chillando" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/smile.gif" alt="smile" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/dedosarriba.gif" alt="dedosarriba" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/ojotes.gif" alt="ojotes" /></a>
<a class="botones" href="#">
<img src="http://www.forosdelweb.com/images/smilies/sho.gif" alt="sho" /></a>
</span>
</div>
<map name= "area0" >
<area alt="«" shape="rect" coords="0,0,10,100" 
onmouseover="paso=10; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="10,0,30,100" 
onmouseover="paso=20; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="30,0,50,100" 
onmouseover="paso=30; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="50,0,70,100" 
onmouseover="paso=40; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="70,0,90,100" 
onmouseover="paso=60; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="90,0,110,100" 
onmouseover="paso=80; desplazaD()" onmouseout="clearTimeout(tiempo)" >
<area alt="«" shape="rect" coords="110,0,130,100" 
onmouseover="paso=100; desplazaD()" onmouseout="clearTimeout(tiempo)" >
</map>

<map name= "area1" >
<area alt="»" shape="rect" coords="0,0,10,100" 
onmouseover="paso=100; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="10,0,30,100" 
onmouseover="paso=80; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="30,0,50,100" 
onmouseover="paso=60; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="50,0,70,100" 
onmouseover="paso=40; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="70,0,90,100" 
onmouseover="paso=30; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="90,0,110,100" 
onmouseover="paso=20; desplazaI()" onmouseout="clearTimeout(tiempo)" >
<area alt="»" shape="rect" coords="110,0,130,100" 
onmouseover="paso=10; desplazaI()" onmouseout="clearTimeout(tiempo)" >
</map>
<img src="http://www.forosdelweb.com/clear.gif" id="tapa0" usemap="#area0" alt="izq" />
<img src="http://www.forosdelweb.com/clear.gif" id="tapa1" usemap="#area1" alt="der" />
</div>

<p>Moviendo el puntero a izquierda o derecha del <i>banner</i> 
se desplazan los enlaces, que solo se activan al detenerse la 
animaci&oacute;n.</p>

  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-html401"
        alt="Valid HTML 4.01 Transitional" height="31" width="88"></a>
  </p>

</body></html>
Ah!, la función inicio() es para duplicar el contenido de la tira (así se logra el efecto "sin fin", poniendo la misma serie de imágenes una a continuación de la otra).

Cualquier duda, avisa.

Última edición por furoya; 06/02/2006 a las 12:34
  #13 (permalink)  
Antiguo 28/01/2006, 15:41
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Hola Furoya, acabo de entrar en el foro y me he encontrado con tu respuesta de hace días, pido excusas por mi descortesía de no haberte dado las gracias antes, pero es que ya no esperaba más respuestas, repito, lo siento y quiero agradecerte el trabajo que te has tomado, que no es poco.
El hecho de quiera validar es porque como esta galería irá en más de 300 páginas y son cuarenta fotos por página, cuando busco errores me salen unas listas gigantescas y si eliminara ese "error" la lista se reduciría sustancialmente y tendría menos trabajo buscando y bueno... me gustaría validar ¿por qué no?
Voy a intentar seguir tus explicaciones y a ver si me aclaro.
Muchas gracias
  #14 (permalink)  
Antiguo 30/01/2006, 12:56
(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
No hay problema, gutiw.

¿300 páginas de 40 fotos? ¿12000 imágenes? ¡Éso sí es tomarse trabajo!

Cuando termine este mensaje voy a corregir algún error del código anterior, para facilitar el asunto de tomar medidas. No lo puedo probar en IE5x para actualizar el hack del comentario condicional, pero supongo que funcionará.
Y el que está en el CSS

_margin-top:4px; /*HACK PARA IE*/

es más que nada para los bordes. Si los eliminas o los incorporas a cada imagen (y, sí, a las 12000) ya no sería necesario.
  #15 (permalink)  
Antiguo 01/02/2006, 20:13
 
Fecha de Ingreso: marzo-2005
Ubicación: Puerto Viejo - Costa Rica
Mensajes: 125
Antigüedad: 12 años, 9 meses
Puntos: 0
Furoya, gracias una vez más, no puedo hacer nada estos días pero en cuanto salga de lo que estoy metido, voy a probar tu código, y no te asustes, no es para tanto, son las mismas 40 o 42 fotos pero la galería va en cada página, si fueran 12000 ya estaría muerto.
Saludos
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 19:30.