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.

Staff widget code

View previous topic View next topic Go down

Staff widget code

Post by LasTemptation on January 16th 2014, 6:55 am

Hey all, having a couple issues with a widget I've been working on and I just can't seem to fix it. The first issue is that I can't seem to get it to align correctly, the images are all forced to align left and I have no idea why. I want to make it so they're all centered, with three icons on the top row and each row under it with two. Instead it keeps spacing after every icon. The second issue is the links won't work. It's supposed to link to the staff member's profiles and I have no idea why it doesn't. Below is a link to the forum, its the bottom widget, as well as the css and html for said widget. Hope someone can help!

http://euph.forumotion.com/forum

CSS
Code:

#cf {
 border: 0px solid #b3c3bf;
  height:75px;
  width:50px;
  position:relative;
 font-family: calibri, sans-serif;
font-size: 10px;
letter-spacing: 3px;
 text-align:center;
  line-height:70px;
  font-weight:900;
  
}
#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
 
}

 #cf img.bottom:hover {
  opacity:0.4;
  
}
  #cf td {
width: 50px;
height: 75px;
vertical-align: center;
opacity: 0.4;
 
 }


html
Code:

<center>
   
   <table border="0">
      
      <tbody>
         <tr>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/adamstafficon_zps310a81c2.png" align="left" /><a href="http://www.ultimateshinobi.org/u1" class="postlink" target="_blank" rel="follow">ADAM</a>
               </div>
               
            </td>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/dariusstafficon_zps9b2f6fb7.png" align="middle" /><a href="http://www.ultimateshinobi.org/u979" class="postlink" target="_blank" rel="follow">DARIUS</a>
               </div>
               
            </td>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/zackstafficon_zps3274de7e.png" align="right" /> <a href="http://www.ultimateshinobi.org/u1739" class="postlink" target="_blank" rel="follow">ZACK</a>
               </div>
               
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
   <table border="0">
      
      <tbody>
         <tr>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/aaronstafficon2_zpsf7b0924e.png" /> <a href="http://www.ultimateshinobi.org/u42" class="postlink" target="_blank" rel="follow">AARON</a>
               </div>
               
            </td>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/heidastafficon2_zps12bb959a.png" /> <a href="http://www.ultimateshinobi.org/u1338" class="postlink" target="_blank" rel="follow">HEIDA</a>
               </div>
               
            </td>
            
         </tr>
         
         <tr>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/satanstafficon2_zpsa12a25b8.png" /> <a href="http://www.ultimateshinobi.org/u1639" class="postlink" target="_blank" rel="follow">SATAN</a>
               </div>
               
            </td>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/miguelllstafficon_zps73e4c41c.png" /> <a href="http://www.ultimateshinobi.org/u696" class="postlink" target="_blank" rel="follow">KAGE</a>
               </div>
               
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
   <table border="0">
      
      <tbody>
         <tr>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/amystafficon2_zpsdd5cd6ed.png" /> <a href="http://www.ultimateshinobi.org/u950" class="postlink" target="_blank" rel="follow">AMY</a>
               </div>
               
            </td>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/puppystafficon3_zps7cd46ea1.png" /> <a href="http://www.ultimateshinobi.org/u1482" class="postlink" target="_blank" rel="follow">PUPPY</a>
               </div>
               
            </td>
            
         </tr>
         
         <tr>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/crossstafficon2_zpsd2b77634.png" /> <a href="http://www.ultimateshinobi.org/u1571" class="postlink" target="_blank" rel="follow">CROSS</a>
               </div>
               
            </td>
            
            <td>
               
               <div id="cf">
                   <img class="bottom" src="http://i496.photobucket.com/albums/rr330/M4D4R4UCHIH4/jodiiistafficon3_zps19658ca9.png" /> <a href="http://www.ultimateshinobi.org/u696" class="postlink" target="_blank" rel="follow">NOMI</a>
               </div>
               
            </td>
            
         </tr>
         
      </tbody>
   </table>
   
</center>


Last edited by LasTemptation on January 16th 2014, 8:30 am; edited 1 time in total

LasTemptation
Forumember

Male Posts : 50
Reputation : 0
Language : English
Location : United States

Back to top Go down

Re: Staff widget code

Post by SLGray on January 16th 2014, 7:51 am

So the widget will have a table that has three images in the first row and two in each one below the first?  You will need to use a table to achieve it.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

Re: Staff widget code

Post by LasTemptation on January 16th 2014, 8:28 am

Lol, silly me. Well, that settled the alignment issue, but the links still don't work. Any advice on that?

LasTemptation
Forumember

Male Posts : 50
Reputation : 0
Language : English
Location : United States

Back to top Go down

Re: Staff widget code

Post by LasTemptation on January 18th 2014, 1:47 am

Well a friend figured out what the issue was so this is solved.

LasTemptation
Forumember

Male Posts : 50
Reputation : 0
Language : English
Location : United States

Back to top Go down

Re: Staff widget code

Post by SLGray on January 18th 2014, 2:33 am

Since no solution was given, this topic will be garbage.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35622
Reputation : 2372
Language : English
Location : United States

http://fmthemes.forumotion.com/

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