Topic: Adding margin to boxed tiltviewer
Using the boxed.html page included with the PRO version as a template, I've constructed a Tiltviewer display page that functions as designed. In order to align the Tiltviewer with the header graphic above it in my over/under frameset, I need a left margin of 37px. I've tried several methods to add this margin but nothing seems to work (i.e. posleft, margin, padding tags). I even tried to insert a 37px image and <span> the <div> container to space the Tiltviewer but to no avail.
Below is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<LINK REL=STYLESHEET HREF="styles.css" TYPE="text/css">
<title>Color Fusion Gallery</title>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
/* hide from ie on mac \*/
//used for object detection browser compatibility
if (!document.getElementById) { if (document.all) { document.getElementById = function (id) { return document.all[id]; } } else { document.getElementById = function (id) { return document.layers[id]; } } }
body {
background-color: #000000;
font: .8em/1.3em verdana,arial,helvetica,sans-serif;
width: 923px;
margin: 37; <--tried these independently
padding: 37; <--tried these independently
}
#flashcontent {
width: 100%;
height: 640px;
border: thin #999999 solid;
posleft: 37px; <--tried these independently
}
</style>
</head>
<body>
<img src="imgs/tiltspacer.jpg" alt="" width="37" height="5" /> <--tried these independently
<div id="flashcontent">TiltViewer requires JavaScript and the latest Flash player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a></div>
<p><script type="text/javascript">
var fo = new SWFObject("TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#FFFFFF");
// TILTVIEWER CONFIGURATION OPTIONS
// To use an option, uncomment it by removing the "//" at the start of the line
// For a description of config options, go to:
// http://www.airtightinteractive.com/proj … tions.html
//FLICKR GALLERY OPTIONS
// To use images from Flickr, uncomment this block
//fo.addVariable("useFlickr", "true");
//fo.addVariable("user_id", "48508968@N00");
//fo.addVariable("tags", "jump,smile");
//fo.addVariable("tag_mode", "all");
//fo.addVariable("showTakenByText", "true");
// XML GALLERY OPTIONS
// To use local images defined in an XML document, use this block
fo.addVariable("useFlickr", "false");
fo.addVariable("xmlURL", "gallery.xml");
fo.addVariable("maxJPGSize","800");
//GENERAL OPTIONS
fo.addVariable("useReloadButton", "false");
fo.addVariable("columns", "4");
fo.addVariable("rows", "3");
fo.addVariable("bkgndInnerColor", "0x000000");
fo.addVariable("bkgndOuterColor", "0x000000");
fo.addVariable("frameColor", "0xFFFFFF");
fo.addVariable("navButtonColor", "0x000000");
//fo.addVariable("showFlipButton", "true");
//fo.addVariable("showLinkButton", "true");
//fo.addVariable("linkLabel", "Contact Us");
fo.addVariable("backColor", "0xcccccc");
//fo.addVariable("langGoFull", "Go Fullscreen");
//fo.addVariable("langExitFull", "Exit Fullscreen");
//fo.addVariable("langAbout", "About");
//PRO OPTIONS
//fo.addVariable("bkgndTransparent", "true");
//fo.addVariable("showFullscreenOption", "false");
fo.addVariable("frameWidth", "5");
fo.addVariable("zoomedInDistance", "1400");
fo.addVariable("zoomedOutDistance", "4000");
//fo.addVariable("fontName", "Times");
fo.addVariable("titleFontSize", "60");
//fo.addVariable("descriptionFontSize", "32");
//fo.addVariable("linkFontSize", "41");
//fo.addVariable("linkTarget", "_self");
//fo.addVariable("flipButtonColor", "0x0000FF");
//fo.addVariable("textColor", "0xFFFFFF");
//fo.addVariable("linkTextColor", "0x000000");
//fo.addVariable("linkBkgndColor", "0xFFFFFF");
fo.addVariable("enableSounds", "false");
fo.addVariable("tiltAmountIn", "0");
fo.addVariable("tiltAmountOut", "0");
fo.addVariable("navButtonColor", "0x333333");
// END TILTVIEWER CONFIGURATION OPTIONS
fo.addParam("allowFullScreen","true");
fo.write("flashcontent");
</script></p>
</script>
<img src="imgs/tiltspacer.jpg" alt="" width="37" height="5" />
<h6>Copyright (c) Galleria Marconi 2009</h6>
</body>
</html>
Any Ideas?
Thanks in advance.