Code mit Hovereffekt funktioniert nicht vollständig

13.07.2017 11:49
#1 Code mit Hovereffekt funktioniert nicht vollständig
Fr
Mitglied

Hallo, ich habe mich mal wieder etwas mit HTML beschäftigt und einen schönen Code für unser Forum gefunden. Eigentlich funktioniert alles perfekt. Der Text ist nicht verschoben, Gifs lassen sich super einfügen, man kann auf und ab scrollen. Nur das Titelbild oben wird nicht angezeigt. Weder das Original aus der Vorlage, noch eines, dass ich selbst eingefügt habe. Fährt man mit der Maus darüber, erscheint wie geplant ein kleiner Text.

Übrigens, auch wenn ich andere, ähnliche Vorlagen benutze, habe ich das gleiche Problem. Das Bild an sich bleibt leer, fahre ich mit der Maus drüber erscheint der restliche Text wie geplant.
Interessanterweise funktioniert das Ganze perfekt, wenn ich es oben in der Kopfzeile als Header einfüge. Nur in den Beiträgen bleibt das Titelbild leer.

Hat jemand eine Ahnung womit das was zu tun haben könnte? Habe ich einen Fehler im Code oder liegt es an Xobor oder gar an meinem Browser? (Chrome ist auf dem Neuesten stand und auch in Firefox wird mir nichts angezeigt.)

Liebe Grüße und Danke schon mal im Vorraus!

Hier meine Version des Codes:

