HTML - Need Help With Aligning A Facebook Plugin.

I rececenlt made a Yahoo! SDK Plugin, but was rejected, these are the source files,
with little playing around etc etc, later on. So it might (you'll notice), I'm not griping or anything (okay I am .....), but what's wrong with it. It works?

Also its made with Html, no prgramming languages.

http://www.htmlforums.com/attachment...1&d=1177633699

http://www.megaupload.com/?d=O55DJ062

my email is: pankaja.nityananda@gmail.com

I have a jQuery plugin on my website called Facebox and it for some apparent reason when the div opens up in a small pop up window like Facebook it shows my background image of my content div.

I have been working all day trying to fix this issue. When I take out the background-image from "content" div i dont have this problem but I need my content background-image to stay where it currently is.


Here is the code and an example... anyone know how I can fix this? Thank


HTML Code:

<div class="content">

    <p> <a href="#info" rel="facebox">View the 'info' div in the Facebox</a> </p>
<div id="info" style="display:none;">
    <p>Hey, I'm the 'info' div! 
    I look like this:</p>
  </div>
</div

CSS FOR CONTENT DIV IN A SEPERATE STYLESHEET FROM FACEBOX CSS
Code:

.content {
    width: 640px;
    margin-right: auto;
    margin-left: auto;
    background-image: url(../images/_backgrounds/homepage_content.jpg);
    background-repeat: no-repeat;
    position:relative
}

CSS FOR FACEBOX PLUGIN
Code:

#facebox .b {
  background:url(/facebox/b.png);
}

#facebox .tl {
  background:url(/facebox/tl.png);
}

#facebox .tr {
  background:url(/facebox/tr.png);
}

#facebox .bl {
  background:url(/facebox/bl.png);
}

#facebox .br {
  background:url(/facebox/br.png);
}

#facebox {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  text-align: left;
}

#facebox .popup {
  position: relative;
}

#facebox table {
  border-collapse: collapse;
}

#facebox td {
  border-bottom: 0;
  padding: 0;
}

#facebox .body {
  padding: 10px;
  background: #fff;
  width: 370px;
}

#facebox .loading {
  text-align: center;
}

#facebox .image {
  text-align: center;
}

#facebox img {
  border: 0;
  margin: 0;
}

#facebox .footer {
  border-top: 1px solid #DDDDDD;
  padding-top: 5px;
  margin-top: 10px;
  text-align: right;
}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
  height: 10px;
  width: 10px;
  overflow: hidden;
  padding: 0;
}

#facebox_overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height:100%;
  width:100%;
}

.facebox_hide {
  z-index:-100;
}

.facebox_overlayBG {
  background-color: #000;
  z-index: 99;
}

* html #facebox_overlay { /* ie6 hack */
  position: absolute;
  height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px');
}

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

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?

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>

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.

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.

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 !

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

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&amp;b=ffffff&amp;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

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>