zwei Anker hintereinander in einer URL

Industriemeister · 5 April 2011

Hallo,

ich versende mit einem Link

<a href="index.php?Bereich=erotikideen&Inhalt=handschuh&#G-I"

einen Anker

#G-I

Dadurch öffnet sich eine Navigation an der angegeben Stelle und die Unterpunkte werden sichtbar.

Doch hat dies auch den unschönen Nebeneffekt das der Bildschirm an diese Stelle ein DIV mit der Id="G-I" (in der Navigation) springt und z.T. ein Großteil des Inhaltes nicht mehr gelesen werden kann.

Ich würde das gern vermeiden. Und dachte mir ich sende einfach einen zweiten Anker. Der sich dann auf ein anderes Div-ID bezieht. Und so die Seite nicht irgendwo mitten drin angezeigt wird.

Also zum Beispiel

<a href="index.php?Bereich=erotikideen&Inhalt=handschuh&#G-I&#hauptramen"

doch scheinbar wird der zweite Anker in der URL nicht mitgesendet.

Wo ist mein Denkfehler? Was könnte ich anders machen bei gleicher Navigation?

mermshaus · 5 April 2011

Hm, du hast eine „ankerbasierte“ dynamische Navigation (JavaScript, nehme ich an?), die dann aber nicht berücksichtigt, dass Inhalt „übersprungen“ wird?

Also, auf normalem Wege kannst du da nichts machen. Es gilt immer nur ein Fragment-Identifier pro URL.

Was könnte ich anders machen bei gleicher Navigation?

Das lässt sich glaube ich nicht beurteilen, ohne das genaue Verhalten der Navigation zu kennen.

Industriemeister · 5 April 2011

Kein JavaScript

Nein bei der Standart Navigation (alles außer IE) nutze ich kein JavaScript.
Es ist ein css-code den ich verwende.
Und auf den durch eine Verlinkung im index.php zurückgegriffen wird

der Code der für das öffnen verantwortlich ist.

Code:

/* * {
  margin:0;
  padding:0;
  } */

a {      /* grundsätzlich kein Untestreichung im der Navigation bei Hyperlinks */
text-decoration: none;
}