<link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'><style text="text/css"> #wrappermonty {width: 500px; background-color: #FFF; } .bildmonty {background-image: url('http://www.iim.de/allgemeine-ib/jagd-gut...2-reiterhof.jpg'); width: 500px;} .bildmonty2 { height: 270px; padding: 15px; opacity: 0; transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -webkit-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; } .bildmonty2:hover { background-color: #C0BEBA; opacity: 0.8; transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -webkit-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out;} .textchara k {color: #B42D19; font-style: italic;} .textchara f {color: #B42D19; font-weight: bold;} #headlinem { width:480px; background-color: #B42D19; font-family: 'Montserrat'; letter-spacing: 2px; font-style: italic; color: #FFF; text-transform: uppercase; padding:10px; text-transform:uppercase;text-align:center; font-size: 11px;} .quote { font-family: Helvetica; font-size: 26px; text-transform: uppercase; color: #0E0807; font-style: italic; text-align: center; line-height: 80%; } .infosboxen { display: inline-block; letter-spacing: 1px; font-family: calibri; font-size: 9px; text-transform: uppercase; background-color: #B42D19; padding: 5px; color: #FFFFFF; } #headlinem2 { width: 494px; background-color: #B42D19; padding:3px; font-family: 'Montserrat'; font-size: 9px; color:#ffffff; text-transform:uppercase; text-align:center; font-style: italic; } .textchara { width: 494px; font-family: Calibri; font-size: 10px; height: 300px; overflow: auto; text-align: justify; padding: 3px; background-color: #FFF; color: #0B0505; }.textchara::-webkit-scrollbar-thumb { background-color: #B42D19; }.textchara::-webkit-scrollbar { background-color: #FFFFFF; width: 5px; }</style> <center> <div id="wrappermonty"> <div id="headlinem">I got a heartbreak dawn rising in my sky</div><div style="padding: 1px;"></div> <div class="bildmonty">
<div class="bildmonty2"> <div style="padding: 40px;"></div> <div style="font-family: Helvetica; font-size: 26px; text-transform: uppercase; color: #0E0807; font-style: italic; text-align: center; line-height: 80%;">No mourners. No funerals.<br><font style="font-size: 20px;">Among them, it passed for good luck.</font></div> <div style="padding: 8px;"><div class="infosboxen">name</div> <div class="infosboxen">age</div> <div class="infosboxen">PROFESSION</div> <div class="infosboxen">MARITAL STATUS</div> <div class="infosboxen">face claim</div> </div></div></div> <div style="padding: 1px;"></div> <div id="headlinem2">Gravity's holding us down so let's turn this planet around</div> <div style="padding: 3px;"></div> <div class="textchara"><img src="http://68.media.tumblr.com/ed9f6a283de391ecaf78f30e2bb0fa64/tumblr_n4wfw5mLCQ1sq9grro2_250.gif" style="width: 180px; height: 100px; border: solid 3px #B42D19; float:left; margin-right: 13px;" /> <font style="font-family:Courier New; font-size: 12px; color: #B42D19; line-height: 95%; text-transform: uppercase; font-style: italic;">Distillery yuccie paleo et consequat anim, scenester echo park.</font> <k>Kurisiv</k> <f>Fett</f> Four dollar toast portland tousled, gluten-free pop-up cardigan banjo hashtag synth viral man bun. Drinking vinegar DIY tote bag listicle, selvage tilde kitsch trust fund portland whatever leggings flannel tumblr helvetica lomo. Gastropub fixie offal typewriter mixtape. Leggings food truck venmo mumblecore art party sriracha. Franzen lo-fi truffaut artisan narwhal lomo, wayfarers mustache iPhone viral selfies craft beer pour-over asymmetrical. Tilde kitsch brooklyn waistcoat microdosing whatever, skateboard truffaut bespoke pickled kinfolk chillwave literally kickstarter. Fanny pack semiotics food truck yr, raw denim kitsch occupy hashtag dreamcatcher. Normcore tofu hammock 3 wolf moon squid narwhal. YOLO meh gastropub swag, sustainable art party cliche kickstarter. Art party wolf squid dreamcatcher vice. Forage truffaut disrupt, williamsburg flexitarian stumptown narwhal blue bottle godard fixie quinoa scenester. Sustainable squid venmo fashion axe, pinterest cold-pressed jean shorts. <div style="padding: 10px;"></div> <img src="http://placehold.it/180x100" style="width: 180px; height: 100px; border: solid 3px #B42D19; float:right; margin-left: 13px;" /> <font style="font-family:Courier New; font-size: 12px; color: #B42D19; line-height: 95%; text-transform: uppercase; font-style: italic;">Lomo odio YOLO, elit lumbersexual man braid occupy shabby chic placeat. </font> Intelligentsia street art church-key cronut skateboard, asymmetrical YOLO master cleanse. Waistcoat etsy vegan, letterpress brooklyn pabst pug portland williamsburg single-origin coffee narwhal celiac cred pinterest seitan. Williamsburg venmo tofu meggings godard 3 wolf moon aesthetic. Chicharrones quinoa microdosing, helvetica trust fund retro hashtag. Chartreuse letterpress drinking vinegar, fanny pack lo-fi pour-over occupy bitters umami 3 wolf moon. Banjo irony scenester, shabby chic master cleanse viral gentrify austin distillery mixtape. Pabst vinyl vegan chartreuse scenester trust fund. Sriracha poutine readymade, wolf hammock PBR&B helvetica tattooed neutra vice street art banjo banh mi viral. Pop-up pork belly pug, etsy ugh venmo mixtape helvetica chartreuse wolf. <div style="padding: 10px;"></div> <img src="http://placehold.it/180x100" style="width: 180px; height: 100px; border: solid 3px #B42D19; float:left; margin-right: 13px;" /> <font style="font-family:Courier New; font-size: 12px; color: #B42D19; line-height: 95%; text-transform: uppercase; font-style: italic;">Kinfolk assumenda fashion axe odio, do nihil minim 8-bit cornhole blue bottle.</font> Sustainable squid venmo fashion axe, pinterest cold-pressed jean shorts. Umami direct trade shabby chic mixtape bespoke sriracha. Tilde celiac semiotics bushwick small batch brooklyn, flexitarian tousled tattooed narwhal deep v affogato lumbersexual skateboard. Intelligentsia street art church-key cronut skateboard, asymmetrical YOLO master cleanse. Waistcoat etsy vegan, letterpress brooklyn pabst pug portland williamsburg single-origin coffee narwhal celiac cred pinterest seitan. Williamsburg venmo tofu meggings godard 3 wolf moon aesthetic. Chicharrones quinoa microdosing, helvetica trust fund retro hashtag. Chartreuse letterpress drinking vinegar, fanny pack lo-fi pour-over occupy bitters umami 3 wolf moon. Banjo irony scenester, shabby chic master cleanse viral gentrify austin distillery mixtape. Pabst vinyl vegan chartreuse scenester trust fund.</div></div></center>


 Antworten

 Beitrag melden
13.07.2017 12:06 (zuletzt bearbeitet: 13.07.2017 12:07)
#2 RE: Code mit Hovereffekt funktioniert nicht vollständig
Bu
Mitglied

Du musst in dem von mir blau gekennzeichneten Passus, d.h. bei dem Link zu dem Bild vor http und nach jpg die Hochkommas ' jeweils durch Anführungszeichen " ersetzen, dann klappt es - zumindest bei mir!

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"><style text="text/css"> #wrappermonty {width: 500px; background-color: #FFF; } .bildmonty {background-image: url('http://www.iim.de/allgemeine-ib/jagd-gut/reiterhof-tirol-allgaeu-oberbayern/aussenansicht2-reiterhof.jpg'); width: 500px;} usw. usw.

also so:

<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"><style text="text/css"> #wrappermonty {width: 500px; background-color: #FFF; } .bildmonty {background-image: url("http://www.iim.de/allgemeine-ib/jagd-gut/reiterhof-tirol-allgaeu-oberbayern/aussenansicht2-reiterhof.jpg"); width: 500px;} usw. usw.

