Neuling8: Link einfügen

SELF-Forum

Link einfügen

Neuling8 (Versionen)
– Informationen zu den Bewertungsregeln

Servus zusammen!

Ich würde gerne ein Feld mit einem hinterlegten Link einfügen. Leider klappt das bei diesem Code nur, wenn ich auf den Text innerhalb des Feldes klicke. Gibt es eine Möglichkeit den Code so umzuschreiben, dass man per klick auf den gesamten Bereich des Feldes zu dem Link geleitet wir?

#Feld1 {
color:#FFFFFF;
font-family:Century Gothic;
font-size:20px;
text-align:center;
position: absolute;
top:520px;
left:800px;
width:400px;
height:190px;
z-index:2;
background-color:#000000;
opacity: 0;
}

#Feld1 a:link {
color:#000000;
text-decoration:none;
}

#Feld1 a:hover {
color:#000000; text-decoration:none;
}

#Feld1 a:visited {
color:#000000; text-decoration:none;
}

</style>
</head>
<body>


<div id="Feld1"><a href="https://selfhtml.org/">Dieser Text ist nicht sichtbar</a></div>

Vielen Dank für eure Antworten (:

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Link einfügen

    Matthias Scharwies
    – Informationen zu den Bewertungsregeln

    Servus!

    Servus zusammen!

    Ich würde gerne ein Feld mit einem hinterlegten Link einfügen. Leider klappt das bei diesem Code nur, wenn ich auf den Text innerhalb des Feldes klicke. Gibt es eine Möglichkeit den Code so umzuschreiben, dass man per klick auf den gesamten Bereich des Feldes zu dem Link geleitet wir?

    Dank für eure Antworten (:

    Entweder mit display:block für a und entsprechenden Größenangaben oder indem du das a-Element als Feld nimmst:

    <a id="Feld1" href="https://selfhtml.org/">
  <h1>Überschrift </h1>
  <p>Dieser Text ist nicht sichtbar</p>
</a>
 

> ~~~

    Herzliche Grüße

    Matthias Scharwies

    --
    "I don’t make typos. I make new words."
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Link einfügen

      Rolf B
      – Informationen zu den Bewertungsregeln

      Hallo Matthias,

      ich wusste gar nicht, dass hier ein Service Level von 35 Minuten gilt…

      Rolf

      --
      sumpsi - posui - clusi
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. Link einfügen

    Rolf B
    +2 Informationen zu den Bewertungsregeln

    Hallo Neuling8,

    du legst also ein transparentes Rechteck an eine bestimmte absolute Position und möchtest, dass das ein Link ist. Dieses Vorgehen begrenzt die Bedienbarkeit der Seite, weil man beim Durchlaufen der Seitenelemente mit TAB kein Outline bekommt, und ist darum nicht wirklich gut.

    Deswegen sollte das div entfallen und nur ein a Element verwendet werden. Dieses stylest Du gemäß Matthias Vorschlag als Block. Textformatierung ist unnötig. Den verbirgst Du anders. Text muss aber hinein, sonst würde ein Benutzer mit einem Screenreader nicht wissen, was da gerade aktviert wurde. Das kannst Du z.B. mit einem div im a machen, das Du auf overflow:hidden width:0 setzt.

    <a id="Feld1"><div>Besonderes</div></a>

    #Feld1 {
  position: absolute;
  top:520px;
  left:800px;
  width:400px;
  height:190px;
  z-index:2;
}

#Feld1 div {
  width: 0; overflow:hidden;
}

    Ein anderes Problem sind die absoluten Koordinaten. Das deutet darauf hin, dass deine Seite nicht responsiv ist. Wenn sie auf einem Handy dargestellt wird, dürfte der Link nicht im sichtbaren Bereich liegen. Was hier alles verbesserungsbedürftig ist, kann man aber ohne Kenntnis der Seite kaum sagen, da hilft erstmal nur ein Link auf responsives Design in unserem Wiki.

    Rolf

    --
    sumpsi - posui - clusi
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln