How to make this CSS work within a post

I am not sure if this can be worked on here. If not, I understand. I have an issue with a posting template that does not work in PunBB or phpBB2. The code in its entirety looks like this:

Code:


<center>
 <div id="header">
   <div id="reply">
       <span class="hovernotice">Hover over this image to see the post!
       </span>
       <div style="background-image: url(http://i.imgur.com/KdO57zX.png); background-size: 520px; width: 520px; height: 168px;">
       <div style="font-family: Algerian; font-size: 25px; text-shadow: 2px 2px 4px #000000; color:#FF0000; margin-top: -85px; margin-bottom: 80px; text-align: right; width: 350px;">
           [b]Coder & Administrator[/b]
       </div>
       <br />
       <div id="textfield">
         <div id="rounder">
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here!
           <br />
         </div>
       </div>
     </div>
   </div>
<style type="text/css">
#header {
  height: 670px;
  width: 520px;
}

#reply {
  height: 104px;
  width: 411px;
  opacity: 0.9;
  overflow: hidden;
  -webkit-transition: all 0.9s ease;
  -moz-transition: all 0.9s ease;
  -o-transition: all 0.9s ease;
}

#reply:hover {
  height: 670px;
  width: 520px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  opacity: 1.0;
}

#textfield {
  font-size: 11px;
  line-height: 12px;
  padding: 10px;
  font-family: Calibri;
  text-align: justify;
  color: #000;
  height: 670px;
}

#rounder {
  height: 670px;
  overflow-x: hidden;
  text-align: justify;
}

.hovernotice {
  font-family: Verdana;
  font-size: 9px;
  letter-spacing: 2px;
  font-height: 9px;
  text-decoration: none;
  font-weight: bold;
  text-transform: none;
}
</style>
</center>
<div class="clear"></div>


Do I have to add something to the Stylesheet in order for it to work? Or maybe some Javascript? What I am basically trying to do is make a hover-able image, that when hovered over, shows a post. Any help would be appreciated.

Thank you for your time.

Do you have HTML activated in the administration panel and in your profile?

Indeed I do! ^_^

Well, it worked on my forum.

Could you post a screenshot of the issue?

<div id="header">
   <div id="reply">
       <span class="hovernotice">Hover over this image to see the post!
       </span>
       <div style="background-image: url(https://i.imgur.com/KdO57zX.png); background-size: 520px; width: 520px; height: 168px;">
       <div style="font-family: Algerian; font-size: 25px; text-shadow: 2px 2px 4px #000000; color:#FF0000; margin-top: -85px; margin-bottom: 80px; text-align: right; width: 350px;">
           </div>
       <br />
       <div id="textfield">
         <div id="rounder">
Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here Text here!
           <br />
         </div>
       </div>
     </div>
   </div>
<style type="text/css">
#header {
  height: 670px;
  width: 520px;
}

#reply {
  height: 104px;
  width: 411px;
  opacity: 0.9;
  overflow: hidden;
  -webkit-transition: all 0.9s ease;
  -moz-transition: all 0.9s ease;
  -o-transition: all 0.9s ease;
}

#reply:hover {
  height: 670px;
  width: 520px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  opacity: 1.0;
}

#textfield {
  font-size: 11px;
  line-height: 12px;
  padding: 10px;
  font-family: Calibri;
  text-align: justify;
  color: #000;
  height: 670px;
}

#rounder {
  height: 670px;
  overflow-x: hidden;
  text-align: justify;
}

.hovernotice {
  font-family: Verdana;
  font-size: 9px;
  letter-spacing: 2px;
  font-height: 9px;
  text-decoration: none;
  font-weight: bold;
  text-transform: none;
}
</style>
</center>
<div class="clear"></div>

Here is a link to a test forum where I have posted this code. It is at the bottom of the page.

http://edensozo.forumotion.net/t13-posting-templates#31

Uhm Sora, HTML is disabled here. Please delete that post, or remove the text in it. Thank you. ^_^

In forumotion posts, for stylesheets to work you must remove all whitespaces that go beyond a single space, since forumotion has code which merges the mechanics of normal text and html code, as opposed to having an html tag or bbcode that switches how the webpage reads text to reading html. For example:

Code:

<style> .hovernotice { font-family: Verdana;  font-size: 9px;  letter-spacing: 2px;  font-height: 9px;  text-decoration: none;  font-weight: bold;  text-transform: none;} </style>

Also, the widths you have on some of the divs do not properly reveal the image, and upon hover, it awkwardly expands to show the text. This code is really wonky and works terribly with forumotion, but it has been revised enough so that it is manageable; these codes originated from jcink, where the forum host is VERY different, and reacts to codes more closely to plain-script.

SOURCE: I coded the thing. Here's one of the original renditions of the code that's made to work in forumotion. It's specifically coded in a manner that's obnoxiously confusing to use, making it useable by only me, or someone meticulous and persistent enough to try. If you're going to take my code: ask, and slap on some credits, if you don't mind.

Code:

