[phpBB2] Verlinkte Bilder in seitl. Navigation

Hallöchen.

Vorweg: Ich weiß leider nicht, ob es schon ein Thema hierzu gibt, weswegen ich hier poste, denn ich kann nicht so recht bei Google oder hierin der Suchfunktion formulieren, was genau ich suche... tut mir Leid. Falls es schon ein Thema dafür gibt, wäre ich sehr verbunden, wenn es hier verlinkt würde.

Ich hab ein kleines Problemch mit der seitlichen Navigation, da ich sie gern zu anderem Zwecke denn der eigentlichen Navigation missbrauchen möchte. Ich gestehe vorweg, ich bin nicht allzu bewandert in Codes aller Art, doch lern' ich recht schnell dazu und kann mir einiges erschließen.
Den Code der Navigation habe ich aus dem Tutorial von Zuckerpuppe (vielen Dank für das Tutorial) und meinem eigenen Design angepasst.

Momentan sieht das ganze so aus:


Da, wo jetzt noch sehr professionell "Stuff" steht, sollen weitere verlinkte Bilder, wie das oberste, blaue, stehen. Das Problem ist, dass der Code wohl keine weiteren Verlinkungen zulässt, da ein </a> der Verlinkung den gesamten Code vorzeitig beendet.
Der Code:

Code:

<ul id="voti"><li>
<a class="vote1" href="URL 1">
<span>
<img src="Bild zu URL 1">
<br>Stuff<br>Stuff<br>Stuff<br>Stuff<br>Stuff<br></span>
</a>
</li></ul>

Gibt es eine Möglichkeit, das zu Umgehen? Ich dachte schon daran, das <a class> rauszunehmen, aber das benötige ich ja für das CSS Stylesheet.

Würde mich über Antwort freuen, vielen Dank.
Lg
Der Chronist

Hallo,

bitte immer den Link zum betreffenden Forum mit angeben, wenn es sich nicht um das Forum aus dem Profil handelt, wie es hier offensichtlich der Fall ist.

Für dein Anliegen ist der Code aus dem Tutorial unnötig komplex - denn dir geht es um eine wesentlich vereinfachte Umsetzung im Vergleich zum dort erklärten Hovermenü.
Ich habe einen einfacheren Code für dein Anliegen erstellt:

Code:

<table id="vote_hover" style="position: absolute; top: 200px; left: 50px;">
<tr><td>
<img src="HOVERGRAFIK">
</td><td>
<ul id="vote" style="display: none;">
<li><a href="URL 1"><img src="BUTTON 1"></a></li>
<li><a href="URL 1"><img src="BUTTON 2"></a></li>
</ul>
</td></tr>
</table>

Dieser Bereich kann wiederholt werden und erzeugt je einen Button, der beim Hovern der "Hovergrafik" angezeigt wird:

<li><a href="URL 1"><img src="BUTTON 1"></a></li>

Dort passt du die Position an, an welcher das Menü angezeigt wird:

<table id="vote_hover" style="position: absolute; top: 200px; left: 50px;">

Und in das Stylesheet setzt du folgenden CSS-Code ein:

Code:

#vote li {
  list-style: none;
  margin-bottom: 5px;
}
#vote_hover:hover ul {
  display: block !important;
}

Liebe Grüße
Günther

Vielen Dank für die Hilfe, Günther.

Ein Problem hätt' ich noch, vielleicht bin ich einfach nur zu unkonzentriert gerade. Alles hat soweit geklappt, nur war ja über den ursprünglichen Code der jeweilige Abschnitt meines "Hover-Bildes" durch Pixelangabe definiert, jetzt wird das gesamte Teil angezeigt, statt der eine Teil für wenn das Modul nicht aktiviert ist und wenn die Maus drauf ist, der andere.
Der Link zum Forum ist dieser (verzeih, ich hab ihn vorhin glatt vergessen): http://idontest-rpg.forumieren.com/
Ist nur ein Design-Test-Forum, verzeih also die sonstige Unordnung

Liebe Grüße
Der Chronist

Danke. Das hatte ich nicht gesehen, weil ich es mir nicht im Forum ansehen konnte.

Dann müssen wir zu Beginn des Codes eine Veränderung vornehmen:

<table id="vote_hover" style="position: absolute; top: 200px; left: 50px;">
<tr><td>
<div id="hovergrafik"></div>
</td><td>
<ul id="vote" style="display: none;">
<li><a href="URL 1"><img src="BUTTON 1"></a></li>
<li><a href="URL 1"><img src="BUTTON 2"></a></li>
</ul>
</td></tr>
</table>

Und im Stylesheet ergänzt du noch diesen Code:

Code:

#hovergrafik {
  background-image: url("http://i398.photobucket.com/albums/pp64/MaestroSanguineus/vote100-87-110_zps9e9f4afb.png");
  background-position: 0 0;
  height: 92px;
  width: 100px;
}
#vote_hover:hover #hovergrafik {
  background-position: 0 103px;
}

Gosh es tut mir so Leid, dass ich dir hier die Zeit klaue. Ich hab soweit gemacht, was du geschrieben hast.
Im ersten Anlauf war es zum Teil richtig, nur wurde neben der funktionierenden Hovergrafik noch einmal das gesamte Bild angezeigt und nun, da ich (hoffentlich) das Richtige gemacht hab, wird wieder das gesamte Bild angezeigt.
Ich komm mir grad leicht doof vor, weil es alles so plausibel aussieht...

Du hast den HTML-Code im Modul nicht korrekt angepasst.

Gehe bitte nochmal von Beginn an vor: Verwende den HTML-Code, den ich zuletzt gepostet habe, passe ihn an und setze ihn in das Modul ein. Anschließend setzt du alle CSS-Codes, die ich in diesem Thread gepostet habe, in dein Stylesheet ein und es wird funktionieren.

Okay, ich weiß nicht, was ich wieder falsch abgetippt habe, aber jetzt geht es.

Tausend Dank, tausend und mehr!
Ich wünsch dir noch einen wunderschönen Samstag Abend.

Liebe Grüße
Der Chronist

Bitteschön, gerne.
Ebenfalls noch einen angenehmen Abend.
-closed-