Felix Riesterer: Seite springt bei klick auf Verlinkung an den Seitenanfang

Beitrag lesen

SELF-Forum

Seite springt bei klick auf Verlinkung an den Seitenanfang

Felix Riesterer Homepage des Autors
+1 Informationen zu den Bewertungsregeln

Liebe(r) Thirteen37,

wenn ich auf das verlinkte Bild klicke, springt die Seite automatisch an den Seitenanfang.

Meine Frage ist: Wie verhindere ich das?

meine Antwort: Überhaupt nicht.

Wenn Du einen Link betätigst, dann lädt der Browser die verlinkte Resource. Das ist ein Wechsel von einer Seite zur nächsten. In Deinem Fall scheint man auf der immer gleichen Seite zu bleiben, aber für den Browser ist nun einmal http://example.org/?a etwas anderes als http://example.org/?b.

Du schreibst, dass Du eine Art Fernbedienung bauen willst. Dazu finde ich Deinen HTML-Code extrem ungünstig. Alles steckt in Tabellenzellen. Das ist unflexibel. Warum nicht so?

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Meine Fernbedienung</title>
    <style>
      ul {
        list-style: none;
      }
      li {
        display: inline-block;
      }
      li > a {
        background-position: center center;
        background-repeat: no-repeat;
        display: block;
        /* 10px Abstand nach rechts und unten */
        margin: 0 10px 10px 0;
        /* abhängig von den Maßen der Button-Bilder */
        height: 20px;
        width: 30px;
      }
      /* Button-Bilder */
      a[href="?a"] {
        background-image: url(a.png);
      }
      a[href="?b"] {
        background-image: url(b.png);
      }
      a[href="?c"] {
        background-image: url(c.png);
      }
      a[href="?d"] {
        background-image: url(d.png);
      }
    </style>
  </head>
  <body>
    <h1>Meine Fernbedienung</h1>
    <ul>
      <li><a href="?a">a</a></li>
      <li><a href="?b">b</a></li>
      <li><a href="?c">c</a></li>
      <li><a href="?d">d</a></li>
    </ul>
  </body>
</html>

Ich habe eine Liste für die Buttons verwendet. Mit den Layout-Angaben im style-Element habe ich dafür gesorgt, dass die Listenelemente nebeneinander wie Fließtext angeordnet werden und 30x20 Pixel groß sind. Willst Du "eine neue Zeile", erstellst Du einfach eine weitere Liste.

Für weitere Hinweise, wie Du das Layout verfeinern kannst, hier wesentliche Links zu Inhalten unseres SELFHTML-Wikis:

Liebe Grüße,

Felix Riesterer.

Beitrag melden
+1
Informationen zu den Bewertungsregeln