Links inhaltlich gestalten
Osiris
- html
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
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
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
Dann tausch doch das div gegen ein span mit display:block;
Gruß,
Manu
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
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
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.
Cü
Kai
Grütze .. äh ... Grüße!
Ach so "Antwort" sorry!
Cü
Kai
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
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
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.