.accordionhead {
font-family: "Comic Sans MS", sans-serif;
font-size:20px;
font-weight: bold;
color: #7D0000;
text-shadow: 2px 2px 2px #8eaeae;
background: #AC0D04; /* alternativer Background für Browser die den Farbverlauf nicht unterstützen */
background: -moz-linear-gradient( top, #FF0000,  #800000); /* farbverlauf von rot zu Mahagoni */ /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#800000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000, endColorstr=#ff800000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000, endColorstr=#ff800000)";   /* IE 8 */
-moz-border-radius: 10px 10px 0px 0px;  /* FF, seemonkey 1, Netscape 6 */
-webkit-border-top-left-radius: 10px; /* safari,  Chrome  -> safari ignoriert Befehle bei 4 Werten */
-webkit-border-top-right-radius: 10px; /* safari, Chrome  -> safari ignoriert Befehle bei 4 Werten */
-icab-border-radius: 10px 10px 0px 0px; /* icab */
-o-border-radius: 10px 10px 0px 0px; /* Opera */
-khtml-border-radius: 10px 10px 0px 0px; /* konqueror */
border-radius: 10px 10px 0px 0px;    /* css3 */
padding: 5px 10px;
width: 180px;
height: auto;
float: left;
}

.accordionfeed {
font-family: "Comic Sans MS", sans-serif;
font-size:13px;
background: #AC0D04; /* alternativer Background für Browser die den Farbverlauf nicht unterstützen */
background: -moz-linear-gradient( top, #FF0000,  #800000); /* farbverlauf von rot zu Mahagoni */ /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#800000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000, endColorstr=#ff800000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000, endColorstr=#ff800000)";   /* IE 8 */
-moz-border-radius: 0px 0px 10px 10px;  /* FF, seemonkey 1, Netscape 6 */
-webkit-border-bottom-left-radius: 10px; /* safari,  Chrome  -> safari ignoriert Befehle bei 4 Werten */
-webkit-border-bottom-right-radius: 10px; /* safari, Chrome  -> safari ignoriert Befehle bei 4 Werten */
-icab-border-radius: 0px 0px 10px 10px; /* icab */
-o-border-radius: 0px 0px 10px 10px; /* Opera */
-khtml-border-radius: 0px 0px 10px 10px; /* konqueror */
border-radius: 0px 0px 10px 10px;    /* css3 */
padding: 5px 10px;
width: 180px;
float: left;
}

.accordionMenu {
font-family: "Comic Sans MS", sans-serif;
font-size:16px;
font-weight: normal;
background: #C68C8C; /* hauptfarbe rosa -> rgb(198,140,140) */
padding: 0px;
width: 200px;
float: left;
}

.accordionMenu h1 {
margin: 0;
font-size: 13px;
text-shadow: 2px 2px 2px #aeaeae;
}

.accordionMenu h2 {
margin:0px 0px;     /* Abstand zum nächsten Menüoberpunkt */
padding:0px;
text-shadow: 2px 2px 2px #aeaeae;
}

.accordionMenu h2 a {
font-size: 13px;
display: block;
font-weight: normal;
color:#F5BCA3;  /* rgb(245,188,163) #F5BCA3 Schriftfarbe unbesuchte Links Menüpunkte */
text-shadow: 2px 2px 2px #C68C8C /* #aeaeae */ ;
margin:0;
padding: 5px 10px;
background: #AC0D04; /* alternativer Background für Browser die den Farbverlauf nicht unterstützen */
/* background: rgb(194,133,133); /* #C28585 rosa /* background: #8f8f8f;  */
background: -moz-linear-gradient( top, #FF0000, #800000); /* farbverlauf von rot zu Mahagoni */ /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#800000)); /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000, endColorstr=#ff800000); /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffff0000, endColorstr=#ff800000)";   /* IE 8 */
outline: none;   /* schaltet den Linkramen aus */
}

.accordionMenu :target h2 a,
.accordionMenu h2 a:focus,
.accordionMenu h2 a:hover,
.accordionMenu h2 a:active {
background: #994D4D;  /* alternativer Background für Browser die den Farbverlauf nicht unterstützen */
background: -moz-linear-gradient( top, #D50000, #950000 ); /* farbverlauf von rot zu Mahagoni */   /* FF, Flock */
background: -webkit-gradient(linear, left top, left bottom, from(#D50000), to(#950000));  /* Safari, Chrome */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffD50000, endColorstr=#ff950000);  /* IE 5.5 - IE 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffD50000, endColorstr=#ff950000)";  /* IE 8 */
color: #FFDF00 /* #F25F57 */;
height: auto;
}

.accordionMenu ul {
padding-left: 0px;
margin:0px auto;
list-style-position: inside;
list-style-type: none;
height: 0;    /* sorgt dafür das Sidenavi Unterpunkte zu sind - Ausnahme für IE in Sonder-style */
overflow: hidden ;   /* hidden -  sorgt dafür das seite ans ende springt */
-moz-transition: height 0.5s ease-in;
-webkit-transition: height 0.5s ease-in;
-o-transition: height 0.5s ease-in;
transition: height 0.5s ease-in;
}

.accordionMenu li {
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
margin-bottom: 0px;
border-top: 1px solid #8C0000;  /* rgb(200,0,0)  */
border-left: 1px solid #8C0000;  /* rgb(140,0,0)  */
border-right: 1px solid #8C0000;  /* rgb(140,0,0)  */
font-size: 13px;
}

.accordionMenu :target ul {
height: auto;                    /* aufklapphöhe - ohnen nicht sichtbar */
max-height: 400px;
overflow-y: auto;
}

.accordionMenu :target ul li {
height: auto;                    /* aufklapphöhe - ohne auch kleinere Untermenüs mit Scrollbalken */
max-height: 150px;
overflow-y: hidden;
}

li a { color: #650C07;
text-shadow: 2px 2px 2px #aeaeae;
outline: none;   /* schaltet den Linkramen aus */
  }

li a:focus, li a:hover, li a.acitve
      { color: #FFDF00;
      }

Eine beispielhafter Auszug aus einer Navigation die den Code oben aufruft.

PHP:

      <div class="accordionhead">Home</div>

      <div class="accordionMenu">
           <div id="Einführung" class="menuSection"> <!-- class="menuSection"  keinen einfluss -->
               <h2><a href="index.php?Bereich=home&Inhalt=ueber-home" title="&uuml;bersicht &uuml;ber die aktuellen &Auml;nderungen">News/&uuml;bersicht</a></h2>
               <ul class="accordionMenu">
               </ul>
      </div>
      <div id="tor" class="menuSection">
           <h2><a href="#tor" title="&Ouml;ffnet die Auswahl der Login-Anbieter">FSK18 Login</a></h2>
           <ul class="accordionMenu">       <!-- Unterpunkte -->
               <li><a href="index.php?Bereich=home&Inhalt=AVSKey&#tor" title="Login &uuml;ber Anbieter AVSKey">AVS Key</a></li>
               <li><a href="index.php?Bereich=home&Inhalt=x-check&#tor" title="Login &uuml;ber x-check von Coolspot">x-check</a></li>
           </ul>
      </div>
      <div class="accordionfeed">&nbsp;</div>

threadi · 5 April 2011

Für deine Frage gibt es 2 Antworten:

Nein, deine Idee wird so nicht funktionieren da der Browser exakt einen Anker braucht um eben diesen anzuspringen. Zwei Anker werden nicht unterstützt.

Ja, man kann 2 Raute in der URL angeben. Die zweite muss jedoch maskiert werden (%23). Das kann man dann z.B. zum Übergeben von Parameterwerten mit darin enthaltener Raute verwenden.

Industriemeister · 5 April 2011

Schön das mit dem maskieren bewirkt zwar was ich wollte.
Doch wie Du schon angedeutet hast dann klappt die Navigation wieder zu.

mist.:sad:
Gäbe es eine andere Möglichkeit? Vielleicht aus einem der includierten Dateien? z.B. dem Inhalt der steht an letzter stelle.

threadi · 5 April 2011

Setz den Zielanker an eine andere Stelle, so dass zwar das Ziel im Blickfeld ist, aber auch anderes zu sehen ist.

In dem Zusammenhang ist die CSS-Pseudoklasse :target auch interessant. Mit der kann man per Anker angesprungene Ziele markieren und hervorheben. Funktioniert aber imho leider nur im Firefox bisher.

Industriemeister · 6 April 2011

threadi schrieb:
Setz den Zielanker an eine andere Stelle, so dass zwar das Ziel im Blickfeld ist, aber auch anderes zu sehen ist.

In dem Zusammenhang ist die CSS-Pseudoklasse :target auch interessant. Mit der kann man per Anker angesprungene Ziele markieren und hervorheben. Funktioniert aber imho leider nur im Firefox bisher.

Der (bez. die Zielanker) öffnen ja die Navigation (Dropdown-Menü) die sind ja an diese Stelle gebunden. So habe ich das zumindest verstanden.

mermshaus · 6 April 2011

Das Beispiel nutzt bereits die :target-Pseudoklasse.

Hier wird mal wieder das grundsätzliche Problem offenbar, wenn sie zur Steuerung eines Navigationsmenüs eingesetzt wird: Sie ist eigentlich dazu nicht gedacht, sondern dazu, einen bestimmten Seitenbereich im Viewport anzuscrollen und diesen hervorzuheben.

Ich behaupte mal: Es gibt keine Lösung dafür, die ohne JavaScript auskommt.

Industriemeister · 6 April 2011

mermshaus schrieb:
Das Beispiel nutzt bereits die :target-Pseudoklasse.

Hier wird mal wieder das grundsätzliche Problem offenbar, wenn sie zur Steuerung eines Navigationsmenüs eingesetzt wird: Sie ist eigentlich dazu nicht gedacht, sondern dazu, einen bestimmten Seitenbereich im Viewport anzuscrollen und diesen hervorzuheben.

Ich behaupte mal: Es gibt keine Lösung dafür, die ohne JavaScript auskommt.

In dem Beitrag durch den ich auf diese Navigation ohne JavaScript aufmerksam wurde. Wurde dies Problem leider nicht angesprochen. Zumindest nicht so deutlich. Ich fand auch besonders die Möglichkeit interessant weil doch so häufig auf JavaScript geschimpft wird. Und es wohl doch so einige gibt die darauf verzichten.

In die (ursprüngliche) JavaLösung die ich für IE weiterhin genutzt habe (Ajax-Script Lösung) werde ich aber leider nicht die gestallterische Möglichkeit (Runde Ecken und Farbfluss ohne Bilder zu nutzen) einbauen können.
Das war auch der Grund durch den ich ursprünglich überhaupt aufmerksam wurde. Und dann erwähnten Verzicht auf JavaScript.

mermshaus · 7 April 2011

Ich fand auch besonders die Möglichkeit interessant weil doch so häufig auf JavaScript geschimpft wird. Und es wohl doch so einige gibt die darauf verzichten.

Ja. Schwer zu sagen. In deinem Fall halte ich es ehrlichgesagt für wahrscheinlicher, dass ein Client die :target-Pseudoklasse nicht unterstützt, als dass er JS deaktiviert hat. :target ist glaube ich noch sehr neu.

Es ist dennoch eine gute Idee, eine Seite so zu programmieren, dass sie auch ohne JavaScript funktioniert (muss ja nicht exakt identisch aussehen).

Viele JS-Menüs basieren auf verschachtelten Listen, von denen jeweils nur der gerade aktive „Unterteil“ sichtbar ist. Die anderen Unterlisten werden per JS versteckt. Ist kein JS aktiviert, wird auch nichts versteckt, es ist also die gesamte Struktur sichtbar. Das ist zwar hässlich, erlaubt aber den Leuten, die kein JS aktiviert haben, die Navigation.

Industriemeister · 7 April 2011

mermshaus schrieb:
Ja. Schwer zu sagen. In deinem Fall halte ich es ehrlichgesagt für wahrscheinlicher, dass ein Client die :target-Pseudoklasse nicht unterstützt, als dass er JS deaktiviert hat. :target ist glaube ich noch sehr neu.

Es ist dennoch eine gute Idee, eine Seite so zu programmieren, dass sie auch ohne JavaScript funktioniert (muss ja nicht exakt identisch aussehen).

Viele JS-Menüs basieren auf verschachtelten Listen, von denen jeweils nur der gerade aktive „Unterteil“ sichtbar ist. Die anderen Unterlisten werden per JS versteckt. Ist kein JS aktiviert, wird auch nichts versteckt, es ist also die gesamte Struktur sichtbar. Das ist zwar hässlich, erlaubt aber den Leuten, die kein JS aktiviert haben, die Navigation.

Interessant. Ich bin davon ausgegangen das dann garnichts mehr funktioniert.
Zu dem Schimpfen.... ich meinte das allgemein. Nicht speziell auf meine Seite bezogen. Ich habe schon häufiger Bemerkungen in Foren gelesen die sich negativ über JavaScript äußerten.

zwei Anker hintereinander in einer URL

Industriemeister

Mitglied

mermshaus

Senior HTML'ler

Industriemeister

Mitglied

threadi

Moderator

Industriemeister

Mitglied

threadi

Moderator

Industriemeister

Mitglied

mermshaus

Senior HTML'ler

Industriemeister

Mitglied

mermshaus

Senior HTML'ler

Industriemeister

Mitglied

Neueste Beiträge