Staff Widgets

Ok, I forgot to reply on my last staff widgets, so I'm gonna continue on here.


I've gotten the hover staff code list... but... 




I want to move the stuff from the Administrators text and below down, but I'm not sure how to do it... nothing's working. Oh, and how do I make the pictures side by side?

Hi

Can you please link me to your forum and paste the code you used for this as well?

Regards,
Pizza Boi

http://born-of-the-shadows.forumotion.com/ <-- that's my forum.

And this is the code that I have so far:

Code:

<!--         style of the widget         --><style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style> 
<!--         the staff list         -->
<div id="staffList">
                  
   <div id="mainBlock">
                <img id="mainImage" src="http://i18.servimg.com/u/f18/18/17/44/64/staff_11.png" />          
   </div>
         
   <div align="center">
           ADMINISTRATORS      
   </div>
           <a href="/u1">    <img src="http://i56.servimg.com/u/f56/18/45/41/65/rose_a10.png" alt="http://i59.servimg.com/u/f59/18/45/41/65/rose_210.png" />  </a>  <br />  <a href="/u2">    <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" alt="http://2img.net/i/fa/admin/icones/help.png" />  </a>
</div>
            
<!--         technical stuff         --><script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>

Hi

Replace your code with this:

Code:

<!--         style of the widget         --><style type="text/css">#mainBlock { height:230px } /* height of the main image block */
#staffList { text-align:center; }
#staffList a img {
  border-radius:100px;
  width:50px;
  height:50px;
}</style> 
<!--         the staff list         -->
<div id="staffList">
                  
   <div id="mainBlock">
                <img id="mainImage" src="http://i18.servimg.com/u/f18/18/17/44/64/staff_11.png" />          
   </div>
           <a href="/u1">    <img src="http://i56.servimg.com/u/f56/18/45/41/65/rose_a10.png" alt="http://i59.servimg.com/u/f59/18/45/41/65/rose_210.png" />  </a> <a href="/u2">    <img src="http://i56.servimg.com/u/f56/18/21/60/73/noavaf10.png" alt="http://2img.net/i/fa/admin/icones/help.png" />  </a>
</div>
            
<!--         technical stuff         --><script type="text/javascript">(function() {
var img = document.getElementById('staffList').getElementsByTagName('IMG'), main = document.getElementById('mainImage'), def = main.src,i;
for (i=0; i<img.length; i++) {
  if (!/mainImage/.test(img[i].id)) {
    img[i].onmouseover = function() { main.src = this.alt }
    img[i].onmouseout = function() { main.src = def }
  }
}
})();</script>

Regards,
Pizza Boi

Yeah, it worked. Thanks. This can be locked and solved now.