Osiris: Links inhaltlich gestalten

Hallo.

Ich möchte zu Testzwecken einem Link eine feste Größe geben.
Dies soll nur mit HTML und/oder CSS geschehen.

Ich möchte mal kurz zeigen, wie ich mir das vorstelle:
+---------------------------------+
|Hier ist ein Link                |
|                                 |
|                                 |
+---------------------------------+

Der gesamte markierte Bereich soll klickbar/hoverbar sein.

Klar, ich hab CSS versucht (hier mal die Auszüge):
#linklink {width: 250px; height: 75px;}

<a href="http://de.selfhtml.org" id="linklink">Hier ist ein Link</a>

Das bringt kein Resultat.

Ein weiterer Versuch:
#linklink {padding: 50px;}

<a href="http://de.selfhtml.org" id="linklink">Hier ist ein Link</a>

Es wird zwar gepadded, aber der gepaddede Bereich ist nicht klickbar.

Versuch Nummer 3:

#linklink {width: 250px; height: 75px; display: block;}

<a href="http://de.selfhtml.org" >
    <span id="linklink">
    Hier ist ein Link
    </span>
</a>

Trotz allem ist der Link nur über dem Text klick/hoverbar .

Ich hoffe, ihr habt gesehen, wonach ich suche.
Kennt ihr eine JS-freie Lösung?

mfg,
Marc

  1. Wie wäre es denn mit dem allseits beliebten DIV-Element?

    Versuch einfach mal folgendes:

      
    <a href = "#">  
      <div style = "width:300px; height:200px;">  
        Hier ist ein Link  
      </div>  
    </a>  
    
    

    MfG,

    McKinsey

    1. Ciao!

      <a href = "#">
        <div style = "width:300px; height:200px;">
          Hier ist ein Link
        </div>
      </a>

        
      Das »funzt« zwar vermutlich in den bekannten Browsern, ist aber invalide und daher nicht zu empfehlen. a-Elemente dürfen keine Blockelemente enthalten.  
        
      Viele Grüße vom Længlich
      
      1. Dann tausch doch das div gegen ein span mit display:block;

        Gruß,
        Manu

        --
        Deutschland ist einfach von einer Diktatur der Nationalsozialisten zu einer Diktatur der Gutmenschen übergegangen.
        1. Yerf!

          Dann tausch doch das div gegen ein span mit display:block;

          Wenn du dir das Original-Posting gnauer anschaust wirst du feststellen, dass dies bereits erfolglos getestet wurde...

          Aber wieso kommt man eigentlich nicht gleich auf das Naheliegenste und gibt dem Link das display:block? Stattdessen wird immer Versucht mit Span und Div zu hantieren, als würde CSS nur bei diesen Elementen wirken...

          Gruß,

          Harlequin

          --
          <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
          1. Hallo allerseits, besonders du, Harlequin.

            Wenn auch du die erste Antwort (gleich di unter meiner Frage, von mir selbst) gelesen hättest, hätte sich alles erübrigt.

            (und genau aus Validitätsgründen benutze ich keine <div>, danke für die ermüdende Antwort!)

            mfg,
            Marc

            1. Grütze .. äh ... Grüße!

              Wenn auch du die erste Antwort (gleich di unter meiner Frage, von mir selbst) gelesen hättest, hätte sich alles erübrigt.

              (und genau aus Validitätsgründen benutze ich keine <div>, danke für die ermüdende Antwort!)

              Wenn du die Antwort von Harlequin _verstehend_ gelesen hättest, dann wüßtest du, daß und auch wie das Gewünschte ganz ohne div span oder sonstiges zu erreichen ist.


              Kai

              --
              What is the difference between Scientology and Microsoft? One is an
              evil cult bent on world domination and the other was begun by L. Ron
              Hubbard.
              ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
              1. Grütze .. äh ... Grüße!

                Ach so "Antwort" sorry!


                Kai

                --
                What is the difference between Scientology and Microsoft? One is an
                evil cult bent on world domination and the other was begun by L. Ron
                Hubbard.
                ie:{ fl:( br:< va:) ls:? fo:| rl:? n4:° ss:{ de:] js:| ch:? mo:| zu:|
            2. Yerf!

              Wenn auch du die erste Antwort (gleich di unter meiner Frage, von mir selbst) gelesen hättest, hätte sich alles erübrigt.

              Das ganze ging auch weniger an dich als an den Vorposter (Manu) und die Allgemeinheit...

              Gruß,

              Harlequin

              --
              <!--[if IE]>This page is best viewed with a webbrowser. Get one today!<![endif]-->
  2. Hallo nochmal.

    Reumütig kehre ich an den Ort meiner Sünde zurück.

    Ich muss zu meiner Verteidigung sagen: Ich habe die Suchfunktion benutzt. Ich habe gesucht, ja, bitte glaubt mir. Da war nichts.

    Und wie ich beginne, mir die Wartezeit zu vertreiben, kommt mir ein anderer Eintrag in den Blick, so gar nich das, was ich erwartet hatte, aber genau das hat meine Frage geklärt.

    Also, bitte keinen gehässigen Kommentare, oder sonst irgendwelche dummen Bemerkungen, hier gehts zur Antwort.

    http://forum.de.selfhtml.org/?t=163514&m=1064645

    1. ein a-link ist ein Inline-Element. Das hat keine Breite und Höhe in dem Sinne.

      Wenn das ein Button ist gibt es die Möglichkeit daraus ein Blockelemt zu machen. display:block

      Bei Linsk die im Textfluss vorkommen hilft das nur bedingt.

      Da ist es einfacher die Fläche auf die gewünschte Größe zu bekommen indem man padding dazugibt, was die hingerrundfläche/farbe auch erweitert.

      Das ist dann aber weiterhin vom Zeilenabstand abhängig und der Breite des Textes.