Sparta8: H1-Logo Verlinken

Ich habe über folgende methode H1 und Logo auf meiner Seite eingebunden:

<h1 class="h1"><span>Hauptüberschrift H1</span></h1>

.h1{  
	background: url(../images/logo.jpg) no-repeat;  
	height: 100px;  
	width: 236px;  
}  
  
h1 span {  
visibility: hidden;  
}

Wenn ich nun versuche das ganze zu verlinken, sodass der user mit einem klick auf der startseite landet:
<a href="#"><h1 class="h1"><span>Hauptüberschrift H1</span></h1></a>

spuckt mir der WC3 validator folgenden fehlermeldung aus:

1.   Error  Line 19, Column 68: document type does not allow element "h1" here; missing one of "object", "ins", "del", "map", "button" start-tag

…tartseite.html"><h1 class="h1-content"><span>Werkzeugmaschinen wie Deckel Fräs…

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

Hat irgendwer eine ahnung wie ich das am besten lösen könnte?

Vielen vielen dank für eure hilfe!

  1. Hat irgendwer eine ahnung wie ich das am besten lösen könnte?

    Schmeiss das span-Element weg und ersetz es durch ein a-Element

    Den Text kannst du mit text-indent genauso verschwinden lassen.

    1. Den Text kannst du mit text-indent genauso verschwinden lassen.

      Wie geht das genau?

      1. @@Sparta8:

        nuqneH

        Den Text kannst du mit text-indent genauso verschwinden lassen.
        Wie geht das genau?

        Link folgen. Dann Link folgen.

        Qapla'

        --
        Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
        (Mark Twain)
  2. 'ǝɯɐu$ ıɥ

    Ich habe über folgende methode H1 und Logo auf meiner Seite eingebunden:

    <h1 class="h1"><span>Hauptüberschrift H1</span></h1>

    .h1{

    background: url(../images/logo.jpg) no-repeat;
    height: 100px;
    width: 236px;
    }

    h1 span {
    visibility: hidden;
    }

      
    Was hat das <span> IN deiner Überschrift verloren? Du kannst auch Hx direkt stylen...  
      
    <http://de.selfhtml.org/html/verweise/definieren.htm@title=<h1 class="h1"><a  href="deineseite.html">Hauptüberschrift H1</a></h1>>  
      
    ssnɹƃ  
    ʍopɐɥs
    
    -- 
    Answers: $1, Short: $5, Correct: $25, dumb looks are still free ...
    
    1. @@Shadowcrow:

      nuqneH

      Was hat das <span> IN deiner Überschrift verloren?

      Image replacement. Das geht allerdings auch ohne zusätzliches Element. ↗[Meiert]

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
      1. 'ǝɯɐu$ ıɥ

        Was hat das <span> IN deiner Überschrift verloren?

        Image replacement. Das geht allerdings auch ohne zusätzliches Element. ↗[Meiert]

        Ich finde solche Verrenkungen bei Logos unnötig, die binde ich per <img> direkt ein, sie dienen normalerweise ja nicht nur zur Verschönerung der Seite sondern transportieren ja auch Inhalte.

        ssnɹƃ
        ʍopɐɥs

        --
        Answers: $1, Short: $5, Correct: $25, dumb looks are still free ...
        1. Ich finde solche Verrenkungen bei Logos unnötig, die binde ich per <img> direkt ein, sie dienen normalerweise ja nicht nur zur Verschönerung der Seite sondern transportieren ja auch Inhalte.

          Ja aber wenn ich H1 und das Logo in einem Eelemt vereinen möchte, stellt eine Image Replacement Methode eine gute Möglichkeit dar.

          1. @@sparta8:

            nuqneH

            Ja aber wenn ich H1 und das Logo in einem Eelemt vereinen möchte, stellt eine Image Replacement Methode eine gute Möglichkeit dar.

            Gegen <h1><a><img/></a></h1> spräche?

            Für Alternativtext stellt @alt eine gute Möglichkeit dar.

            Qapla'

            --
            Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
            (Mark Twain)
  3. @@Sparta8:

    nuqneH

    <h1 class="h1">

    Was soll denn der Unsinn? Wozu @class? Was gibt es bei Überschriften 1. Grades zu klassifizieren?

    Den Typselektor kennst du? [CSS2 §5.4]

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
    1. Was soll denn der Unsinn? Wozu @class? Was gibt es bei Überschriften 1. Grades zu klassifizieren?

      hehe, ja ich weiß. h1 mit einer klasse anzusprechen ist nicht gerade sehr elegant gelöst. danke, ist mir auch grad aufgefallen.

  4. Hallo,

    Wenn ich nun versuche das ganze zu verlinken, sodass der user mit einem klick auf der startseite landet:
    <a href="#"><h1 class="h1"><span>Hauptüberschrift H1</span></h1></a>

    ... dann ist das ungültiges HTML. Denn ein a-Element darf nur inline-Inhalt haben, h1 ist aber ein Blockelement.

    spuckt mir der WC3 validator folgenden fehlermeldung aus:

    ... die wie so oft sehr irreführend ist.

    1.   Error  Line 19, Column 68: document type does not allow element "h1" here; missing one of "object", "ins", "del", "map", "button" start-tag

    Unfug. Kein mir bekannter (X)HTML-DOCTYPE erlaubt h1 in a (vielleicht HTML5, keine Ahnung).

    One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

    Das kommt der Sache schon näher.

    Ciao,
     Martin

    --
    Ordnung ist, wenn man etwas findet, was man gar nicht sucht.
    1. Unfug. Kein mir bekannter (X)HTML-DOCTYPE erlaubt h1 in a (vielleicht HTML5, keine Ahnung).

      In HTML5 ist das a-Element ein block-Element - einer der halbwegs sinnvollen erweiterungen - ein href-Attribut auf beliebigen Elementen wäre aber praktischer gewesen - allein schon für Menüs.

      1. Hi,

        Kein mir bekannter (X)HTML-DOCTYPE erlaubt h1 in a (vielleicht HTML5, keine Ahnung).
        In HTML5 ist das a-Element ein block-Element - einer der halbwegs sinnvollen erweiterungen

        sinnvoll? Ich kann darin keinen Sinn erkennen. Die reine Tatsache, dass "etwas" mit einem Hypertext-Verweis belegt wird, macht nach meinem Verständnis nicht automatisch einen Block daraus. Ein Link versieht seinen Inhalt mit einer "Funktion", soll aber IMHO semantisch und gestalterisch ansonsten neutral sein.
        Links im Fließtext sind damit also nicht mehr vorgesehen?

        ein href-Attribut auf beliebigen Elementen wäre aber praktischer gewesen - allein schon für Menüs.

        Ja, keine Frage. Aber nööö ...

        So long,
         Martin

        --
        Lache, und die Welt wird mit dir lachen.
        Schnarche, und du schläfst allein.
        1. sinnvoll? Ich kann darin keinen Sinn erkennen. Die reine Tatsache, dass "etwas" mit einem Hypertext-Verweis belegt wird, macht nach meinem Verständnis nicht automatisch einen Block daraus. Ein Link versieht seinen Inhalt mit einer "Funktion", soll aber IMHO semantisch und gestalterisch ansonsten neutral sein.
          Links im Fließtext sind damit also nicht mehr vorgesehen?

          Mein Fehler - a-Elemente dürfen Block-Elemente beinhalten, sind aber selbst keine.

          1. Hallo,

            sinnvoll? Ich kann darin keinen Sinn erkennen. Die reine Tatsache, dass "etwas" mit einem Hypertext-Verweis belegt wird, macht nach meinem Verständnis nicht automatisch einen Block daraus. Ein Link versieht seinen Inhalt mit einer "Funktion", soll aber IMHO semantisch und gestalterisch ansonsten neutral sein.
            Links im Fließtext sind damit also nicht mehr vorgesehen?

            Mein Fehler - a-Elemente dürfen Block-Elemente beinhalten, sind aber selbst keine.

            ah, okay - dann sehe ich das auch als sinnvolle Neuerung, die der universellen Verwendbarkeit des a-Elements entgegenkommt.

            Ciao,
             Martin

            --
            Ich bin im Prüfungsstress, ich darf Scheiße sagen.
              (Hopsel)
  5. Ok, egal mit welcher Image-Replacement-Technik ich es versuche. Es scheitert immer am folgenden:
    Das Logo wird als BG-Bild von H1 eingebunden. Wenn ich den a-Tag nun zwischen <h1></h1> setzte wird nur der Text verlinkt, welcher natürlich nicht die ausmaße des Logos hat. Ich möchte aber, dass der Link genau so groß wie das Logo selbst ist. Darf aber natürlich <h1> nicht zwischen <a> setzten.

    Hat irgendwer sonst welche Vorschläge?

    1. Ok, egal mit welcher Image-Replacement-Technik ich es versuche. Es scheitert immer am folgenden:
      Das Logo wird als BG-Bild von H1 eingebunden. Wenn ich den a-Tag nun zwischen <h1></h1> setzte wird nur der Text verlinkt, welcher natürlich nicht die ausmaße des Logos hat. Ich möchte aber, dass der Link genau so groß wie das Logo selbst ist.

      Die display-, width-, height- oder position-Eigenschaften sind dir aber ein Begriff?

      Gunnar hat dir extra den Meiert-Artikel verlinkt, den solltest du lesen, nicht nur billigen hinnehmen, dass er gepostet wurde - da steht genau, wie's gemacht wird - die Phark-Methode ist ggf. interessant.

    2. Hallo,

      Das Logo wird als BG-Bild von H1 eingebunden. Wenn ich den a-Tag nun zwischen <h1></h1> setzte wird nur der Text verlinkt, welcher natürlich nicht die ausmaße des Logos hat. Ich möchte aber, dass der Link genau so groß wie das Logo selbst ist.

      ja, dann mach das doch: Formatiere ihn zu einem Blockelement um, und gib ihm, falls nötig, noch Breite und Höhe.

      So long,
       Martin

      --
      Ordnung ist, wenn man etwas findet, was man gar nicht sucht.
    3. @@Sparta8:

      nuqneH

      Wenn ich den a-Tag nun zwischen <h1></h1> setzte wird nur der Text verlinkt, welcher natürlich nicht die ausmaße des Logos hat. Ich möchte aber, dass der Link genau so groß wie das Logo selbst ist.

      h1 a { display: block }

      Qapla'

      --
      Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
      (Mark Twain)
  6. Hallo,

    <a href="#"><h1 class="h1"><span>Hauptüberschrift H1</span></h1></a>

    spuckt mir der WC3 validator folgenden fehlermeldung aus:

    präsentiert als HTML5 würde er sich nicht beklagen.

    Grüsse

    Cyx23