Como hacer que la W3C me valide este código, no lo puedo modificar por el JQuery

[alvarols]

La W3C me marca este error

# Error Line 56, Column 111: Attribute "rel" exists, but can not be used for this element.

…th="580" height="360" title="" rel=" <h3>Destaca de los demás</h3><p>Servici

✉

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

El problema es que para que mi librería funcione así como aparece en mi página (en las imágenes con texto que cambian) http://www.alvarols.com, necesito poner las cadenas para el texto <h3> y <p> dentro de rel"", de lo contrario el contenido no aparece con el formato que yo quiero.

Este es el código

Código HTML:

 <a href="#" class="show">
		    <img src="images/grass-blades.jpg" alt="Haz crecer a tu negocio" width="580" height="360" title=""  rel=" <h3>Destaca de los demás</h3><p>Servicios Integrales de           Mercadotecnia, Desarrollo Web, y Musicalización; para que tu negocio sea competitivo.</p> "/> </a> 

[webosiris]

es que el elemento IMG no posee atributo rel, el único elemento al que le puedes poner rel es a los enlaces.

[Carlangueitor]

Iniciado por webosiris

es que el elemento IMG no posee atributo rel, el único elemento al que le puedes poner rel es a los enlaces.

Tambien se puede poner en las etiquetas <link>
Solo por si las dudas

[jomaruro]

Hola:

Iniciado por webosiris

el único elemento al que le puedes poner rel es a los enlaces.

Iniciado por Carlangueitor

Tambien se puede poner en las etiquetas <link>

Saludos.

[deirdre]

Hola...

Efectivamente todos tenéis razón: el problema lo tiene la galería al incluir esos rel y dentro de ellos la apertura y cierre de etiquetas que tampoco validan.

Pero, como en muchas ocasiones, donde hay un problema también hay una solución: es suficiente con un par de pequeños cambios para lograr que todo siga funcionando y que valide perfectamente (0 error y 0 advertencias)

Primer cambio: en el js llamado lavida.js

Código HTML:

Cambiar esta línea:
$('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
por esta otra:
$('#gallery .content').html($('#gallery a:first').find('img').attr('alt')) //cambiado rel por alt
___________

Y cambiamos esta línea:
var caption = next.find('img').attr('rel');
por esta otra:
var caption = next.find('img').attr('alt'); //cambiado rel por alt

De esta forma cambiamos el atributo rel por alt

Segundo cambio: en el html

Código HTML:

 <!-- sustituye este contenido -->
        	<div id="gallery">
	        <a class="show"><img src="images/grass-blades.jpg" title="Destaca de los demás" width="580" height="360" alt=" &lt;h3&gt;Destaca de los demás&lt;/h3&gt;&lt;p&gt;Servicios Integrales de Mercadotecnia, Desarrollo Web, y Musicalización; para que tu negocio sea competitivo.&lt;/p&gt;"/></a>
	        <a><img src="images/flowing-rock.jpg" title="Conocimiento para la toma de decisiones" width="580" height="360" alt=" &lt;h3&gt;Conocimiento para la toma de decisiones&lt;/h3&gt;&lt;p&gt;Desarrollamos Estudios de Mercado, Estudios de Benchmarking para conocer a los competidores, y también Encuestas en Línea.&lt;/p&gt;"/></a>
	        <a><img src="images/ladybug.jpg" title="¡Que todo el mundo te vea!" width="580" height="360" alt=" &lt;h3&gt;¡Que todo el mundo te vea!&lt;/h3&gt;&lt;p&gt;Desarrollamos tu sitio web a la medida de tu negocio.&lt;/p&gt;"/></a>
	        <a><img src="images/lightning.jpg" title="Que tu negocio se escuche" width="580" height="360" alt=" &lt;h3&gt;Que tu negocio se escuche&lt;/h3&gt;&lt;p&gt;Creamos música para sitios web, comerciales y mucho más....&lt;/p&gt;"/></a>
	        <div class="caption"><div class="content"></div></div>
            </div>
            <!-- final de la sustitución --> 

Con esto, solucionado el problema...

Bye

[alvarols]

Muchísimas gracias

[Daniel Ulczyk]

Iniciado por Carlangueitor

Tambien se puede poner en las etiquetas <link>

Tu debes de esparcir algo de Karma a otros usuarios antes de darle otra vez a Carlangueitor.

[Carlangueitor]

@Daniel Ulczyk

Ya sera para la otra, Gracias!!!

[Marma]

Hola a mi me pasa lo mismo el problema es que no valida porque la etiqueta img no puede tener el atributo rel, pero probe cambiando por alt en ambos codigos y deja de andar.

Mi codigo de javascript es este:

Código:

    <script type="text/javascript">
        $(document).ready(function(){
            $("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 7000, true);
		    $("img[rel]").overlay();
			
        });
    </script>

y las imagenes a mostrar son

Código:

<img src="http://farm4.static.flickr.com/3651/3445879840_7ca4b491e9_m.jpg"  rel="#mies1"alt="#mies1"> 
          <img src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" rel="#mies2" alt="#mies2"/><img src="http://farm4.static.flickr.com/3346/3449388113_71a06b8548_m.jpg" rel="#mies3" alt="#mies3"/>

agradeceria alguna sugerencia gracias!

[deirdre]

Hola Marma

Es necesario que pongas la url del sitio para estudiar un poco el caso. O, en su defecto, el código completo para crear un html, pasarlo por el validador y buscar soluciones.

Bye