Names poping out the avatar in widget

Go down

Solved Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 5:55 pm

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?
avatar
Luffy
Manager
Manager

Male Posts : 5510
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ramdaman on October 18th 2014, 6:00 pm

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

Male Posts : 1614
Reputation : 99
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 6:01 pm

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

Male Posts : 5510
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ramdaman on October 18th 2014, 6:03 pm

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.
avatar
Ramdaman
Active Poster

Male Posts : 1614
Reputation : 99
Language : English, Albanian, Macedonian, Russian | HTML, CSS
Location : New York City

http://ndihme.forumotion.com/forum

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 6:05 pm

Yes ofc you can! Information Forum GR

* mind that it is in greek! Wink
avatar
Luffy
Manager
Manager

Male Posts : 5510
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ange Tuteur on October 18th 2014, 6:09 pm

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. ^^
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 6:13 pm

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

Male Posts : 5510
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ange Tuteur on October 18th 2014, 6:17 pm

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>
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Luffy on October 18th 2014, 6:25 pm

Talking about knowledge man! You are the best! ~1~

All the best for a wonderful weekend!:rose:
Sooolved!
avatar
Luffy
Manager
Manager

Male Posts : 5510
Reputation : 607
Language : Greek, English
Location : Greece

https://www.crossroadz.net

Back to top Go down

Solved Re: Names poping out the avatar in widget

Post by Ange Tuteur on October 18th 2014, 6:26 pm

You're welcome

Topic archived

Thanks you too ^^
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


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