Your Ad Here

advanced code snippet search

Posted By

demixo on 10/26/08


Tagged

css html


Versions (?)

Semántica h1

 / Published in: CSS
 

URL: http://www.panoramio.com/

  1. El uso de javascript: lo veo muy instrusivo en el código, y más pudiéndose usar otra alternativa

  2. Poner el logo de fondo al "H1" me parece correcto, pero "esconder" el texto con text-indent: -1000px; es dañino porque si accedemos con la opción "no mostrar imágenes" lo perdemos todo.

  3. propongo una alterntiva similar a la anterior mejor más correcta: (la usada en panoramio.com)

Crear un "H1", y dentro de éste un "span". A este "span" se se coloca la imagen de fondo. Al "H1" y al "span" se le da el mismo tamaño, y usando "z-index" colocamos visualmente el "span" por delante del "H1". Al ver la web sin imágenes, veremos el texto del "H1" en su sitio.

Nota: texto extraído de la lista de Ovillo

Expand | Embed | Plain Text 
  1. /*HTML*/
  2. <h1 id="panoramio"><span class="img"></span>Panoramio</h1>
  3.  
  4.  
  5. /*CSS*/
  6. h1 span.img
  7. {
  8. display: block;
  9. position: absolute;
  10. left: 0pt;
  11. top: 0pt;
  12. z-index: 1;
  13. }
  14.  
  15. h1#panoramio, h1#panoramio span.img
  16. {
  17. width: 307px;
  18. height: 72px;
  19. }
  20.  
  21. h1#panoramio span.img
  22. {
  23. background-image: url(/img/logo-panoramio-google.v1.gif);
  24. }

Report this snippet  

You need to login to post a comment.