Die Hochkommas in Codes werden hier in den Xobor-Foren im Allgemeinen nicht unterstützt.


<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css"><style text="text/css"> #wrappermonty {width: 500px; background-color: #FFF; } .bildmonty {background-image: url("http://www.iim.de/allgemeine-ib/jagd-gut/reiterhof-tirol-allgaeu-oberbayern/aussenansicht2-reiterhof.jpg"); width: 500px;} .bildmonty2 { height: 270px; padding: 15px; opacity: 0; transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -webkit-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out; } .bildmonty2:hover { background-color: #C0BEBA; opacity: 0.8; transition: 0.8s all ease-in-out; -moz-transition: 0.8s all ease-in-out; -webkit-transition: 0.8s all ease-in-out; -ms-transition: 0.8s all ease-in-out; -o-transition: 0.8s all ease-in-out;} .textchara k {color: #B42D19; font-style: italic;} .textchara f {color: #B42D19; font-weight: bold;} #headlinem { width:480px; background-color: #B42D19; font-family: 'Montserrat'; letter-spacing: 2px; font-style: italic; color: #FFF; text-transform: uppercase; padding:10px; text-transform:uppercase;text-align:center; font-size: 11px;} .quote { font-family: Helvetica; font-size: 26px; text-transform: uppercase; color: #0E0807; font-style: italic; text-align: center; line-height: 80%; } .infosboxen { display: inline-block; letter-spacing: 1px; font-family: calibri; font-size: 9px; text-transform: uppercase; background-color: #B42D19; padding: 5px; color: #FFFFFF; } #headlinem2 { width: 494px; background-color: #B42D19; padding:3px; font-family: 'Montserrat'; font-size: 9px; color:#ffffff; text-transform:uppercase; text-align:center; font-style: italic; } .textchara { width: 494px; font-family: Calibri; font-size: 10px; height: 300px; overflow: auto; text-align: justify; padding: 3px; background-color: #FFF; color: #0B0505; }.textchara::-webkit-scrollbar-thumb { background-color: #B42D19; }.textchara::-webkit-scrollbar { background-color: #FFFFFF; width: 5px; }</style> <center> <div id="wrappermonty"> <div id="headlinem">I got a heartbreak dawn rising in my sky</div><div style="padding: 1px;"></div> <div class="bildmonty">
<div class="bildmonty2"> <div style="padding: 40px;"></div> <div style="font-family: Helvetica; font-size: 26px; text-transform: uppercase; color: #0E0807; font-style: italic; text-align: center; line-height: 80%;">No mourners. No funerals.<br><font style="font-size: 20px;">Among them, it passed for good luck.</font></div> <div style="padding: 8px;"><div class="infosboxen">name</div> <div class="infosboxen">age</div> <div class="infosboxen">PROFESSION</div> <div class="infosboxen">MARITAL STATUS</div> <div class="infosboxen">face claim</div> </div></div></div> <div style="padding: 1px;"></div> <div id="headlinem2">Gravity's holding us down so let's turn this planet around</div> <div style="padding: 3px;"></div> <div class="textchara"><img src="http://68.media.tumblr.com/ed9f6a283de391ecaf78f30e2bb0fa64/tumblr_n4wfw5mLCQ1sq9grro2_250.gif" style="width: 180px; height: 100px; border: solid 3px #B42D19; float:left; margin-right: 13px;"> <font style="font-family:Courier New; font-size: 12px; color: #B42D19; line-height: 95%; text-transform: uppercase; font-style: italic;">Distillery yuccie paleo et consequat anim, scenester echo park.</font> <k>Kurisiv</k> <f>Fett</f> Four dollar toast portland tousled, gluten-free pop-up cardigan banjo hashtag synth viral man bun. Drinking vinegar DIY tote bag listicle, selvage tilde kitsch trust fund portland whatever leggings flannel tumblr helvetica lomo. Gastropub fixie offal typewriter mixtape. Leggings food truck venmo mumblecore art party sriracha. Franzen lo-fi truffaut artisan narwhal lomo, wayfarers mustache iPhone viral selfies craft beer pour-over asymmetrical. Tilde kitsch brooklyn waistcoat microdosing whatever, skateboard truffaut bespoke pickled kinfolk chillwave literally kickstarter. Fanny pack semiotics food truck yr, raw denim kitsch occupy hashtag dreamcatcher. Normcore tofu hammock 3 wolf moon squid narwhal. YOLO meh gastropub swag, sustainable art party cliche kickstarter. Art party wolf squid dreamcatcher vice. Forage truffaut disrupt, williamsburg flexitarian stumptown narwhal blue bottle godard fixie quinoa scenester. Sustainable squid venmo fashion axe, pinterest cold-pressed jean shorts. <div style="padding: 10px;"></div> <img src="http://placehold.it/180x100" style="width: 180px; height: 100px; border: solid 3px #B42D19; float:right; margin-left: 13px;"> <font style="font-family:Courier New; font-size: 12px; color: #B42D19; line-height: 95%; text-transform: uppercase; font-style: italic;">Lomo odio YOLO, elit lumbersexual man braid occupy shabby chic placeat. </font> Intelligentsia street art church-key cronut skateboard, asymmetrical YOLO master cleanse. Waistcoat etsy vegan, letterpress brooklyn pabst pug portland williamsburg single-origin coffee narwhal celiac cred pinterest seitan. Williamsburg venmo tofu meggings godard 3 wolf moon aesthetic. Chicharrones quinoa microdosing, helvetica trust fund retro hashtag. Chartreuse letterpress drinking vinegar, fanny pack lo-fi pour-over occupy bitters umami 3 wolf moon. Banjo irony scenester, shabby chic master cleanse viral gentrify austin distillery mixtape. Pabst vinyl vegan chartreuse scenester trust fund. Sriracha poutine readymade, wolf hammock PBR&B helvetica tattooed neutra vice street art banjo banh mi viral. Pop-up pork belly pug, etsy ugh venmo mixtape helvetica chartreuse wolf. <div style="padding: 10px;"></div> <img src="http://placehold.it/180x100" style="width: 180px; height: 100px; border: solid 3px #B42D19; float:left; margin-right: 13px;"> <font style="font-family:Courier New; font-size: 12px; color: #B42D19; line-height: 95%; text-transform: uppercase; font-style: italic;">Kinfolk assumenda fashion axe odio, do nihil minim 8-bit cornhole blue bottle.</font> Sustainable squid venmo fashion axe, pinterest cold-pressed jean shorts. Umami direct trade shabby chic mixtape bespoke sriracha. Tilde celiac semiotics bushwick small batch brooklyn, flexitarian tousled tattooed narwhal deep v affogato lumbersexual skateboard. Intelligentsia street art church-key cronut skateboard, asymmetrical YOLO master cleanse. Waistcoat etsy vegan, letterpress brooklyn pabst pug portland williamsburg single-origin coffee narwhal celiac cred pinterest seitan. Williamsburg venmo tofu meggings godard 3 wolf moon aesthetic. Chicharrones quinoa microdosing, helvetica trust fund retro hashtag. Chartreuse letterpress drinking vinegar, fanny pack lo-fi pour-over occupy bitters umami 3 wolf moon. Banjo irony scenester, shabby chic master cleanse viral gentrify austin distillery mixtape. Pabst vinyl vegan chartreuse scenester trust fund.</div></div></center>



