|
HTML - Floating Menu & Facebook Box - Can Someone Help?
I am looking to put a floating menu on the right and a floating facebook box on the left side of my website.
Can someone help me by telling me how to do one or both of these things. or.. Can some help me by telling me where to go to find out how to do it? Thanks ! Similar TutorialsOk so after reading the Myspace thread I jumped on the bandwagon and became totally obsessed with it - now that the Myspace obsession has died down, I've become hooked on Facebook!! I love it! I think it's so much better then Myspace and Hi5 and all those other 10 million sites that exist . . . At first I wasn't too keen but my friend made my profile for me . . . I was told "it's at a 'university' level and doesn't have any bogans or teeny boppers" I guess what she meant was that it's a bit more "mature" then the other sites . . . Ok it's hard to explain! But i'm totally hooked on it now and it's really not helping with all this uni work that I have to get done!! Does anyone else use Facebook?? ==================================== welcome to my website, www.ant-shopping.com . Hi, I am new to website creation and have purchased a template. I have modified it ok and it is running at www.marriagephoto.co.uk however I can't get the facebook connect like button working. Can anyone out there help me. I have gone into FB and copied the code and popped it into dream weaver but it does nothing at all - please help thanks, anna - I have included the URL so you can see how the site is made...I think its Java? Hello everyone, my name is Andrew and I am new to this community I know basic stuf from html and I try to find my way in flash too. Right now I am building a website at the office 365 platform. It is a simple display site that I could handle but the owner asked me to do something that I have no idea how to do it :S He asked me to make the picture function like facebook zoom https://chrome.google.com/webstore/d...oddophfngopipi With this, when you have the mouse pointer on a picture the picture pops up and becomes bigger, and when the mouse go outside the picture, the pop up vanishes. I ve searched all i could and I couldn't find how to do it, I have reached the point that mouseover can open a new window (if the add block in not active) and then the user must manualy close it (this will result a minefield on the web page:S) Can anyone help me with this please, getting desperate :S Thanks in advance Really simple stuff but im having problems getting my facebook plugin to align all the way to the right of my page. the website is www.beanaffiliatetoday.com. you can view the source code obviously so from there hopefully someone can telll me. im just starting out so im sorry. Thanks! Hello all, First of all, I am new to HTML stuff, so any help would be really appreciated. I use a WYSIWYG program called WYSIWYG Web Builder. While using this program (for around 10 months) I learned some stuff about HTML, PHP and CSS. And I managed to make my own website very well. In my website, there are some pages that I would like visitors to comment on the article these pages contain. That program offers a "Blog Extension", all I needed to do is to drag this extension to the page and it automatically creates the PHP code and other stuff (of course after creating the SQL database). This extension shows the comments in an inline frame, but with the help of a guy who uses the same program, we managed to remove the inline frame, so with every comment added, the page height expands. The only downside of this blog extension is that anyone can comment without approving the comment by the admin! Now, I noticed that Facebook has a comment plugin, I tried it on a "white" page and it works well. But, let's have this scenario: I have a page with blue background color, and I want the Facebook comments plugin to be inside a gray frame that expands WITHOUT showing the scrollbar (not for the page, for the comments) when more comments are posted, how can I do that? Thanks a lot Hey every one I've got a simple one. When you copy and paste a link into face book often times a small image shows up to the left of link with the description. So I'm trying to get that to work on a site that I've built. I've read a bit about the open graph meta tags and a few simpler stop gaps but so far no luck. Did a bit of reading here but when push came to shove I'm still stuck: http://stackoverflow.com/questions/1...ost-link-image I'm trying to get the following image to be my FB link Image: http://www.eartheasy.johncliffordtay...s/thumb000.png So far I have plugged in the flowing HTML code in my <head> area of the with no luck: Code: <!-- Opengraph protocol. See http://ogp.me/ --> <meta property="og:title" content="Earth Easy Pest Control" /> <meta property="og:type" content="company" /> <meta property="og:url" content="http://www.eartheasy.johncliffordtaylor.com" /> <meta property="og:image" content="http://www.eartheasy.johncliffordtaylor.com/images/thumb000.png" /> Also I've tried the simpler work around mentioned in the above article with no luck: Code: <link rel="image_src" href="http://www.eartheasy.johncliffordtaylor.com/images/thumb000.png" /> As always thanks for the help in advance ladies and gents! Have a great day! JT hello: I am trying to add html to my facebook page. The title comes up but the picture does not. I linked it to my wordpress site. Here is the code for the link; <img src="http://popculturecollector.com/?attachment_id=73"></img> did I do it wrong? Thank you for your help. On one of my applications on facebook, we have a problem user who keeps posting on the walls some HTML which is hiding the rest of our posts and other info on the page. Any ideas what i need to post to show it again?? This is really annoying I found his post in the page code, and it just says this : Code: <span>about 3 hours ago</span>
</h4>
<div>
<p></p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="side">
</div>
</div>
Hey everyone...thanks for taking a look at my code. I'm a novice, but can generally figure things out...but this has me stumped. My website is very basic. I do the design in photoshop, then map in some clickable areas in dreamweaver to make it interactive. My main website layer is centered on a tiled background. I want to add a Facebook Recommend Button on top of that layer and I want it aligned to the right side of the layer with a 30px cushion on the right. This is what I have so far...and it's nearly working: --------------------------------------------- <body> <center> <div id="Layer1" style="position:relative; width:1040px; height:850px; z-index:1; left: 0px; top: 0px;"><img src="pic1.jpg" width="1040" height="850" border="0" > <div id="Layer2" style="position:absolute; width:450px; height:30px; z-index:2; left: 590px; top: 120px;"> <iframe src="http://www.facebook.com/plugins/like.php?app_id=242119399131656&href=www.website.com&send=false&layout=standard&widt h=450&show_faces=true&action=recommend&colorscheme=light&font=verdana&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"></iframe> </div> </div> </center> </body> --------------------------------------------------- The facebook frame changes length depending on who is logged in and how many friends like my page. I'd like it always to be lined up to the right of it's frame or Layer 2, instead of the Layer 2 lined up to the right of Layer1 and the facebook button lined up to the left of Layer 2 as it is now. It's a small difference. I hope I've made it clear. Any help or feedback would be appreciated. Thanks! Hi I'm a little confused about the bottom "application" bar on facebook. It appears to be static, meaning it does not "reset" whenever you visit a new page (if you have a chat session going on, for example). The only way I can see this is coded, is by placing the bar in a div on top of the content in an iframe. The source code is kindda confusing, so I can't really figure this one out. Anybody know if this is in fact the case? Best regards sorenchr I want to add a table on my facebook page.The code I use is: <table style="border:1px solid #cccccc;background-color:#003366;width:240px;height:138px;" border="0" cellspacing="0" cellpadding="0"><tr><td><a href="http://www.homefinance.nl/hypotheek.asp" target="_blank" style="font-family:Arial;font-size:10pt;color:#ffffff;text-decoration:none;font-weight:bold;margin-left:1px;">Laagste actuele hypotheekrente</a></td></tr><tr><td valign="top" colspan="2"><iframe src="http://www.homefinance.nl/extern/rentetabellen.asp?t=1&b=ffffff&f=000000" scrolling=no frameborder=0 marginheight=1 marginwidth=1 width="100%" height="120px" name="HF"></iframe></td></tr></table> When I put it on my webiste it works just fine, but on facebook I only get the titlebox as big as the whole table. I use the app Static FBML. My friend said facebook can't read Iframes but I have no idea what that means, I'm no HTML expert Does someone know what to do? Is there something wrong with the code? Do I need to use another app? Please explain it step by step because, you've probably noticed, english is not my native language Thanks Howdy, I wanted to have a fixed bar at the bottom of website just like Facebook. Can anybody know how to do that? Bar should be customizable as per my requirement. Thanks in Advance. My Blog's URL: http://moviesamour.blogspot.com/ I just created this blog. I'm not sure if the feed isn't working due to the fact that I used a downloaded skin and the coding is off, or what, but it isn't validating when I try to link it to Facebook notes (or when I put it into feed validator, for that matter). I really don't know much about coding, so all help is appreciated! Here's the HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>movies|amour . . . love what you watch.</title> </head> <style type="text/css"> body {text-align:center; background-image:url(http://i725.photobucket.com/albums/w...y/stripe.png); background-color:#fff; font-size:11px; color:#999; font-family:tahoma; margin:0px;} #navbar-iframe {height:0px; visibility:hidden; display:none;} #top {margin:0 auto 0 auto; padding:0px; width:100%; overflow:hidden;} #navigation {margin-left:auto; margin-right:auto; margin-top:50px; width:720px; overflow:hidden;} .nav {width:80px; float:right; height:auto; margin-left:10px; margin-bottom:-2px; padding-top:10px; padding-bottom:10px; background-color:#fff; display:inline-block; color:#aaa; font-family:arial; font-size:11px; letter-spacing:1px; text-transform:uppercase; text-align:center; cursor:pointer; border:1px solid #eaeaea;} .nav:hover {background-color:#fcfcfc; color:#ffb9ca;} #main {margin-left:auto; margin-right:auto; margin-bottom:50px; padding-bottom:20px; width:718px; height:auto; overflow:hidden; border:1px solid #eaeaea; background-color:#f5f5f5; background-image:url(http://i32.tinypic.com/mky6c5.jpg);} #text {margin-top:20px; margin-bottom:0px; margin-left:auto; margin-right:auto; width:674px; height:auto; overflow:hidden; background-color:#fff1f3; border:1px solid #e5e5e5;} #holder {float:right; width:508px; height:auto; text-align:justify; border-left:1px solid #eaeaea;} .displaypic {float:left; width:auto; height:auto; overflow:hidden; padding:20px;} .big {color:#f9b3bd; text-align:left; font-family:georgia; font-size:28px; letter-spacing:-1px; font-style:italic; margin-bottom:10px; margin-top:3px;} .big:first-letter {color:#e19aa5;} .small {color:#dccacf; text-align:right; font-family:georgia; font-size:17px; font-style:italic; border-bottom:3px solid #f5f5f5; padding-bottom:2px;} .small:first-letter {color:#cbbdc1;} a:link {color:#ddd; text-decoration:none; font-weight:bold;} a:visited {color:#ddd; text-decoration:none; font-weight:bold;} a:hover {color:#ffc2d5; text-decoration:none; font-weight:bold;} blockquote {padding:10px; border:2px solid #f6f2f1; background-color:#faf7f6;} li, ul, ol {list-style-position:inside; margin:0px; padding:0px;} .btext {padding-left:15px; padding-right:15px; padding-bottom:15px; padding-top:10px; min-height:139px; background-color:#FFF;} .btext img {background-color:#fafafa; padding:10px; border-bottom:1px solid #e0e0e0; border-right:1px solid #eee;} .displaypic img {background-color:#fff; padding:10px; border:2px solid #ffe3ea;} b {color:#e19aa5;} </style> <body> <div id="top"> <div id="navigation"> <span class="nav" onClick="document.getElementById('main').innerHTML=document.getElementById('archives').innerHTML">Ar chives</span> <span class="nav" onClick="document.getElementById('main').innerHTML=document.getElementById('profile').innerHTML">Abo ut</span> <span class="nav" onClick="document.getElementById('main').innerHTML=document.getElementById('blog').innerHTML">Blog</span> </div> </div> <div id="profile" style="visibility: hidden; width: 0px; height: 0px; position: absolute; left:0px; top:0px; overflow:auto;"> <div id="text"> <div id="pic"> <div class="displaypic"> <img src="http://img808.imageshack.us/img808/6761/cato.png"> </div> </div> <div id="holder"> <div class="btext"> <div class="small">About Me</div> <div class="big">Who's That Girl?</div> As a recent college graduate, my studies in Art History and Communications & Media combined with a background in musical theater performance have left me constantly thirsting for the arts. Since I have a bit of time on my hands, I've decided to combine my interest in movies, television and the arts with my love of writing to create <b>movies|amour</b>, a lighthearted blog chronicling my musings on the entertainment I consume on a daily basis. What better way to appease my appetite? </div> </div> </div> <div id="archives" style="visibility: hidden; width: 5px; height: 5px; position: absolute; left:0px; top:0px; overflow:auto;"> <div id="text"> <div id="pic"> <div class="displaypic"> <img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/Picture18.png"> </div> </div> <div id="holder"> <div class="btext"> <div class="small">Archives</div> <div class="big">Reruns</div> <BloggerArchives> <a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a><br> </BloggerArchives> </div> </div> </div> </div> <div id="blog" style="visibility: hidden; width: 5px; height: 5px; position: absolute; left:0px; top:0px; overflow:auto;"> <Blogger> <div id="text"> <div class="displaypic"> <script type="text/javascript"> var image=new Array() image[0]='<img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/Picture109.png">' image[1]='<img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/AD-15.png">' image[2]='<img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/228.png">' image[3]='<img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/Sellj363.png">' image[4]='<img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/Sellj713.png">' image[5]='<img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/Sellj630.png">' var random=Math.floor(Math.random()*(image.length)) document.write(image[random]) </script> </div> <div id="holder"> <div class="btext"> <div class="small"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> <span style="color:#c4c4c4; font-size:12px;"><$BlogItemDateTime$></span></div> <div class="big"><BlogItemTitle><$BlogItemTitle$></BlogItemTitle></div> <$BlogItemBody$> <br> <BlogItemCommentsEnabled> <a href="<$BlogItemCommentCreate$>" <$BlogItemCommentFormOnClick$>> <$BlogItemCommentCount$> comments</a> </BlogItemCommentsEnabled> </div> </div> </div> </Blogger> </div> </div> <div id="main"> <div id="text"> <div class="btext" style="border:0px;"> <div class="big" style="text-align:center"><span style="color:#ccc;"><p id="example1"><b>movies</b>|amour</span></p> <center><img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/Sellj713.png"> <img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/Picture109.png"> <img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/220.png"> <img src="http://i725.photobucket.com/albums/ww256/Yours-Tragically/Sellj363.png"></center> <p id="example2"><font size="4">love what you watch.</p></font></div> </div> </div> </img> </body> </html> Hi board members I've been hard at this for hours and can't get it working. Following the tutorial on facebook in order to specify the image which is associated with the page in question, my daughter's blog which I coded in notepad Please be advised the facebook links are not positioned where they will finally reside on the page. I have tried the iframe method first which doesn't have image control of this, then tried html5; and then the supa dupa xfbml methods. The latter two are called open graph. However ALL three methods return the rss icon image - so frustrating. The image I want to use is within their parameters and is in my images folder on level above the root. Can you please look at my code and shed some light on this. Note all of this code has been generated by their engine - copy/paste. the lines you are interested in are 11-16; 24-31 and 62 Good luck, Mal from Cessnock Hello. If somebody uses facebook would be easier to understand. I want to display some pictures, and the name of the person, in the way that facebook shows it in the left. It shows small pictures with the name under, and only three per row. Can anybody help me accomplish that? thanks! Hello, Using the Greasemonkey script on Facebook, I was able to embed a video on my website. However, the code is not XHTML compliant (includes embed tags). The code is below. I've struggled trying to convert this into code using the object tag. is it possible? Can someone show me where I need to move each part of the existing code into an "object" based code? Thanks, Josh Code: <embed type="application/x-shockwave-flash" src="http://b.static.ak.fbcdn.net/swf/mvp.swf?7:136764" width="576" height="432" style="" id="so_mvp_swf_4962e86f49d3b2a98429149" name="so_mvp_swf_4962e86f49d3b2a98429149" bgcolor="#000000" quality="high" allowScriptAccess="always" scale="showall" allowFullScreen="true" wmode="window" flashvars="video_src=http%3A%2F%2Fvideo.ll.facebook.com%2Fvideo-ll-sf2p%2Fv1182%2F26%2F116%2F58389155428_4899.mp4&stage_width=756&stage_height=567&motion_log=%2Fvideo%2Fmotion_log.php&video_id=553535535428&video_length=408440&video_seconds=408&video_category=0&video_rotation=0&video_href=http%3A%2F%2Fwww.facebook.com%2Fvideo%2Fvideo.php%3Fv%3D58389155428&fbt_play_again=Play+Again&fbt_go_to_video=Go+to+Video&fbt_next_video=Next+Video&fbt_share=Share&video_player_type=video_player_permalink&video_width=756&video_height=567&slate_src=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fswf%2Fmvp_slate.swf%3F7%3A134155&tail_slate_src=http%3A%2F%2Fstatic.ak.fbcdn.net%2Fswf%2Fmvp_tail_slate.swf%3F7%3A134155&next_video_url=http%3A%2F%2Fwww.facebook.com%2Fvideo%2Fvideo.php%3Fv%3D6637075428&video_owner_name=Becky+Draper-Vilimek&video_owner_href=http%3A%2F%2Fwww.facebook.com%2Fprofile.php%3Fid%3D6545535428&video_timestamp=Added+on+Thursday&video_title=Our+Wedding+-+September+13%2C+2008&thumb_url=http%3A%2F%2Fvthumb.ak.facebook.com%2Fvthumb-ak-sf2p%2Fv643%2F101%2F68%2F682235428%2Fb682244448_58389155428_1292.jpg&highqual_src=http%3A%2F%2Fvideo.ll.facebook.com%2Fvideo-ll-sf2p%2Fv247%2F26%2F116%2F58389155428_44340.mp4&lowqual_src=http%3A%2F%2Fvideo.ll.facebook.com%2Fvideo-ll-sf2p%2Fv1182%2F26%2F116%2F55355355428_4899.mp4&fbt_lowqual=View+in+Regular+Quality&fbt_highqual=View+in+High+Quality&highqual_is_on=1&string_table=http://static.ak.fbcdn.net/js_strings.php/t85501/en_US&swf_id=so_mvp_swf_4962e55435442a98429149"/> Hey, I need to create Lightbox with embeded Flickr albums with added facebook like buttons, any one know how to? ive set up lightbox. Any help would be greatly appreciated! Many Thanks, Bernie Hi all, Sure glad I found this site!, I would like to ask for some advice please guys I have a portal that uses a portal stylesheet, the header is a .png image and needs to be 100% width, this loads from a Content Web File Manager, it carries a logo on the left and some corperate colour bands, it appears on every page of the portal, the right side is blank apart from the picture of a search box ( it shipped with the png I will be getting rid of this using PSP) I have created a <div> content </div> and I want this to appear to the right and in front of the header in place of this search box The <div> loads fine on templates (the dynamic content of the portal these are templates that the site use) so I know this works fine, now i want to make it appear on the header itself in place of the picture of the search box that I have erased This is where I am getting stuck - I do want it to be a permanent feature on the header and to the right, what do I need to use in the html code before and after the <div> content </div> ? All help will be greatly appreciated John Prevous title: (div in div top:0; left:0; = top corner of first div, not page...) Ok, here's the code: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>DIV DIV</title>
<style type="text/css">
<!--
#apDiv1 {position:absolute;top:0;left:0;width:150px;height:150px;z-index:0;background-color:#00F;}
#apDiv2 {position:absolute;top:100px;left:100px;width:200px;height:200px;z-index:1;background-color:#F00;}
-->
</style>
</head>
<body>
<div id="apDiv1"></div>
<div id="apDiv2"> </div>
</body>
</html>
Which produces: However, the "problem" is that i would like that result with this variation on the code: HTML Code: <div id="apDiv2"> <div id="apDiv1"></div> </div> But that "unfortunately" returns this result: Which was great when I first did it, (i always thought top:0; left:0; would put a div in the top corner of the page regardless of where it is within the code... so when i tried it in my last project and it used the top corner of the containing div as 0,0 that was exactly what i needed) but in my current project, I really need div1 to go to the top corner of the page, not div2, but still reside inside of div2... is this possible? Hey, Ive seen this done a few times and i was wondering if aqnyone knoew how hard it is or how to achieve it. When the user clicks on a button i want either an image or text to appear next to it. Im sorry i cant find any examples but i have seen it done in places. Thanks, Ben |
|||||||