Teammitglieder online
Regeln und nützliche Hinweise
Neueste Themen
» Grid-Layout für alle Forumversionen verfügbarvon Joost Mi 18 Sep 2024 - 16:54
» [Klassische Version] Gründer/Admin Passwort vergessen / Forum löschen
von Skouliki Di 17 Sep 2024 - 11:14
» Eigene Bildergalerie entfernen
von Skouliki Di 17 Sep 2024 - 11:13
» Neu: Grid layout-Design für AwesomeBB und ModernBB
von Joost Fr 16 Aug 2024 - 7:44
» [Invision] Profil Drop Down verschoben
von Skouliki Sa 20 Jul 2024 - 17:01
» [Invision] Erklärung PWA Aktivierung + Mobile Version Problem
von Skouliki Do 18 Jul 2024 - 23:47
» [Invision] Beschreibung der Kategore einfügen
von Joost Mi 17 Jul 2024 - 8:52
» [Invision] Gefällt mir Button erscheint nicht
von Joost Mo 15 Jul 2024 - 18:14
» Goldhauch´s Plauderforum
von Joost Fr 12 Jul 2024 - 19:34
» [Invision] User Style Änderung - Code geht nicht
von Skouliki Do 11 Jul 2024 - 23:03
» [PunBB] Forum aufsplitten/teilen - ist das möglich?
von Joost Mi 10 Jul 2024 - 17:46
» Technische Wartung in der Zentrale: Montag 1 Juli, und Montag 8 Juli
von Joost Mo 24 Jun 2024 - 17:20
» [phpBB2] Mystic - new beginning RPG
von Raine Kamiya Fr 21 Jun 2024 - 20:52
» Neue Mitarbeiter gesucht
von Joost Fr 21 Jun 2024 - 20:26
» Lange Ladezeiten
von Skouliki Mi 19 Jun 2024 - 19:35
» Gründer E-Mailadresse ändern
von Skouliki Fr 7 Jun 2024 - 12:49
» Nach Wartung Datenbankfehler
von Joost Mo 3 Jun 2024 - 12:34
» Wartung geplant Montag, 3. Juni 2024
von Joost So 2 Jun 2024 - 8:04
Beiträge mit den meisten Reaktionen des Monats
» Beitrag von Trueman in Eigene Bildergalerie entfernen ( 1 )
» Beitrag von Trueman in Eigene Bildergalerie entfernen
( 1 )
» Beitrag von Silicon9 in [Klassische Version] Gründer/Admin Passwort vergessen / Forum löschen
( 1 )
» Beitrag von Joost in Grid-Layout für alle Forumversionen verfügbar
( 1 )
[phpBB2] Avatar Hover
2 verfasser
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: Probleme mit Scripten oder Codes - Archiv
Seite 1 von 1 • Teilen
[phpBB2] Avatar Hover
Aloha, da bin ich erneut mit einer anderen Frage.
Ich versuche gerade, den Avatar im Posting Bereich (nicht im Modul) einen Hovereffekt zu verpassen. Ich möchte gerne, das wenn man über den Avatar geht, die Profildaten und Rpg Daten dort angezeigt werden. Leider kam ich bisher nur bis zum Hover Effekt, die Daten werden mir aber nicht angezeigt.
Bisheriges Ergebnis
Hier folgendes Problem. Die Beitragsanzahl und das Anmeldedatum sind nicht in dem Grauen Kasten, so wie ich das haben wollte. Rpg Daten habe ich noch nicht aktiviert, daher auch noch nicht zu sehen.
Meine bisherige Versuche.
im Css Bereich eingefügt:
im Template viewtopic_body eingefügt und hier wahrscheinlich Fehler gemacht.
Was genau habe ich nun falsch gemacht?
Gruß
Ich versuche gerade, den Avatar im Posting Bereich (nicht im Modul) einen Hovereffekt zu verpassen. Ich möchte gerne, das wenn man über den Avatar geht, die Profildaten und Rpg Daten dort angezeigt werden. Leider kam ich bisher nur bis zum Hover Effekt, die Daten werden mir aber nicht angezeigt.
Bisheriges Ergebnis
- Normaler Zustand:
- Mit Maus über Bild:
Hier folgendes Problem. Die Beitragsanzahl und das Anmeldedatum sind nicht in dem Grauen Kasten, so wie ich das haben wollte. Rpg Daten habe ich noch nicht aktiviert, daher auch noch nicht zu sehen.
Meine bisherige Versuche.
im Css Bereich eingefügt:
- Code:
hover-container {
width: 150px;
height: 400px;
position: relative;
overflow: hidden;
}
.hover-content {
display: none;
width: 250px;
height: 400px;
padding: 10px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
text-align: center;
background-color: grey;
}
a.hover-content {
color: #fff;
text-decoration: none;
}
.hover-container:hover .hover-content {
display: block;
}
im Template viewtopic_body eingefügt und hier wahrscheinlich Fehler gemacht.
- Code:
<div class="hover-container">{postrow.displayed.POSTER_AVATAR}
<div class="hover-content"><span class="postdetails poster-profile"> {postrow.displayed.POSTER_RPG} {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}</span></div></div>
Was genau habe ich nun falsch gemacht?
Gruß
Zuletzt von Genesis am Mi 11 Nov 2015 - 10:00 bearbeitet; insgesamt 1-mal bearbeitet
Genesis- Lehrling
- Beiträge : 11
Anmeldedatum : 05.11.15
Re: [phpBB2] Avatar Hover
Hallo Genesis;
ich melde mich jetzt zunächst einmal in diesem Thread, weil dieses Problem leichter zu lösen ist:
Der Ansatz ist schon einmal gut
Ein paar Kleinigkeiten ändern und dann wird es auch gleich funktionieren. Da mein Testforum natürlich nicht 1:1 dem deinen entspricht, werde ich eventuell fürs richtige CSS zwei Versuche benötigen.
Zunächst einmal zum Template:
Auch wenn die HTML-Kommentare wie <!-- BEGIN profile_field --> auf den ersten Blick als unnötig erscheinen... sie sind wichtig für die korrekte Anzeige! Ohne diese funktioniert es eben leider nicht.
Daher sollte es so aussehen:
Jetzt noch etwas zum CSS:
Wie du siehst, habe ich die Positionierung rausgenommen. Damit es korrekt angezeigt wird, kannst du die Positionierung des Avatars nach dem Hovern auf "absolute" stellen.
Das geht folgendermassen:
ich melde mich jetzt zunächst einmal in diesem Thread, weil dieses Problem leichter zu lösen ist:
Der Ansatz ist schon einmal gut
Ein paar Kleinigkeiten ändern und dann wird es auch gleich funktionieren. Da mein Testforum natürlich nicht 1:1 dem deinen entspricht, werde ich eventuell fürs richtige CSS zwei Versuche benötigen.
Zunächst einmal zum Template:
Auch wenn die HTML-Kommentare wie <!-- BEGIN profile_field --> auf den ersten Blick als unnötig erscheinen... sie sind wichtig für die korrekte Anzeige! Ohne diese funktioniert es eben leider nicht.
Daher sollte es so aussehen:
- Code:
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}
<div class="hover-container">{postrow.displayed.POSTER_AVATAR}<br /><br />
<div class="hover-content"> <!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}</div></div>
</span><br />
Jetzt noch etwas zum CSS:
- Code:
.hover-content {
display: none;
width: 250px;
height: 400px;
padding: 10px;
overflow: hidden;
text-align: center;
background-color: grey;
}
Wie du siehst, habe ich die Positionierung rausgenommen. Damit es korrekt angezeigt wird, kannst du die Positionierung des Avatars nach dem Hovern auf "absolute" stellen.
Das geht folgendermassen:
- Code:
.hover-container:hover .hover-container a img, .hover-container img {
position: absolute;
}
Asciugamano- Meister
- Beiträge : 219
Anmeldedatum : 13.12.14
Re: [phpBB2] Avatar Hover
Hey danke für die schnelle Antwort,
wie du siehst, klappt der Hover Effekt nicht. Hab ich vergessen was einzugeben?
Gruß
wie du siehst, klappt der Hover Effekt nicht. Hab ich vergessen was einzugeben?
Gruß
Genesis- Lehrling
- Beiträge : 11
Anmeldedatum : 05.11.15
Re: [phpBB2] Avatar Hover
Ich habe eine bessere Lösung durch eine veränderte Anordnung im Template gefunden.
Kannst du mir bitte nochmals mal kurz deine jetzigen CSS-Eintrage zu diesem Thema und das Template viewtopic_body hier posten? Dann passe ich das direkt daran an.
Danke und Gruss
Asciugamano
Kannst du mir bitte nochmals mal kurz deine jetzigen CSS-Eintrage zu diesem Thema und das Template viewtopic_body hier posten? Dann passe ich das direkt daran an.
Danke und Gruss
Asciugamano
Asciugamano- Meister
- Beiträge : 219
Anmeldedatum : 13.12.14
Re: [phpBB2] Avatar Hover
Moin, Wie du sehen wirst, habe ich deinen Code oben komplett so übernommen.
- Code:
.hover-content {
display: none;
width: 250px;
height: 400px;
padding: 10px;
overflow: hidden;
text-align: center;
background-color: grey;
}
.hover-container:hover .hover-container a img, .hover-container img {
position: absolute;
}
- Code:
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}
<div class="hover-container">{postrow.displayed.POSTER_AVATAR}<br /><br />
<div class="hover-content"> <!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}</div></div>
</span><br />
Genesis- Lehrling
- Beiträge : 11
Anmeldedatum : 05.11.15
Re: [phpBB2] Avatar Hover
Hast du im CSS also nur noch das eingefügt und den Rest rausgenommen?
Jedenfalls reichen diese Einträge im CSS
Und deinen geposteten Templateausschnitt ersetzt du hiermit:
Im Grunde habe ich den Avatar nun nach den Profildaten (die absolut positioniert sind, damit sie das Forum nicht in die Länge ziehen) gesetzt, damit der Avatar die Profildaten nicht nach unten verschiebt und du z.B durch eine "top"-Angabe die Position verändern musst. Dadurch erübrigt es sich auch, den Avatar beim Hovern absolut zu positionieren, weil er ja bereits darunter ist.
lg
Asciugamano
Jedenfalls reichen diese Einträge im CSS
- Code:
.hover-content {
display: none;
width: 250px;
height: 400px;
padding: 10px;
overflow: hidden;
text-align: center;
background-color: grey;
position: absolute;
}
a.hover-content {
color: #fff;
text-decoration: none;
}
.hover-container:hover .hover-content {
display: block;
}
Und deinen geposteten Templateausschnitt ersetzt du hiermit:
- Code:
<span class="postdetails poster-profile">
{postrow.displayed.POSTER_RANK}<br />
{postrow.displayed.RANK_IMAGE}
<div class="hover-container">
<div class="hover-content"> <!-- BEGIN profile_field -->
{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
<!-- END profile_field -->
{postrow.displayed.POSTER_RPG}</div> {postrow.displayed.POSTER_AVATAR}</div>
</span><br />
Im Grunde habe ich den Avatar nun nach den Profildaten (die absolut positioniert sind, damit sie das Forum nicht in die Länge ziehen) gesetzt, damit der Avatar die Profildaten nicht nach unten verschiebt und du z.B durch eine "top"-Angabe die Position verändern musst. Dadurch erübrigt es sich auch, den Avatar beim Hovern absolut zu positionieren, weil er ja bereits darunter ist.
lg
Asciugamano
Asciugamano- Meister
- Beiträge : 219
Anmeldedatum : 13.12.14
Re: [phpBB2] Avatar Hover
Ich habe erst alles raus genommen gehabt, nur deine Codierung rein, dann mit meinem zusammen und hinterher selber noch was versucht, alles funktionierte nicht.
Nun passt es aber, Den Rest passe ich an. Vielen lieben danke (:
Gruß
Nun passt es aber, Den Rest passe ich an. Vielen lieben danke (:
Gruß
Genesis- Lehrling
- Beiträge : 11
Anmeldedatum : 05.11.15
Re: [phpBB2] Avatar Hover
Ah, das habe ich schon befürchtet. Ich hätte wohl sagen sollen, dass der Rest drinbleiben soll. Wie auch immer, freut mich, dass es nun klappt!
Asciugamano- Meister
- Beiträge : 219
Anmeldedatum : 13.12.14
Ähnliche Themen
» Avatar: Javascript hover
» Hover der Buttons unter dem Avatar
» [phpBB2] Hover Effekt
» [phpBB2] Forentitel bei Hover verschoben
» [phpBB2] Hover Effect Farbe ändern
» Hover der Buttons unter dem Avatar
» [phpBB2] Hover Effekt
» [phpBB2] Forentitel bei Hover verschoben
» [phpBB2] Hover Effect Farbe ändern
Das Forum der Foren :: Hilfe und Unterstützung :: Probleme mit Scripten oder Codes :: Probleme mit Scripten oder Codes - Archiv
Seite 1 von 1
Befugnisse in diesem Forum
Sie können in diesem Forum nicht antworten