Lexi Help
Die neuesten Themen
» Begriff : "merken"
von Ray Heute um 12:14

» [PunBB] Umzug eines funktionierenden Forums von PunBB auf phpBB?
von inde Heute um 11:07

» Servamp Forum
von Raine Kamiya Gestern um 22:47

» [phpBB2] Probleme mit der "Postprofil" Anzeige
von Dr.Keks Gestern um 20:56

» Private Nachrichten
von inde Gestern um 10:05

» Wie kann man erkennen, welche Forenversion ein anderes Forum hat?
von inde So 25 Sep 2016 - 22:24

» Ad Ware im Forum?
von inde So 25 Sep 2016 - 20:38

» [Update] Neues Theme der mobilen Version V2
von #Frank So 25 Sep 2016 - 16:57

» [Sammelthread] Unangebrachte Werbung
von inde Fr 23 Sep 2016 - 9:00

» [phpBB2] Gruppen in der Wer is Online Anzeige "trennen"
von TheRollyJoger Mi 21 Sep 2016 - 10:49

» Yaruma - Fantasy-RPG Forum
von Alketa Di 20 Sep 2016 - 21:34

» [phpBB3] Links automatisch kursiv
von inde Di 20 Sep 2016 - 17:37

» [Invision] Kompletter Css-Codebaum gesucht !
von inde Di 20 Sep 2016 - 13:12

» Filmforum "Dark Movie Dreams"
von Ray Di 20 Sep 2016 - 11:56

» Forumseite mit Mailware verseucht ?
von inde Mo 19 Sep 2016 - 20:31

» Ich kann keine Hintergrundbilder hochladen
von Serv Mo 19 Sep 2016 - 19:59

Partner
free forum

[phpBB2]  Avatar Hover

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach unten

Erledigt [phpBB2]  Avatar Hover

Beitrag von Genesis am Mo 9 Nov 2015 - 13:01

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

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
Neuling
Neuling

Beiträge : 11
Anmeldedatum : 05.11.15
Chrome

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2]  Avatar Hover

Beitrag von Asciugamano am Di 10 Nov 2015 - 1:08

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 top
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
Lehrling
Lehrling

Beiträge : 143
Anmeldedatum : 13.12.14

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2]  Avatar Hover

Beitrag von Genesis am Di 10 Nov 2015 - 13:14

Hey danke für die schnelle Antwort,

wie du siehst, klappt der Hover Effekt nicht. Hab ich vergessen was einzugeben?

Gruß

Genesis
Neuling
Neuling

Beiträge : 11
Anmeldedatum : 05.11.15
Chrome

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2]  Avatar Hover

Beitrag von Asciugamano am Mi 11 Nov 2015 - 8:48

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

Asciugamano
Lehrling
Lehrling

Beiträge : 143
Anmeldedatum : 13.12.14

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2]  Avatar Hover

Beitrag von Genesis am Mi 11 Nov 2015 - 9:39

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
Neuling
Neuling

Beiträge : 11
Anmeldedatum : 05.11.15
Chrome

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2]  Avatar Hover

Beitrag von Asciugamano am Mi 11 Nov 2015 - 9:52

Hast du im CSS also nur noch das eingefügt und den Rest rausgenommen?

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
Lehrling
Lehrling

Beiträge : 143
Anmeldedatum : 13.12.14

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2]  Avatar Hover

Beitrag von Genesis am Mi 11 Nov 2015 - 9:59

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ß

Genesis
Neuling
Neuling

Beiträge : 11
Anmeldedatum : 05.11.15
Chrome

Nutzerprofil anzeigen

Nach oben Nach unten

Erledigt Re: [phpBB2]  Avatar Hover

Beitrag von Asciugamano am Mi 11 Nov 2015 - 10:04

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
Lehrling
Lehrling

Beiträge : 143
Anmeldedatum : 13.12.14

Nutzerprofil anzeigen

Nach oben Nach unten

Vorheriges Thema anzeigen Nächstes Thema anzeigen Nach oben


 
Forenbefugnisse:
Sie können in diesem Forum nicht antworten