|
HTML - Aligning Facebook Button To The Right
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! Similar TutorialsReally 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! 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, I ran into this problem today in my Basic XHTML class, and it was enough to stump me and the instructor: if you want to put an unordered list in the middle of a page, but you want the list items to be left-aligned so the bullets are one on top of the other...how do you do it? I started with code something like <div align="center"> <ul type="disc"> <li>Wine</li> <li>Women</li> <li>Song</li> </ul> </div> This centers the list on the page, but it also centers each list item. I tried placing a <div align="left"> around the list items, individually and collectively, but depending on the positioning it either had no effect or it nullified the center attribute completely and gave me a left-aligned list on the left edge of the page. Attempts to change the style of the <li> tag, which I haven't done in months and was never all that good at, failed. I know I can do this in ten seconds by putting the list inside a one-cell table, and with much fiddling I could probably do it with a spacer GIF...but what's the 1.0 Strict way? Ok 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 . 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 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 ! 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 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. 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. 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 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>
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 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 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> 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! I am creating a website that has a search button with an image. I would like to know if there is some simple code that I can include that would display the same basic image with a different color when the user mouses over the button. Here is the code: <FORM name="searchform" onSubmit="return validateSearch();" METHOD="POST" ACTION="search_results_lt.asp"> <INPUT TYPE="text" NAME="Search" VALUE="" SIZE="20" > <INPUT TYPE=IMAGE SRC="images/search_button.gif" Name="SearchButton" Value="Submit"> </FORM> **** Thanks for your help, Robin 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 I have a HTML file with two pictures on. They are like title lines. I need the one to be pushed right up to the top-left, and the other one to strech all the way across. I have a screenshot: http://img80.imageshack.us/img80/6827/screenshotjs.png Have a look. The lines are two pictures, they are split close to the middle. |
|||||||