The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Move Image In Staff Widget?

View previous topic View next topic Go down

Move Image In Staff Widget?

Post by ouy8 on October 9th 2015, 07:06

Hello, currently this is the staff widget on my site:



As you can see, the images aren't lining up neatly in rows. I was hoping someone could help me figure out how to edit the code so the pictures were lined up next to each other instead of floating in the middle/right on top of one another? (They are supposed to be separated by the Mods title).

Code:
<style type="text/css">#mainBlock { height:150px } /* height of the main image block */
#staffList {text-align: center;}
#staffList a img {
  float: left; border-radius: 10px; width: 45px; height: 45px;}
}</style>               
<!--                          the staff list                          -->       
<div id="staffList">
                                                                                    
   <div id="mainBlock">
                                                  <img src="http://www.koiora.net/wp-content/uploads/2009/08/NedFlanders3-150x150.gif" id="mainImage" />                                         
   </div>
                                                      
   <div align="center">
                                  <img alt="http://www.koiora.net/wp-content/uploads/2009/08/NedFlanders3-150x150.gif" src="http://i.imgur.com/PjksWfj.png" />                         
   </div>
                                             <a href="/u1">    <img alt="http://oomlaut.com/wp-content/uploads/2013/04/Lisa_on_sax-150x150.jpg" src="http://www.meine-erste-homepage.com/avatare/Simpsons/Simpsons007.jpg" />  </a>  <br />  <a href="/u2">    </a><a href="/u2"> <img alt="http://rogercatlin.com/wp-content/uploads/2011/07/Bart-Simpson-150x150.jpg" src="http://www.meine-erste-homepage.com/avatare/Simpsons/Simpsons002.jpg" />  </a>                     
   <div align="center">
                            <img alt="http://www.koiora.net/wp-content/uploads/2009/08/NedFlanders3-150x150.gif" src="http://i.imgur.com/6f4bVJe.png" />                     
   </div><a href="/u2"> <img alt="http://rogercatlin.com/wp-content/uploads/2011/07/Bart-Simpson-150x150.jpg" src="http://www.meine-erste-homepage.com/avatare/Simpsons/Simpsons002.jpg" />  </a><a href="/u1">    <img alt="http://oomlaut.com/wp-content/uploads/2013/04/Lisa_on_sax-150x150.jpg" src="http://www.meine-erste-homepage.com/avatare/Simpsons/Simpsons007.jpg" />  </a>  <br />  <a href="/u2"></a>
</div><a href="/u2">                                                   
   <!--                        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></a>]

ouy8
New Member

Posts : 1
Reputation : 1
Language : English

http://fairytailunited.forumotion.eu/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum