Estructura xhtml1/css

[frijolerou]

(He editado el mensaje para que se entendiera mejor, ya que estaba medio confuso)

Veamos, tengo la siguiente estructura para un xhtml1.0 valido:

Código HTML:

<div id="contenedor">
  <div id="encabezado">
    <h1><span>Titulo</span></h1>
    <h2><span>Subtitulo</span></h1>
  </div>
</div> 

Lo que trato de lograr es dejar el id "encabezado" como "imagen" linkeado a una URL, pero debe cumplir dos condiciones:

1-. Sin tocar el XHTML (salvo para agregar la(s) etiqueta(s) <a> para el link), lo que significa que no se puede meter una etiqueta <img /> (esto lo quiero dejar como ultimo recurso, ya que mi intencion es NO usar etiquetas <img /> para imagenes que tengan que ver con el "diseño" de la pagina).

2-. Debe seguir siendo un XHTML valido.


Alguien que me heche una ma nito plissss

[JavierB]

Hola frijolerou

A ver si te he entendido bien.

Código HTML:

<div id="contenedor">
  <div id="encabezado">
    <a href="tupagina.html"></a>
    <h1><span>Titulo</span></h1>
    <h2><span>Subtitulo</span></h2>
  </div>
</div> 

Y usas este código Css:

Código HTML:

<style type="text/css">
#encabezado a {width:90px;height:90px;
display:block;background:url('imagen.jpg');}
</style> 

El width y el height son las dimensiones de la imágen que uses.

Saludos,

[KnowDemon]

Si lo que deseas es que la imágen contenga los titulos, y no deseas que se vean (pues la imágen ya los contendría), puedes agregar a tus reglas de estilo lo siguiente:

#encabezado h1, #encabezado h2{
display: none;
}

[posavasos]

Código:

<div id="contenedor">
  <div id="encabezado">
    <h1><a href="enlace.htm"><span>Titulo</span></a></h1>
    <h2><span>Subtitulo</span></h1>
  </div>
</div>

Código:

#encabezado h2, #encabezado h1 a span { display:none; }
#encabezado h1 a { background:url('imagen.jpg'); }

Luego a "#encabezado h1 a" le pones el tamaño que quieras

[frijolerou]

JavierB: lo mismo me comentaron e otro sitio, pero lo que no me gustaba era que <a></a> fuera una etiqueta vacía (un poco maniático, lo sé jajajajaj).

Me pareció más logica la solucion de posavasos, con una pequeña correccion del CSS


#encabezado h2, #encabezado h1 a span {
display:none;
}
#encabezado h1 a {
background:url('imagen.jpg');
display:block;
width:100px;height:100px;
}


Gracias por la ayuda