[PunBB]Kategorienanzeige Verändern

Hi ich hab seid Heute wieder ein Forumieren Forum (punbb) und da hier einieges anders läuft wie bei wbb muss ich mir mal Hilfe suche ^^

Also emm.. Ich wollte gerne die Kategoerien wie bei Bild eins gut zu sehen ist abändern mit speziellen Funktionen.

Bild a: Der Name der Kategorie ist Linksbündig , daneben die Links und darunter ein Bild

Spoiler:

Bild b: Der Link name Verschiebt sich nach rechts wenn man mit dem Mauszeiger drauf geht aber nicht Klickt!

Spoiler:

Bild c: Das Bild unter dem Kategorienamen Verschwindet und es wird ein Text angezeigt wenn man mit dem Mauszeiger drauf geht.

Spoiler:

Wäre das denn so umsetztbar für Punbb? Und wenn ja wie würde ich es am besten anstellen?

Glg und Tausend Dank im Vorraus Madeleine

Hallo,

um den Hover-Wechsel von einem Bild zu einem Text zu ermöglichen, kannst du in die jeweilige Forenbeschreibung einen HTML-Inhalt einsetzen und anschließend in dein Stylesheet einen passenden Eintrag für diesen Effekt tätigen. Wie das möglich ist, habe ich hier mal erklärt:
https://hilfe.forumieren.com/t33369-frage-zu-mouseover-und-menu#217587

Und weil die beiden Fragen doch einen Zusammenhang besitzen, gehe ich auch noch schnell auf die Frage nach dem "verschiebenden" Hovereffekt ein. Das Grundformat, das du in dein Stylesheet einträgst, sieht folgendermaßen aus:

Code:

.forumtitle:hover {
  margin-left: 30px;
  transition: all 1s ease-in-out 0s;
}

Dadurch wird den Forentiteln beim Hovern ein linker Außenabstand zugewiesen, der in einer gleichmäßugen Bewegung erreicht wird:
http://www.css4you.de/margin.html
www.css-wiki.com/css-eigenschaft/transition
Du kannst anschließend auch weitere Details wie z.B. Hintergrundfarbe etc. hinzufügen. Dazu kannst du dich mit den CSS-Gestaltungsmöglichkeiten beschäftigen. Aber das Grundsystem sollte so deine Erwartungen treffen.

Liebe Grüße
Günther

Aiii Tausend Dank ist fast Perfekt ^^ wie kann ich denn das Bild so Anzeigen lassen das es beim Hover Langsam Transparend wird uns nicht so ruckartig???

Bitte.

Wenn du mit CSS einen fließenden Übergang wünschst, dann muss man die CSS3-Eigenschaft "transition" ins Spiel bringen:
http://www.css-wiki.com/css-eigenschaft/transition
Dazu muss der Code allerdings komplett umgestellt werden, da die Eigenschaft "display" davon nicht angesprochen werden kann, sondern nur die ähnliche Eigenschaft "visibility". Ich habe dir den Code mal entsprechend umgestellt:

Code:

#hovertext img {
  visibility:visible;
  opacity:1;
  transition:visibility 0.5s linear 0.5s,opacity 0.5s linear;
}
#hovertext:hover img {
  visibility:hidden;
  opacity:0;
  transition-delay:0s;
}
#hovertext span {
  visibility:hidden;
  opacity:0;
  transition:visibility 0s linear 0.5s,opacity 0.5s linear;
  margin-left:-50px;
}
#hovertext:hover span {
  visibility:visible;
  opacity:1;
  transition-delay:0s;
}

Du selbst musst daran nichts mehr verändern - mit Ausnahme des Wertes bei "margin-left", welchen du entsprechend anpassen musst, damit der Text beim Hovern auch an derselben Stelle wie die Grafik angezeigt wird. Am besten probierst du dich mal daran.

Trifft das nun genau deine Vorstellung?

Noch mals Danke aber irgendwie ist es noch nicht so wie ich es haben wollte

Also Folgendes
Bild <- Mousehover und dann ist das Bild weg so wie ich es wollte doch der Text also die Information wird nicht unter das Bild gesetzt sondern darunter T_T wollte es ja so Angezeigt haben das der Text dann dort steht wo das Bild war ^^ Sry wenn ich dir unnötig mühe mache -.-

Ich habe den Code für mein Testforum angepasst, aber wie gesagt musst du ihn je nach Verwendung selbst noch ein wenig angleichen.

Wenn du mir mal die Forenadresse gibst, bei der ich die Situation selbst sehen kann, werde ich mir davon ein Bild machen.

Klar kann ich machen da wir Umziehen müssen mit unserem Wbb schaut es alles noch sehr Kaotisch aus xD

Klick

Gut, danke.
Aus Platzgründen tritt dieses Problem in deinem Forum auf, da die betreffende Zelle in ihrer Gesamtbreite die Grafikbreite inkl. der Textbreite nicht vereinen kann und deshalb der Browser die HTML-Struktur so festlegen muss, dass der Text darunter angezeigt wird. Deshalb habe ich im verlinkten Thread die "display"-Eigenschaft bevorzugt, weil man damit nicht vor diesem Problem steht.
Verwendet man "visibility" (was hier nötig ist), dann muss man sich eines kleinen Tricks bedienen, um diesen Efekt zu umgehen.

Ich habe dir den Code nochmals speziell dafür angepasst:

Code:

#hovertext {
  height: 50px;
}
#hovertext img {
    opacity: 1;
    transition: visibility 0.5s, opacity 0.5s;
    visibility: visible;
}
#hovertext:hover img {
    opacity: 0;
    transition: visibility 0.5s, opacity 0.5s;
    visibility: hidden;
    width: 0;
}
#hovertext span {
    opacity: 0;
    visibility: hidden;
}
#hovertext:hover span {
    opacity: 1;
    transition: visibility 0.5s, opacity 0.5s;
    visibility: visible;
}

So ist er für deinen Verwendungszweck perfekt.

Arg -.- haha der Text ist jetzt zwar wieder da wo er sein soll doch der sanft übergang ist weg xD

Wenn ich dein Forum aufrufe, wird der Übergang so sanft wie möglich angezeigt.
Falls das bei dir nicht der Fall ist, muss eine lokale Ursache vorliegen. Mit der aktuellen Firefox-Version ist der Eintrag perfekt wirksam. Natürlich ist das unter veralteten Browsern wie dem IE nicht der Fall, da diese keine CSS3-Unterstützung bieten und der Übergang deshalb nicht fließend dargestellt wird.

Dann ist das hier erledigt?

Hmm also ich bin der Meinung das ich schon ne recht Aktuelle Version habe Aber nun gut Closed und noch mals Danke ^^

Wie gesagt wird mir mit der aktuellen FF-Version der Übergang wie gewünscht angezeigt. Du solltest am besten auf die neueste Version updaten, deinen Cache löschen und es erneut versuchen.

Freut mich, dass ich dir helfen konnte.
Denke bitte noch daran, das -Icon zu setzen.
-done-