Pastor Rick
Registered: 07-2005
Location: Texas
Posts: 395
Karma: 51 (+55/-4)
|
Reply Quote
|
|
Overlapping smilies?
Is there some way to make it so that the smilies would overlap each other? I am thinking of smilies that would look like jigsaw puzzle pieces or hexagon shapes that could be fitted together using the smilies...
|
11/11/2014, 3:55 pm
|
Link to post
Email Pastor Rick
PM Pastor Rick
Blog
|
Lesigner Girl
Head of Runboard staff
Registered: 11-2005
Posts: 1895
Karma: 83 (+86/-3)
|
Reply Quote
|
|
Re: Overlapping smilies?
Do you mean in the clickable smileys area? That could be a good idea for people who have several different sizes of smileys.
You could use the custom language set to put them in a div (possibly using the CLS portion of the scrolling smileys hack), give that div relative positioning, and absolutely position each smiley.
To see what I have in mind, paste this into Notepad, save it with an .html extension, then open it in your browser:
<!doctype html>
<html>
<head>
<title>Absolutely Positioned Smileys</title>
<style type="text/css">
.smileys {
width: 400px;
height: 400px;
position: relative; /* So smileys will be positioned in relation to this div */
background: #ff0; /* Just so you see where the div is */
}
.smileys img {
position: absolute; /* Affects all images in the smileys div */
background: #ccc; /* So you can see what the image covers */
}
.smileys img[src$='yay.gif'] { top: 50px; left: 100px; }
.smileys img[src$='firefox.gif'] { top: 50px; left: 116px; }
.smileys img[src$='strike.gif'] { top: 60px; left: 85px; }
.smileys img[src$='hello.gif'] { top: 70px; left: 120px; }
</style>
</head>
<body>
<div class="smileys">
<a href="#"><img src="http://rbbt.net/runboard_extra/smiley/yay.gif" alt=""></a>
<a href="#"><img src="http://rbbt.net/runboard_extra/smiley/firefox.gif" alt=""></a>
<a href="#"><img src="http://rbbt.net/runboard_extra/smiley/strike.gif" alt=""></a>
<a href="#"><img src="http://rbbt.net/runboard_extra/smiley/hello.gif" alt=""></a>
</div>
</body>
</html>
Edit to add sample:
Last edited by Lesigner Girl, 11/11/2014, 9:59 pm
|
11/11/2014, 6:02 pm
|
Link to post
Email Lesigner Girl
PM Lesigner Girl
Blog
|