Ho'oponopono


Hinweis: Ich verwende in allen meinen Foren ausschließlich das unveränderte Standard-Template.
Meine Foren: Board-Nr. 17085, 588813, 569659, 608167, 555628

 Antworten

 Beitrag melden
13.07.2017 12:32
#3 RE: Code mit Hovereffekt funktioniert nicht vollständig
Fr
Mitglied

Oh. Mein. Gott.

Ich fasse es nicht! :D
Studenlanges hin und her für einfache Gänsefüßchen! Tausend Dank @Bussinchen!
Hätte nicht gedacht, dass das so einfach geht und vor Allem: vielen Dank für die super schnelle Antwort!
Hast mir den Tag gerettet! :)

Liebe Grüße, Fränzle


 Antworten

 Beitrag melden
13.07.2017 12:44 (zuletzt bearbeitet: 13.07.2017 12:45)
#4 RE: Code mit Hovereffekt funktioniert nicht vollständig
Bu
Mitglied

Wie schön, dass ich dir eine kleine Freude machen konnte mit diesen klitzekleinen Gänsefüßchen!

Bin zwar keine html-Expertin, weiß aber aus Erfahrung, dass solche von anderswo kopierte Codes öfters Hochkommas enthalten, die hier in Xobor im Allgemeinen nicht funktionieren. Wenn man alle Hochkommas durch Gänsefüßchen ersetzt, funktionieren diese Codes dann. Das ist alles.

Und prompt war es auch hier so. Und "hover" ist an sich ne hübsche Sache, ein netter Effekt... Viel Erfolg weiterhin mit deinen hover-Spielereien, ab jetzt aber nur noch mit Gänsefüßchen! Jetzt weißt du Bescheid!



Ho'oponopono


Hinweis: Ich verwende in allen meinen Foren ausschließlich das unveränderte Standard-Template.
Meine Foren: Board-Nr. 17085, 588813, 569659, 608167, 555628

 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!