Hello.
I have this widget with the way the staff members are
By image order:
[Ιδρυτής] Founder (Sherlock H.)
[Διαχειριστές] Admins (Warrior7 & #theodore#)
[Γενικοί Διαχειριστές] Pro Admins (aimilios)
[Γενικοί Συντονιστές] Global Mods (Xristos)
[Συντονιστές] Mods (-----)



on the image you can see the avatars of the users. How can i make the name pop out right from the avatar?

I am using this code to the widget:

Code:

<div align="center">
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Ιδρυτής</strong>
</span>
<br />
<a href="/u1"><img title="Sherlock H." src="http://r24.imgfast.net/users/2416/49/39/96/avatars/1-11.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Διαχειριστές</strong>
</span>
<br />
<a href="/u14"><img title="Warrior7" src="http://r24.imgfast.net/users/2416/49/39/96/avatars/14-83.jpg" style="margin-right:5px;border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<a href="/u2"><img title="#theodore#" src="http://r24.imgfast.net/users/2416/49/39/96/avatars/2-12.png" style="border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<br /><br />
<span style="font-size:16px;color:#660036;font-family: Trebuchet MS;">
<strong>Γενικοί Διαχειριστές</strong>
</span>
<br />
<a href="/u7"><img title="aimilios" src="http://r24.imgfast.net/users/2416/49/39/96/avatars/7-0.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#007508;font-family: Trebuchet MS;">
<strong>Γενικοί Συντονιστές
</strong>
</span>
<br />
<a href="/u23"><img title="Xristos" src="http://r24.imgfast.net/users/2416/49/39/96/avatars/23-43.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#020652;font-family: Trebuchet MS;">
<strong>Συντονιστές</strong>
</span>
<br />
<span style="color: #999999;"><strong>----------</strong></span>
</div>

Can someone help me with this?

Do you mean when you hover your mouse over it to pop out? Or to have it always popped out?

I mean when you hover the avatar the name to pop out going right.

Can I get a link to your forum? I'd like to find the CSS path so I can attempt to make it pop out.

Yes ofc you can! Information Forum GR

* mind that it is in greek!

Hello MrMind,

Something like this ?

Code:

<style type="text/css">
#userTable a { position:relative }
#userTable a .popable {
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:1px 1px 1px rgba(0,0,0, 0.3);
  padding:3px;
  display:none;
  position:absolute;
  white-space:nowrap;
  left:0;
  bottom:10px;
  z-index:9;
}
#userTable a:hover .popable { display:block }
</style>

<div align="center" id="userTable">
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Ιδρυτής</strong>
</span>
<br />
<a href="/u1"><span class="popable">Sherlock H.</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/1-11.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Διαχειριστές</strong>
</span>
<br />
<a href="/u14"><span class="popable">Warrior7</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/14-83.jpg" style="margin-right:5px;border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<a href="/u2"><span class="popable">#theodore#</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/2-12.png" style="border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<br /><br />
<span style="font-size:16px;color:#660036;font-family: Trebuchet MS;">
<strong>Γενικοί Διαχειριστές</strong>
</span>
<br />
<a href="/u7"><span class="popable">aimilios</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/7-0.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#007508;font-family: Trebuchet MS;">
<strong>Γενικοί Συντονιστές
</strong>
</span>
<br />
<a href="/u23"><span class="popable">Xristos</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/23-43.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#020652;font-family: Trebuchet MS;">
<strong>Συντονιστές</strong>
</span>
<br />
<span style="color: #999999;"><strong>----------</strong></span>
</div>

CSS is at the top if you want to edit it. ^^

Can we somehow make it look like its popping out of the avatar?

Like this ?
http://generaltesting.forumotion.com/h6-profil

HTML :

Code:

<style type="text/css">
#userTable a { position:relative }
#userTable a .popable {
  font-size:0;
  background:#EEE;
  border:1px solid #CCC;
  border-radius:3px;
  box-shadow:1px 1px 1px rgba(0,0,0, 0.3);
  padding:3px;
  opacity:0;
  position:absolute;
  white-space:nowrap;
  left:0;
  bottom:10px;
  z-index:9;
  transition:300ms;
}
#userTable a:hover .popable {
  font-size:12px;
  opacity:1;
}
</style>

<div align="center" id="userTable">
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Ιδρυτής</strong>
</span>
<br />
<a href="/u1"><span class="popable">Sherlock H.</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/1-11.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size: 16px;color: #FF0000;font-family: Trebuchet MS;">
<strong>Διαχειριστές</strong>
</span>
<br />
<a href="/u14"><span class="popable">Warrior7</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/14-83.jpg" style="margin-right:5px;border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<a href="/u2"><span class="popable">#theodore#</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/2-12.png" style="border-radius:26px;width:40px;border:1px solid #000;height:40px;" /></a>
<br /><br />
<span style="font-size:16px;color:#660036;font-family: Trebuchet MS;">
<strong>Γενικοί Διαχειριστές</strong>
</span>
<br />
<a href="/u7"><span class="popable">aimilios</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/7-0.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#007508;font-family: Trebuchet MS;">
<strong>Γενικοί Συντονιστές
</strong>
</span>
<br />
<a href="/u23"><span class="popable">Xristos</span><img src="http://r24.imgfast.net/users/2416/49/39/96/avatars/23-43.jpg" style="border-radius:26px;width:40px;height:40px;border:1px solid #000;" /></a>
<br /><br />
<span style="font-size:16px;color:#020652;font-family: Trebuchet MS;">
<strong>Συντονιστές</strong>
</span>
<br />
<span style="color: #999999;"><strong>----------</strong></span>
</div>

Talking about knowledge man! You are the best!

All the best for a wonderful weekend!
Sooolved!

You're welcome

Topic archived

Thanks you too ^^