Jump to content

Help With A Mildly Dynamic Social Networking Bar

qcom

By qcom
in JavaScript

Recommended Posts

ShadowMage Devoted Member

ShadowMage

Posted
Posted

Oh I see the problem, you forgot the absolute positioning. Add this style for your anchors:a.trayIcon {position: absolute;}I've gotta run for the day, but I'll try to catch up with you tomorrow if someone doesn't help you by then.

Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted
Oh I see the problem, you forgot the absolute positioning. Add this style for your anchors:a.trayIcon {position: absolute;}I've gotta run for the day, but I'll try to catch up with you tomorrow if someone doesn't help you by then.
OK, thank SOO much for the help!I really appreciate it!:)
Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted
OK, thank SOO much for the help!I really appreciate it!
Not a problem! :)So did adding position:absolute fix it then?EDIT: You're actually missing a lot of styling to make this work. So here's a very basic example:HTML:
<div id='container'><a href='#' class='trayIcon' style='left: 0px;'><img src='image.jpg' alt='' /></a><a href='#' class='trayIcon' style='left: 15px;'><img src='image.jpg' alt='' /></a><a href='#' class='trayIcon' style='left: 30px;'><img src='image.jpg' alt='' /></a><a href='#' class='trayIcon' style='left: 45px;'><img src='image.jpg' alt='' /></a></div>

CSS:

#container {	width: 200px;	height: 40px;	position: relative;	border: 1px solid black;}a.trayIcon {position: absolute;top: -3px;}a.trayIcon:hover {top: -8px;}

Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted

How about with this code, then what do I need?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><style type="text/css">a.trayIcon:hover {	top: +35px;}#twittericon {	position:absolute; left:160px; top:100px;}#facebookicon {	position:absolute; left:220px; top:100px;}#myspaceicon {	position:absolute; left:280px; top:100px;}#stumbleuponicon {	position:absolute; left:340px; top:100px;}#feedicon{	position:absolute; left:400px; top:100px;}#youtubeicon {	position:absolute; left:460px; top:100px;}#tray {	position:absolute; left:160px; top:115px;}</style></head><body><div><div><a id="twittericon" class="trayIcon"  href="http://twitter.com/BUILDALOCK" target="_blank"><img src="Icons/48x48/Twitter-icon.png" /></a><a id="facebookicon" class="trayIcon" href=""><img src="Icons/48x48/FaceBook-icon.png" /></a><a id="myspaceicon" class="trayIcon" href=""><img src="Icons/48x48/MySpace-icon.png" /></a><a id="stumbleuponicon" class="trayIcon" href=""><img src="Icons/48x48/Stumbleupon-icon.png" /></a><a id="feedicon" class="trayIcon" href=""><img src="Icons/48x48/Feed-icon.png" /></a><a id="youtubeicon" class="trayIcon" href=""><img src="Icons/48x48/Youtube-icon.png" /></a><img src="tray.png" id="tray" style="z-index:10;"> </div></div></body></html>

Link to comment
Share on other sites
ShadowMage Devoted Member

ShadowMage

Posted
Posted

You forgot to put an id on your div.<div id='tray'><a id="twittericon" ....But I must emphasize my point before, if you can avoid it don't use absolute positioning to place your tray. Try to fit it into the flow of the page. Unless there is some sort of visual effect your trying to achieve, but if it's only to position it in the "correct" place then don't use absolute positioning. It will have to have at least position:relative though in order for your icons to be properly positioned.

Link to comment
Share on other sites
qcom Newbie

qcom

Posted
  • Author
Posted

I'm sorry, I got impatient and posted my code before I actually implemented what you had said.Your additions worked! I modified them slightly just for display purposes but here is the final code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html><head><style type="text/css">a.trayIcon {position: absolute;top: -3px;}a.trayIcon:hover {top: -28px;}#twittericon {	left: 0px;	}#facebookicon {	left: 45px;}#myspaceicon {	left: 90px; }#stumbleuponicon {	left: 135px;}#feedicon{	left: 180px;}#youtubeicon {	left: 225px;}#tray {	position:absolute; left:0px; top:10px;}#container {	position:absolute; left:0px; top:100px;}</style></head><body><div><div id="container"><a id="twittericon" class="trayIcon"  href="http://twitter.com/BUILDALOCK" target="_blank"><img src="Icons/48x48/Twitter-icon.png" /></a><a id="facebookicon" class="trayIcon" href=""><img src="Icons/48x48/FaceBook-icon.png" /></a><a id="myspaceicon" class="trayIcon" href=""><img src="Icons/48x48/MySpace-icon.png" /></a><a id="stumbleuponicon" class="trayIcon" href=""><img src="Icons/48x48/Stumbleupon-icon.png" /></a><a id="feedicon" class="trayIcon" href=""><img src="Icons/48x48/Feed-icon.png" /></a><a id="youtubeicon" class="trayIcon" href=""><img src="Icons/48x48/Youtube-icon.png" /></a><img src="tray.png" id="tray" style="z-index:10;"> </div></div></body></html>

This code is just for display purposes, it'll be slightly reworked to fit into my actual page, but thanks again!I'll post a link to it when it's finished!

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...