<link href="//fonts.googleapis.com/css?family=Open+Sans Condensed:300italic,300,700" rel="stylesheet" type="text/css">
<center><div id="header"><div id="reply"><span class="hovernotice">HOVER IMAGE</span><div style="background-image:url(https://38.media.tumblr.com/02e5b8737f14b6099f0bacbf8d01df58/tumblr_nqf407z4Yb1uo6aw8o1_500.gif);background-size: 405px;width:405px;height:150px;"></div><div style="font-family: 'Open Sans Condensed', sans-serif;font-size:25px;text-shadow:0em 0em 0.2em #000;color:#fff;margin-top:-85px;margin-bottom:80px;text-align:right;width:350px;"><b>WORLD POSITIONS UPDATE</b></div>
<div id="textfield"><div id="rounder">With some discussion, additional information on what we look for in the applications to fulfill World Positions will now be disclosed. The largest bit is the process of approving these applications. From now on, approvals for applications require the consent of two individual staff members with permissions to do so. The positions of these staff members aren't so important for their approval so long as they have the clearance to take on the responsibility. It can be anywhere from an Admin to a Developer.

That being said, if one staff member--like a mod--tells you your RP Sample looks fine when they don't have explicit clearance to make that sort of judgement call, and another staff member who does have clearance--like a developer--denies it, don't assume that the mod's words have more weight and try to argue with the developer. While a mod pretty much is above the developer in terms of staff hierarchy, their responsibilities differ in that aspect.

Second, bounties and additional levels are granted in accordance to the position you are approved for, but rewarded bounties are a bit more flexible. To be straightforward, the better your RP sample, the larger your bounty. As a matter of course, this applies to reputation as well. If you're approved for a position, pretty much by default you will gain additional bounty/reputation simply for having gained that new title or military rank. The RP sample moreso acts as an opportunity to get as high of a bounty/reputation as reasonably possible.

While it's not so much a requirement, it is [b]highly[/b] encouraged that when staff approves or denies an application for a position, they give a detailed description on their reasons for the approval or denial. Describe why you think the RP sample and additional information makes them adequate for the position. Refer to mistakes or odd actions taken that points to inadequacy for the position. Let the person know why they got what they got; it makes the decision easier to comprehend and swallow, while reducing any PM complaints that could have been avoided with prudent consideration.

That basically concludes this update on how registering for positions will be changed. Each staff member will probably look for different things in an RP sample to determine whether it's proper quality in correspondence to the applied-for position. If you'd like to know specifically how they grade, go ahead and ask. If staff so pleases, they can even post in this topic describing their process. All in all, just take heed of what's been said and use this information wisely; it maximizes your chances of success.
</div></div></div></div>

<style type="text/css">
#header { height: 670px; width: 405px; } #reply { height:104px;width:411px;opacity: 0.9;overflow: hidden; -webkit-transition: all 0.9s ease;-moz-transition: all 0.9s ease;-o-transition: all 0.9s ease; } #reply:hover { height:670px;width:405px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease; opacity: 1.0; } #textfield { font-size: 10px; line-height:11px; font-family: verdana;  text-align: justify;color: #000;height:670px; } #rounder { height: 670px; overflow-x: hidden;text-align:justify; } .hovernotice {font-family:courier new;font-size:8px;letter-spacing:2px;font-height:9px;text-decoration:underline;font-weight:bold;text-transform:uppercase;}</style>

Code:

<link href="//fonts.googleapis.com/css?family=Open+Sans Condensed:300italic,300,700" rel="stylesheet" type="text/css">
<center><div style="background-image:url(http://i.imgur.com/tPOInkj.gif);background-size:396px;width:396px;height:147px;border:2px solid #000;"></div><div id="header"><div id="reply"><div id="firstreply">Blah blah blah here </div>
<div id="textfield"><div id="rounder">Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc. Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc. Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc. Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc.

Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc. Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc. Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc. Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc.

Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc. Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc. Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc. Talk about whatever my opinion is here. Just continuously jabber on about it until I'm satisfied or I've gotten to the point, whatever etc.
 
</div></div></div></div>

<style type="text/css">
#header { height: 550px; width: 400px; } #firstreply { padding-top:10px;text-transform:uppercase;padding-left:10px;text-shadow:1px 1px 1px #000;font-size: 40px; font-family: housegothic-lightfourregular; color:#680000; line-height: 40px; background-color:#680000;color:#fff;width:400px;background-color:#680000;text-align:left;} #reply { height:65px;width:400px;background-color: #680000; opacity: 0.9;overflow: hidden; -webkit-transition: all 0.9s ease;-moz-transition: all 0.9s ease;-o-transition: all 0.9s ease; } #reply:hover { height:430px;width:400px; -webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease; opacity: 1.0;background-color:#680000; } #textfield { padding:15px;font-size: 12px; font-family: 'open sans condensed', sans serif;  text-align: justify; padding: 0px 10px 10px 10px; color: #fff;text-shadow:1px 1px 1px #000;  } #rounder { height: 430px; overflow-x: hidden; }</style>


I attempted writing it out myself, upon seeing hover used in posts on other forums. I have normally been able to use hover previously, but this time, I could not get it to contain the textarea. I know in phpBB, I have been able to use hover in posts, while using the spacing as shown above. However, PunBB has been a bit difficult, so I have been attempting to figure out how such could be fixed. I am fond of using the spacing, because that is how I have been getting taught.

What you are saying is I should be removing any extra spaces past the initial one after each ";"? Also, there is no pound sign where I have written the .hovernotice CSS. It is written solely as a class, so I am unsure where you got that from.

I appreciate the insight, and I will try removing some of the extra spacing to see if that will fix the issue.

For now, this is solved.