✔ Link unsichtbar aber da

[sra]

Hallo

Ich möchte gerne einen Link haben, diesen aber nicht sehen

Hintergrund:
In einem CMS (dotnetnuke) habe ich ein vorgefertigtes Menumodul. Wie das auch sein soll, hat es da drin echte Links mit Text - also Menupunkte. Nun möchte ein Kunde aber eine eigene krasse Schrift da haben, was ich ihm nicht ausreden konnte (das hat man davon, wenn man das Design geliefert bekommt).

Also hab die Bilder reingehauen (background-image der td's), nur habe ich jetzt halt den normalen Text vom Link noch drüber. Blende ich diesen aus (visibility:hidden / display:none), dann geht logischerweise auch der Link nicht mehr, da er ja eigentlich nicht vorhandenn ist.

Am liebsten hätte ich also den Link "gestreckt" auf die gesamte td, aber halt doch unsichtbar.

Ich weiss, dass das den Sinn von CSS verfehlt und dass Javascript dafür die bessere Wahl wäre, aber ich habe da eben so ein vorgefertigtes Modul, welches kein editieren zulässt. Ausserdem sollte das halt quick and dirty sein - auch wenn ich das selber nicht so mag.)

Any Ideas?

 

[d2wap]

Warum modellierst du das Menü nicht um, sodass die Tabellenspalten verlinkt werden und nicht der Inhalt?

Sinnvollerweise kannst du das auch selber ausbessern mit etwas PHP.

 

[MeinerEiner_80]

Moin!
Probiers mal so,

a span {visibility:hidden;}

<a href="www.tutorials.de"><span>Linktext</span></a>

Klappt zumindest bei mir..
Oder, wieso nicht direkt das Bild verlinken?

*grüssle*
MeinerEiner

 

[sra]

Hallo

Danke erstmal für die schnellen Antworten.
Das Menu ummodellieren will ich nicht, da das unter Umständern sehr zeitintensiv sein kann. Ich arbeite in ASP.NET und nicht php, wo es sicherlich sehr einfach wäre.

Werd mir aber diese Assembly mal anschauen - vielleicht lässt sich da ja auch ohne grossen Aufwand was hinbiegen.

 

[Maik]

Hi,

ich kann mich da nur dem Vorschlag von MeinerEiner_80 anschliessen und würde es auch nicht anders umsetzen, abgesehen von der CSS-Eigenschaft:

a span { 
display:none; 
}

<a href="#"><span>Unsichtbarer Linktext</span></a>

Und die Hintergrundbilder bestimmst du dann anstelle für die Tabellenzellen direkt für die Links.

 

[sra]

Hallo - Ich denke das wird ein "gebastel"

Vielleicht kurz, damit ihr versteht wieso ich die HTML Erscheinung des Menus nicht ändern kann: Anders als php (was eine imo sehr geile Skriptsprache ist) is asp.net eine Programmiersprache. Der Unterschied ist im Grunde, dass eine Programmiersprache ein Programm erstellt, während eine Skriptsprache eine Art "Befehlssatz" erstellt, der von einem Programm interpretiert wird. Ein Programm heisst in diesem Falle (das Menu ist auch in asp.net) eine dll - die ich natürlich nicht mehr ändern kann, und deren Quellcode ich nicht habe.

Ich kann aber in DNN jeder Seite einen Titel geben, der dann im Menu verwendet wird. Also kann ich der Seite den Titel <span>Menu 1</span> geben. Somit sieht das HTML etwa so aus wie in eurem Beispiel. Mein Problem ist nun das Hintergrundbild, welches über die id #invsidemenu-<span>Menu_1</span> gesetzt wird. Wie ihr seht, nimmt er als id-Namen den Seitentitel. Schreibe ich das jedoch in meine css Datei, so gibt es einen Fehler, da diese Zeichen (< > /) nicht benutzt werden dürfen.

Gibt es eine Möglichkeit diese Zeichen da reinzuhauen? Vielleicht mit &gt; oder mit dem ASCII Wert oder so?

Vielen Dank für eure Mühe

 

[luukvh]

probiers mal damit

<a href="link.html" target="_blank" style="visibility:hidden">www.irgendwas.de</a>

 

[Maik]

Hi!

@luukvh: Hast du den Eingangspost nicht vollständig gelesen?

Also hab die Bilder reingehauen (background-image der td's), nur habe ich jetzt halt den normalen Text vom Link noch drüber. Blende ich diesen aus (visibility:hidden / display:none), dann geht logischerweise auch der Link nicht mehr, da er ja eigentlich nicht vorhandenn ist.

@sra: Die unerlaubten Sonderzeichen im ID-Namen können nicht durch HTML-Entities ersetzt werden.

 

[sra]

Der unsichtbare Link funktioniert übrigens wunderbar, mit der span Methode. Danke!

Mein letztes Problem ist jedoch, dass die td jetzt ein Attribut id="invsidemenu-<span>Idee</span>" hat, welches ich gerne in der verlinkten css Datei aufgreifen würde (schliesslich bringt ein unsichtbarer Link nichts, wenn er nicht über einem Bild steht). Ich habe es mit HTML Entities versucht, jedoch bin ich daran gescheitert. Gibt es da etwas zu beachten?

Mein Versuch sieht so aus:

#invsidemenu-<span>Idee<⁄span>
{
	height:26px;
	background-image:url(images/Idee.gif);
}

Die nächste Antwort könnte für mich übrigens ~50 Euro Wert sein, denn so viel würde ein alternatives Menu kosten, welches diese Bilder-Link Geschichte schon mitbringt.

 

[Quaese]

Hi,

vielleicht ein völlig anderer Ansatz. Formatiere die Links als Blockelemente und definiere overflow so, dass
hinausragender Inhalt nicht angezeigt wird (hidden). Jetzt rückst Du die erste Zeile mit text-indent so weit ein,
dass sie nicht mehr angezeigt wird. Das funktioniert jedoch nur bei einzeiligen Linktexten, ausserdem muss
für die Links eine Breite angegeben werden.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Menue_1</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
.Menue_1{ display: block;
          height: 30px;
          width: 100px;
          text-indent: 999em;
          text-decoration: none;
          overflow: hidden;
          background: url(bild.gif);}
 //-->
</style>
</head>
<body>
<table style="border: 1px solid #a00;">
  <tr>
    <td><a class="Menue_1" href="#">Linktext</a></td>
    <td><a class="Menue_1" href="#">Linktext</a></td>
  </tr>
</table>
</body>
</html>

Funktioniert bei mir im IE ab Ver. 5.5, Opera ab Ver. 7.54, FF ab Ver. 1.5, Netscape 7.1, Mozilla 1.7 sowie im Konqueror 3.3.

Vielleicht kannst Du damit etwas anfangen.

Ciao
Quaese