blog: http://mattdomchristom.tumblr.com
As you can see, when you scroll down, the navigation bar at the top follows and it's annoying. How can I just make it stay at the top of the page?
This is my HTML:
<head>
<!--Default Variables-->
<!--Colors-->
<meta name="color:Background" content="#000"/>
<meta name="color:Text" content="#fff"/>
<meta name="color:Post Title" content="#1C1C1C"/>
<meta name="color:Link" content="#8B7D7B"/>
<meta name="color:Link Hover" content="#d8d8d8"/>
<meta name="color:Blog Title" content="#8b0000"/>
<meta name="color:Links Text" content="#e7e7e7"/>
<meta name="color:Links Hover" content="#fff"/>
<meta name="color:Ask Background" content="#838b8b"/>
<!--Images-->
<meta name="image:Background" content""/>
<meta name="image:Sidebar" content=""/>
<!--Options-->
<meta name="if:Infinite Scrolling" content=""/>
<meta name="if:Pagination" content=""/>
<meta name="if:Glitterati Cursor" content=""/>
<meta name="if:Tiny Scrollbar" content=""/>
<meta name="if:Box shadows" content=""/>
<meta name="if:Ask" content=""/>
<meta name="if:Archive" content=""/>
<meta name= "if:Link 1" content="link1"/>
<meta name= "if:Link 2" content="link2"/>
<meta name= "if:Link 3" content="link3"/>
<meta name= "if:Link 4" content="link4"/>
<!--Links-->
<meta name="text:Link 1 URL" content=""/>
<meta name="text:Link 1 name" content=""/>
<meta name="text:Link 2 URL" content=""/>
<meta name="text:Link 2 name" content=""/>
<meta name="text:Link 3 URL" content=""/>
<meta name="text:Link 3 name" content=""/>
<meta name="text:Link 4 URL" content=""/>
<meta name="text:Link 4 name" content=""/>
{block:Description}
<meta name="description" content="{MetaDescription}" />{/block:Description}
<title>
{block:PostSummary}
{PostSummary} - {/block:PostSummary}{Title}</title>
{block:ifinfinitescrolling}<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>{/block:ifinfinitescrolling}
</style>
<style type="text/css">
{block:ifGlitteraticursor}
body, a, a:hover {cursor: url(http://media.tumblr.com/tumblr_m10gu8MJ7Z1r869vr.gif), progress;}{/block:ifGlitteraticursor}
{block:iftinyscrollbar}
::-webkit-scrollbar {width: 8px; height: 9px; background :#fff; }
::-webkit-scrollbar-thumb { background-color: #000000; -webkit-border-radius: 0ex; border: 0px #D4D8DB;}
{/block:iftinyscrollbar}
body{
background-color: {color:Background};
background-image: url({image:Background});
background-attachment: fixed;
background-repeat: repeat;
background-position: center;
font-family: helvetica;
font-size: 14px;
line-height: 14px;
letter -spacing:0px;
color:{color:Text};
text-align:justify;
}
a:link, a:active, a:visited{
color: {color:Link};
text-decoration:none;
}
a:hover{
color: {color:Link Hover};
text-decoration:underline;
}
#container {
margin:auto;
position:right;
width:1200px;
color: {color:Title};
_margin-left:10%;
}
#content {
float:center;
width:508px;
padding: 2px;
margin-top: 25px;
margin-left: 300px;
background: clear;
}
#entry {
margin-top:15px;
padding:3px;
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
{block:ifboxshadows};
box-shadow: 0px 5px 20px rgba(0,0,0,0.35);
{/block:ifboxshadows}
{block:ifboxborders}
border: 1px solid black;
{/block:ifboxborders}
}
#entry img{
{block:IndexPage}max-width:500px;{/block:IndexPage}
}
#side {
position:fixed !important;
width: 220px;
height: auto;
margin-top: 40px;
margin-left: 500px ;
padding: 2px ;
font-size: 13px;
text-transform: lowercase;
background-image: url(http://static.tumblr.com/j4dtzbm/Amxlg5cp4/transparentg.png);
{block:ifboxshadows};
box-shadow: 0px 5px 20px rgba(0,0,0,0.35);
{/block:ifboxshadows}
}
#side2 {
position:fixed !important;
width: 753px;
height: 30px;
text-transform: uppercase;
font-size: 13px;
background-color:black;
opacity: .8;
margin-top: -20px;
margin-left: -30px ;
padding: 2px ;
}
.navigate a{
color: {color:Links Text};
display:block;
width: 85px;
height: 15px;
text-align: center;
padding-top: 3px;
padding-left: 3px;
margin-left: 0px;
margin-top: 2px;
position: relative;
text-align: center;
z-index: 999;
font-family: helvetica;
font-size: 14px;
display: inline-block;
}
.navigate a:hover{
color: {color:Links Hover};
text-decoration: none;
}
.permalink{
display: block;
padding:1px;
margin-top:0px;
margin-bottom:4px;
font-size: 11px;
text-align: center;
text-transform: uppercase;
}
.blogtitle{
text-transform: uppercase;
font-size: 22px;
line-height: 22px;
color: {color:Blog Title};
}
.posttitle{
font-size: 17px;
line-height: 12px;
text-transform: uppercase;
color: {color:Post Title};
letter-spacing: 1;
font-weight: none;
}
blockquote{
padding:0px 0px 2px 5px;
margin:0px 0px 2px 1px;
border-left: 1px solid {color:Text};}
blockquote p, ul{margin:0px; padding:0px;
}
.chat .line{
margin: 0 0 0px;
padding: 2px;
}
.chat .line.odd{
}
.label {font-weight:bold; color:{color:text}}
.question {
color:{color:Text};
font-size: 10px;
font-weight: normal;
line-height:95%;
background: {color:Ask Background};
margin: 0 0 10px 0;
padding: 10px 15px;
position: relative;
-moz-border-radius:5px; -webkit-border-radius:5px;
}
.questionarrow {
width: 13px;
height: 7px;
font-size:30px;
position: absolute;
color:{color:Ask Background};
bottom: -3.5px;
left: 260px;
}
.asker {width:500px; text-align:left; color:{color:Text};font-family: silkscreen;font-size: 9px;}
.asker a {color:{color:Text};}
.asker img {float:left; margin-left:220px; vertical-align:top; margin-right:3px; max-height:15px;}
a img{border: 0px;}
.p { padding-top: 5px; }
.ol, ul { margin-left: 10px; padding: 5px; }
.ul { list-style-type: square; }
.albumart { margin-bottom: 0px; }
.albumart img, .audio embed { width: 60px; }
.video embed, .post div.video object {width:250px !important; height:187px !important;}
.notes img{width:10px; position:left; top:3px;}
.tags {
width:auto;
solid {color:Links};
font-size: 10px;
text-transform:uppercase;
color:{color:link};
padding:2px;
line-height:1;
margin-left:1px;
}
.tags a:hover{
color: {color:Link Hover};
text-decoration:underline;
}
#pages {
float: center;
width: 753px;
height: 22px;
text-transform: uppercase;
font-size: 14px;
color: {color:Link};
background-color: white;
opacity: .6;
margin-top: 10px;
margin-left: 300px ;
padding: 2px;
padding-top: 6px;
}
{font-size: 100%;}
{CustomCSS}
</style>
<link rel="shortcut icon" href="{Favicon}">
<link rel="alternate" type="application/rss+xml" title="{Title}" href="{RSS}" />
{block:ifinfinitescrolling}<style>#toTop {display:none;text-decoration:none;position:fixed;bottom:20px;right:20px;overflow:hidden;width:30px;height:40px;border:none;text-indent:-999px;background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left top;z-index:3000;}#toTopHover {background:url(http://static.tumblr.com/hi8vwsz/Q0ull6xz3/totop.png) no-repeat left -40px;
width:30px;height:40px;display:block;overflow:hidden;float:left;opacity: 0;-moz-opacity: 0;filter:alpha(opacity=0);}
#toTop:active, #toTop:focus {outline:none;}#toTop:active, #toTop:focus {outline:none;}</style>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/kx3lgzker/jquery-1.3.2.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/4jtlgzkf8/easing.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/53unaru/y8wlgzkbt/jquery.ui.totop.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>{/block:ifinfinitescrolling}
</head>
<body>
<div id="container">
<div id="content">
<div id="side2">
<div class="navigate">
<a href="/" >home</a>
{block:ifAsk}
<a href="/ask" >message</a>
{/block:ifAsk}
{block:iflink1}
{text:Link 1 name}
{/block:iflink1}
{block:iflink2}
{text:Link 2 name}
{/block:iflink2}
{block:iflink3}
{text:Link 3 name}
{/block:iflink3}
{block:iflink4}
{text:Link 4 name}
{/block:iflink4}
<a href="/archive" >archive</a>
<a href="http://sociallyawkwardgiraffe.tumblr.com/" >Theme</a>
</div>
</div>
</center>
<div id="side">
<center>
<div class="blogtitle">{Title}</div>
</center>
<br>
<img src="{image:sidebar}" width=220px>
{Description}
</div>
</div>
</div>
<div id="content">
{block:Posts}
<div id="entry">
<center>
{block:IndexPage}
<div class="permalink" style="letter-spacing:1px;"><l> {Month} {DayOfMonth}, {Year} • {NoteCountWithLabel} • Reblog</l>
</div>
{/block:IndexPage}
</center>
{block:Text}
{block:Title}<span class="posttitle">{Title}</span>
{/block:Title}<span class="entrytext">{Body}</span>
{/block:text}
{block:Link}
{Name}{block:Description}{Description}{/block:Description}
{/block:link}
{block:Photo}
{LinkOpenTag}
<a href="{permalink}"><img src="{PhotoURL-500}" alt="{PhotoAlt}" width=500px
{LinkCloseTag}
{block:Caption}{Caption}{/block:Caption}
{/block:Photo}
{block:Photoset}<center>{Photoset-500}</center>
{block:Caption}{Caption}{/block:Caption}
{/block:Photoset}
{block:Quote}
<span class="title">{Quote}</span>
{block:Source}<i> - {Source}</i>{/block:Source}<br>
{block:Caption}{Caption}{/block:Caption}
{/block:Quote}
{block:Chat}
{block:title}<div id="posttitle"><center>{Title}<br></center></div>
{/block:title}<div class="chat">
{block:Lines}<div class="chat"><div class="line {Alt}"><div class="{Alt} user_{UserNumber}">
{block:Label}<span class="label"><b>{Label}</b></span>
{/block:Label}{Line}</div>
</div></div>{/block:Lines}</div>{/block:Chat}
{block:Audio}
{block:albumart}<div class="albumart"><img src="{albumarturl}" align="left"></div>
{/block:albumart}<div style="width: 310px; height: 20px;">
{AudioPlayerblack}</div><BR>{block:TrackName}<span><strong>Title</strong>:
{TrackName}</span>{/block:TrackName}<br>
{block:Artist}<span><strong>Artist:</strong>
{Artist}</span>{/block:Artist}<br>
{/block:Audio}
{block:Video}<center>{Video-500}<BR>
</center>{block:Caption}{Caption}{/block:Caption}{/block:Video}
{block:Answer}
<div class="question">
<div class="questionarrow">▼</div>
{Question}
</div>
<div class="asker"><img src="{AskerPortraitURL-24}">{Asker}</div>
<div class="answer">{Answer}</div>
{/block:answer}
{block:HasTags}<div class="tags"> tags: {block:Tags}#{Tag} {/block:Tags}</div>{/block:HasTags}
</center>
{block:PostNotes}{PostNotes}
{/block:PostNotes}</div>{/block:Posts}
</center>
</div>
<div id="pages">
{block:ifpagination}
<center>
{block:PreviousPage}←{/block:PreviousPage} {CurrentPage} of {TotalPages} {block:NextPage}→
{/block:NextPage}
{/block:ifpagination}
<center>
</center>
</div>
</div></div>
</div>
</body>
</html>
In the Custom CSS box in your customization screen, enter the following:
#side2 {
position: relative!important;
}
Related
I'm using itext7.pdfHtml adds-on to convert my html template to PDF doc and everything is ok and result produce without any error but my is that there were a bunch of CSS properties that not recognizable with pdfhtml dll.
some of these properties are show at this snippet:
.day-meta-wrapper {
font-size: 15px;
line-height: normal;
height: 24px;
border-radius: 12px;
color: #ffffff;
background: #00000033;----> not support
padding: 0 6px;
display: flex;----> not support
align-items: center;----> not support
justify-content: center;----> not support
}
this my html file result:
as you can see in browser view there's no problem and all of the properties work properly
but this is my PDF result:
as shown in the picture PDF doc loosed CSS properties
h1 {
background-color: red;
}
.day-meta {
margin: 5px 0;
user-select: none;
display: flex;
align-items: center;
justify-content: center;
}
.day-meta-wrapper {
font-size: 15px;
line-height: normal;
height: 24px;
border-radius: 12px;
color: #ffffff;
background-color: #00000033;
padding: 0 6px;
display: flex;
align-items: center;
justify-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="css/DayMeta.css">
</head>
<body style="background: #979797;">
<h1>Hello IText7 PDFHtml</h1>
<div class="day-meta">
<div class="day-meta-wrapper">
<div>December 11, 2018</div>
</div>
</div>
</body>
</html>
I'm struggling with how to click the 'Submit' button on an HTML form using code. I seem to be able to set the variables - Name, Email etc - using the HTTPSocket but when the socket 'Posts' it doesn't trigger the submit.
Any help will be gratefully received
Cheers,
Alan McTavish ...
RB 2008 r1 ... no plugins please.
Hi again,
The code I am using is the example given with the software - HTTP Example.rbp. It reads the website code and asks me to give the values for the input fields in the HTML. However, the form doesn't seem to be submitted.
The HTML on the server is as follows:
<!DOCTYPE html><!-- HTML5 -->
<html lang="en" dir="ltr">
<head>
<title>ActivationNoted - Infosoft</title>
<meta charset="utf-8" />
<!--[if IE]><meta http-equiv="ImageToolbar" content="False" /><![endif]-->
<meta name="author" content="Ian Shere" />
<meta name="generator" content="Incomedia WebSite X5 Professional 10.1.0.39 - www.websitex5.com" />
<meta name="viewport" content="width=774" />
<link rel="icon" href="favicon.png" type="image/png" />
<link rel="stylesheet" type="text/css" href="style/reset.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="style/print.css" media="print" />
<link rel="stylesheet" type="text/css" href="style/style.css" media="screen,print" />
<link rel="stylesheet" type="text/css" href="style/template.css" media="screen" />
<link rel="stylesheet" type="text/css" href="style/menu.css" media="screen" />
<!--[if lte IE 7]><link rel="stylesheet" type="text/css" href="style/ie.css" media="screen" /><![endif]-->
<link rel="stylesheet" type="text/css" href="pcss/activationnoted.css" media="screen" />
<script type="text/javascript" src="res/jquery.js?39"></script>
<script type="text/javascript" src="res/x5engine.js?39"></script>
</head>
<body>
<div id="imHeaderBg"></div>
<div id="imFooterBg"></div>
<div id="imPage">
<div id="imHeader">
<h1 class="imHidden">ActivationNoted - Infosoft</h1>
</div>
<a class="imHidden" href="#imGoToCont" title="Skip the main menu">Go to content</a>
<a id="imGoToMenu"></a><p class="imHidden">Main menu:</p>
<div id="imMnMn" class="auto">
<ul class="auto">
<li id="imMnMnNode0">
<a href="index.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Home Page</span>
</span>
</a>
</li><li id="imMnMnNode11">
<a href="features-of-footware.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Features of footware</span>
</span>
</a>
</li><li id="imMnMnNode12">
<a href="download.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Download</span>
</span>
</a>
</li><li id="imMnMnNode14">
<a href="support.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Support</span>
</span>
</a>
</li><li id="imMnMnNode3">
<a href="contact-us.html">
<span class="imMnMnFirstBg">
<span class="imMnMnTxt"><span class="imMnMnImg"></span>Contact Us</span>
</span>
</a>
</li>
</ul>
</div>
<div id="imContentGraphics"></div>
<div id="imContent">
<a id="imGoToCont"></a>
<h2 id="imPgTitle">ActivationNoted</h2>
<div style="width: 754px; float: left;">
<div style="float: left; width: 377px;">
<div id="imCell_1" class="imGrid[0, 0]"><div id="imCellStyleGraphics_1"></div><div id="imCellStyle_1"><form id="imObjectForm_1" action="imemail/imEmailForm_160xo79k.php" method="post" enctype="multipart/form-data" style="width: 365px; margin: 0; padding: 0; text-align: left;">
<fieldset class="first">
<div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_1" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Name</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_1" name="imObjectForm_1_1" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_2" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">E-mail</label><br /><input type="text" class="valEmail" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_2" name="imObjectForm_1_2" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_3" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_3" name="imObjectForm_1_3" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_4" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address2</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_4" name="imObjectForm_1_4" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_5" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address3</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_5" name="imObjectForm_1_5" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_6" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Address4</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_6" name="imObjectForm_1_6" /></div>
<div class="imClear" style="height: 1px; line-height: 1px; width: 365px;"></div>
<div style="float: left; margin: 0; padding: 0 0 2px;"><label for="imObjectForm_1_7" style="vertical-align: top; display: inline-block; margin: 3px 0 2px 0; width: 351px;">Activation Key issued</label><br /><input type="text" class="" style="float: left; width: 347px; margin-right: 10px; vertical-align: top; padding-top: 2px; padding-bottom: 2px;" id="imObjectForm_1_7" name="imObjectForm_1_7" /></div>
</div>
</fieldset>
<fieldset>
<input type="text" id="imObjectForm_1_prot" name="imSpProt" />
</fieldset>
<div style="width: 365px; text-align: center;">
<input type="submit" value="Send" />
<input type="reset" value="Reset" />
</div>
</form>
<script>x5engine.boot.push('x5engine.imForm.initForm(\'#imObjectForm_1\', false, {type: \'tip\', showAll: true, classes: \'validator\', landingPage: \'index.html\', labelColor: \'#000000\', fieldColor: \'#000000\', selectedFieldColor: \'#000000\'})');</script>
</div></div>
</div>
<div style="float: left; width: 377px;">
<div style="height: 435px;"> </div>
</div>
</div>
<div style="width: 754px; float: left;">
<div style="height: 15px;"> </div>
</div>
<div id="imFooPad" style="height: 0px; float: left;"> </div><div id="imBtMn">Home Page | Features of footware | Download | Support | Contact Us | General Site Map</div>
<div class="imClear"></div>
</div>
<div id="imFooter">
<div onclick="x5engine.utils.location('copyright-notice.html'); return false;" style="position: absolute; top: 22px; left: 393px; width: 54px; height: 16px; cursor: pointer;"></div>
<div onclick="x5engine.utils.location('terms-and-conditions-of-use.html'); return false;" style="position: absolute; top: 22px; left: 468px; width: 113px; height: 16px; cursor: pointer;"></div>
<div onclick="x5engine.utils.location('privacy-policy.html'); return false;" style="position: absolute; top: 22px; left: 597px; width: 76px; height: 16px; cursor: pointer;"></div>
<div onclick="x5engine.utils.location('disclaimer.html'); return false;" style="position: absolute; top: 22px; left: 688px; width: 59px; height: 16px; cursor: pointer;"></div>
</div>
</div>
<span class="imHidden">Back to content | Back to main menu</span>
</body>
</html>
I emphasise that this is not my code.
I wonder if I need to get my friend to use a different setup on the website. Perhaps some PHP or whatever.
As always, any help gratefully received.
Alan ...
Sometimes the site you are sending post, do not accept "robots" doing this, like Facebook, for example.
Did you tried to send the post like this:
Dim sock As New HTTPSocket
Dim d As New Dictionary
dim r as string
d.Value("idA") = "xpto"
d.Value("idB") = "xzy"
d.Value("idC") = "abc"
sock.SetFormData(d)
r = sock.Post("imemail/imEmailForm_160xo79k.php", 30)
Is it possible to update the Facebook iframe height?
Here's the scenario. I have a Facebook app with PHP pages inside, but when I click the menu, it gets the previous iframe height and it doesn't automatically adjust the iframe height of the current content.
<link rel="stylesheet" href="" type="text/css" >
<style>
.nav li {
background-color: #fff;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #7b7b7b;
color:#7c7c7c;
}
li a {
text-decoration: none;
color: inherit;
}
.title {
margin:0px;
}
.navigation ul {
padding:0px;
margin:0px;
}
.logo {
margin-bottom: 10px;
padding-left: 10px;
}
.sidebar {
width:177px;
float:left;
margin-right:10px;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
background-color: #515151;
font-family: Century Gothic;
list-style: none outside none;
margin-bottom: 1px;
padding-bottom: 5px;
padding-left: 10px;
padding-top: 5px;
font-size:9pt;
border-left:6px solid #FAB101;
color:#fff;
}
.titlewrapper {
background-color: #FEFEFE;
border: 1px solid #B6CADC;
color: #BFBFBF;
font-size: 28pt;
margin-bottom: 5px;
padding: 5px 10px;
width: 768px;
}
</style>
<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function(){
FB.init({appId: 'APPID', status: true, cookie: true, xfbml: true});
FB.Canvas.setSize();
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; // all.js
document.getElementById('fb-root').appendChild(e);
setTimeout(sizeChangeCallback,5000);
}());
// Do things that will sometimes call sizeChangeCallback()
function sizeChangeCallback() {
FB.Canvas.setSize();
}
</script>
</head>
<body style="background-color:#e4e4e4;">
<div class="clearfix" style="width:1007px;margin:auto;">
<div id="tabs">
<div class="sidebar">
<div class="logo">
<img src="../images/gotodo_direct_logo.png">
</div>
<div class="navigation">
<ul class="nav">
<li id="tabs"><h3 class="title">Hotel Demo</h3><i>Indvidual hotel booking</i></li>
<li id="tabs"><h3 class="title">All Hotel List Demo</h3><i>all occupancy plus hotel partner</i></li>
<li id="tabs"><h3 class="title">Instruction</h3><i>how to install this app?</i></li>
<li id="tabs"><h3 class="title">Faq</h3> <i>frequently ask question</i></li>
</ul>
</div>
</div>
<div class="main-content" style="float:left;width:790px;height:1000px;">
<div id="tabs-1">
<div class="titlewrapper" style="float:left;"><div style="float:left"><img src="images/hotel.png" style="margin-right: 10px; vertical-align: middle;"></div><div style="float:left;width:700px;">Hotel Demo<br /><i style="font-size:10pt;">let's take a look a quick demo at how hotel app look like when you install it on your facebook fan page</i></div></div>
<div class="rooms" style="float:left;">
<?php include'../hotel.php';?>
</div>
</div>
</div>
</div>
</div>
</body>
and heres the link of my app.
It would be great if someone can help me with this.
I am developing a site(ww.xyz.com) in PHP and have successfully integrated the "Login with Facebook" button on the index page of this site. I have tested it and it is working fine.
This site apart from a "Login with Facebook" button also has it's own login form through which already registered users can login to this site. Once the user logs in through this login form(not login with Facebook option) a session is started and the user is taken to another page where his profile details(like first name, last name, email address etc.) are displayed.
Now with the "Login with Facebook" Button I want to do a similar functionality. Where once a user is authenticated via facebook account following two steps should happen.
Step 1. He or She should be taken to the same page to which users are taken to if they login via the website's own login form by openning an appropriate session. In this page the users data(like picture, firstname, lastname etc.) should be displayed.
Step
Step 2. Collect this data(picture, firstname, lastname etc.) sent by facebook connect and store it in my MYSQL Database.
For your refernce below is the code for the index.html page.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://www.facebook.com/2008/fbml">
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>XYZ Index</title>
<style type="text/css">
<!--
.ptour_crtbtn { BORDER-BOTTOM: #ccc 1px outset; MIN-WIDTH: 100px; TEXT-
ALIGN: center; BORDER-LEFT: #ccc 1px outset; PADDING-BOTTOM: 4px; PADDING-LEFT:
2px; PADDING-RIGHT: 2px; BACKGROUND: none transparent scroll repeat 0% 0%; COLOR:
#fff; BORDER-TOP: #ccc 1px outset; CURSOR: pointer; BORDER-RIGHT: #ccc 1px outset;
PADDING-TOP: 5px; -moz-border-radius: 7px; -webkit-border-radius: 7px
}
.style1 {color: #0000FF}
#content { BORDER-BOTTOM: #ccc 1px solid; BORDER-LEFT: #ccc 1px solid; PADDING-
BOTTOM: 12px; BACKGROUND-COLOR: #fff; MARGIN: 0px auto; PADDING-LEFT: 20px; WIDTH:
350px; PADDING-RIGHT: 20px; BORDER-TOP: #ccc 1px solid; BORDER-RIGHT: #ccc 1px solid;
PADDING-TOP: 20px; -moz-border-radius: 7px; -webkit-border-radius: 7px
}
.style3 {color: #0000FF; font-weight: bold; }
.style5 {
color: #0000FF;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.style7 {color: #0000FF; font-family: Geneva, Arial, Helvetica, sans-serif; }
.style8 {font-family: Geneva, Arial, Helvetica, sans-serif}
-->
</style>
</head>
<body>
<p><img src="./images/header.JPG" width="1266" height="127" alt="header" /></p>
<p> </p>
<p> </p>
<div id="content">
<h1 class="style1">Login Form:</h1>
<form method="post" action="Login.php">
<p>
<label style="DISPLAY: block"><span class="style3">Email:</span></label>
<input class="text"
name="username" />
</p>
<p>
<label style="DISPLAY: block"><span class="style3">Password:</span></label>
<input class="text"
type="password" name="password" />
'</p>
<p><a href="http://dl.dropbox.com/u/7106563/r-ednalan/login_form.html#">Forgot
password?</a></p>
<p>
<button class="ptour_crtbtn" name="login" type="submit"><span
class="style1"><strong>Talk</strong></span><strong>i</strong>n</button>
</p>
<pre><span class="style5">OR</span><span class="style8"><script
src="http://connect.facebook.net/en_US/all.js"></script><script>
FB.init({
appId:'XXXXX',
cookie:true,
status:true,
xfbml:true
});
</script></span>
<fb:login-button onlogin="alert('Authenticated!');"><div align="left">Login with
Facebook</div></fb:login-button></p>
</p>
</pre>
</form>
</body>
</html>
* {
margin: 0;
border: 0;
padding: 0;
}
html {
-webkit-text-size-adjust: none;
}
body {
background: #474747 url(bg.png);
}
h1 a {
display: block;
text-decoration: none;
font: 40px Helvetica, Arial, Sans-Serif;
letter-spacing: -5px;
text-align: center;
color: #a0a0a0;
text-shadow: 0px 5px 8px #2a2a2a;
}
h2 {
font: 30px Tahoma, Helvetica, Arial, Sans-Serif;
text-align: center;
color: #222;
text-shadow: 0px 2px 3px #555;
}
div#mobile pre {
width: 275px;
margin: 0 auto;
background: #222;
padding: 10px;
font-size: 20px;
color: #555;
text-shadow: 0px 2px 3px #171717;
-webkit-box-shadow: 0px 2px 3px #555;
-webkit-border-radius: 20px;
}
This is what I have so far on an iPhone-optimized version of my site. But when viewed from an iPhone/iPod touch, it looks well, except that there is excess space on the right. How can I fix this?
I think you have some tabs or spaces after your "labels". You should also have the text in label-elements.
What you might have:
<pre> <form method="post" action="/index.php">Enter a URL<br />(WITH THE http://): <br /><input type="text" name="url">
<br />Want a custom tag? <br /><input type="text" name="custom">
</form>
No URL was entered.</pre>
What you should have:
<form method="post" action="/index.php">
<label for="url">
Enter a URL (WITH THE http://):
</label>
<input type="text" name="url">
<label for="custom">
Want a custom tag?
</label>
<input type="text" name="custom">
</form>
<p>No URL was entered.</p>
Then you need to style it to make it look like before. Remember the pre-element is usually used to output code.