/    Sign up×
Community /Pin to ProfileBookmark

Problem in positioning a movie (‘swf’) in a html page at a particular place?

Copy linkTweet thisAlerts:
Jun 21.2008

Hi forum,
HI guy’s I am facing a problem in positioning of a “swf” in html page. I have a html page created, and want this movie to be played on a particular place. Please advice me how to position this movie with a particular x and y coordinates in html.
Please help me out. Here is the html code i am using but i dont know how to place X and Y cordinates to get the absolute position.

[code=html]<body>
<div class=”text”>this is a test</div>
<body style=”margin:0;padding:0″>
<object classid=”clsid:d27cdb6e-ae6d-11cf-96b8-444553540000″ codebase=”http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0″ width=”550″ height=”400″ id=”test” align=”middle”>
<param name=”allowScriptAccess” value=”sameDomain” />
<param name=”movie” value=”test.swf” />
<param name=”quality” value=”high” />
<param name=”bgcolor” value=”#000000″ />
<param name=”wmode” value=”transparent” />
<embed wmode=”transparent” src=”test.swf” quality=”high” bgcolor=”#000000″ width=”550″ height=”400″ name=”test” align=”middle” allowScriptAccess=”sameDomain” type=”application/x-shockwave-flash” pluginspage=”http://www.macromedia.com/go/getflashplayer” />
</object>
</div>
</body>[/code]

to post a comment
HTML

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Major_PayneJun 22.2008 — Can only have one body tag. Change <body style="margin:0;padding:0"> to <div style="position: absolute; top: YY%; left: XX%;">

Play with the XX and YY values until you have it positioned on page where you want it. If you don't like % (percents), use what you're comfortable with.

Ron
Copy linkTweet thisAlerts:
@donatelloJun 22.2008 — Put this in your stylesheet for a fixed DIV:

[CODE]#test{
position: fixed;
width:550;
height:400;
left: 1px;
top: 1px;
padding-left:0px;
background-color: #ffffff;
}
* html #test{ /*IE6 only rule, applied on top of the default above*/
position: absolute;

top: expression(document.compatMode=="CSS1Compat"? document.documentElement.scrollTop+1+"px" : body.scrollTop+1+"px");
width: 550px;
}[/CODE]
Copy linkTweet thisAlerts:
@nihalauthorJun 23.2008 — Thanks a lot for ur help..................i will try and let the forum know about the result.

thanks a lot.
Copy linkTweet thisAlerts:
@nihalauthorJun 29.2008 — thanks forum....thanks donatello...it worked thank you very much!
Copy linkTweet thisAlerts:
@mapmakerAug 25.2008 — I've been trying to get a .swf file placed on a page. I have it positioned where I need it using the pixel values. I have noticed that if I view it at a different resolution it is in a different location than I want. I'll post the code so you can see what I have.

Here is the html:
[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-2" />
<meta http-equiv="Content-Language" content="English" />
<meta name="Author" content="Luka Cvrk ([email protected])" />
<meta name="Robots" content="index,follow" />
<meta name="Description" content="Artificial Intelligence" />
<meta name="Keywords" content="artificial, intelligence" />
<link rel="stylesheet" type="text/css" href="index.css" />
<title>LSF Home</title>
</head>
<body onLoad="show_clock()">

<!--Here is code for a hidden website tracker-->

<div id="main">
<div id="logo">
<h1>Lutheran Student <span class="blue">Fellowship</span></h1>
</div>
<ul id="menu">
<li class="active"><span class="key">H</span>ome</li>
<li><a href="http://www.ku.edu/~lsfku/resources.html" accesskey="r"><span class="key">R</span>esources</a></li>
<li><a href="http://www.ku.edu/~lsfku/about.html" accesskey="f"><span class="key">A</span>bout us</a></li>
<li><a href="http://www.ku.edu/~lsfku/goals.html" accesskey="p"><span class="key">G</span>oals</a></li>
<!--<li><a href="#" accesskey="o"><span class="key">M</span>embers</a></li>-->
<li><a href="http://www.ku.edu/~lsfku/contact.html" accesskey="m"><span class="key">C</span>ontact</a></li>
<li><a href="http://www.facebook.com/home.php#/group.php?gid=25424815608" target="_blank" accesskey="z"><span class="key">F</span>acebook</a></li>
<li><a href="http://maps.google.com/maps/ms?f=q&hl=en&geocode=&time=&date=&ttype=&ie=UTF8&msa=0&msid=117660852083882535868.00044090dbd2da9181cc5&ll=38.956928,-95.260515&spn=0.007075,0.016844&z=17&om=1" target="_blank" accesskey="f"><span class="key">M</span>ap</a></li>
</ul>

<div id="intro_left">
<p>"For I know the plans I have for you," declares the Lord, "plans to prosper you and not harm you, plans to give you hope and a future."

Jeremiah 29: 11</p>
</div>

<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="242" height="199">
<param name="movie" value="lsfchurch.swf">
<param name="quality" value="high">
<param name="bgcolor" value="#FFFFFF">
<embed name="lsfchurch" src="lsfchurch.swf" width="242" height="199" quality="high" bgcolor="#FFFFFF" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
</object>
</div>

<div id="intro_right">
<p class="white">Immanuel Lutheran Church and University Student Center </p>
<h1>Welcome Students! </h1>
<p><span align="left"> School is here! New faces, new places. We hope to be a part of your college life. God Bless! - Lutheran Student Fellowship </span></p>
</div>

<ul id="menu_left">
<li><a href="http://www.cph.org/cphstore/pages/forms/portals.asp" accesskey="m">Daily Devotion </a></li>
<!--<li><a href="http://www.ku.edu/~lsfku/test.html/" accesskey="s">Pastors</a></li>-->
<li><a href="https://ilcusc.ctsmemberconnect.net/home-ctrl.do" accesskey="n">Immanuel Lutheran Church Website</a></li>
</ul>

<div id="left">
<div class="box">
<h2>Calendar </h2>
<script language="javascript" src="liveclock.js">

/*
Live Clock Script-
By Mark Plachetta ([email protected]©) based on code from DynamicDrive.com
For full source code, 100's more DHTML scripts, and Terms Of Use,
visit http://www.dynamicdrive.com
*/

</script>


<p><b><a href="#">21st September</a> &middot; Family Weekend</b><br/> You are invited to bring your family to worship. Join us after the late service for lunch with the congregation.</p>

<p><b><a href="#">27th February - 1 March 2009</a> &middot; LSF Region 5 Regional Retreat</b><br />Location: Living Water Ranch in Olsburg, Kansas<br> More information to follow...<p></p>

</div>

</div>

<div id="right">
<div class="leftcol">
<h3><b><a href="http://www.onewaycaravan.com/">One Way Caravan</a></b></h3>
<p><img src="images/owcthumb.jpg" alt="Image" class="image" />LSF is pleased to present One Way Caravan at its annual student BBQ. Adam Trotter and Kevin Schulte know there is only one way to bring you their original acoustic and harmonic blend of music, like a caravan, a wave of authentic sound, lyrics and song brought together for a common passion to praise Jesus Christ. Adam and Kevin are One Way Caravan, a Contemporary Christian Acoustic Rock group from Saint Louis, Missouri. The duo has played together for over six years. They began their unique sound as college roommates at Rockhurst University in Kansas City, Missouri. </p>
</div>

<div class="rightcol">
<h3>Worship</h3>
<p><img src="images/Worship.jpg" alt="Image" class="image" />We would love to have you worship with us! We have two services every Sunday. A traditional service is held at 8:30 A.M. and a contemporary service is at 11 A.M. Bible study is held between services at 9:45 A.M.</p>

<h3>Weekly Events </h3>
<p><img src="images/studentministrythumb.jpg" alt="Image" class="image" />Keep coming every Thursday during the school year for a free homecooked meal and a short devotional study. We meet in the lower level of the church at 5:30 P.M.</p>
</div>

<div class="special">
<b><p>Immanuel Lutheran Church and University Student Center Mission Statement:</p></b>
<p>To bring people into a living relationship with God through Jesus Christ by meaningful worship, prayer, the study of His Word, loving care for one another, and the committed use of each person's gifts. Matthew 28:18-20
</div>
</div>

<div id="footer">
<p>&copy; Copyright <a href="#">Modern Church </a> 2006 &middot; Design: <a href="http://www.solucija.com/" title="Information Architecture and Web Design">Luka Cvrk</a> &middot; <a href="http://validator.w3.org/check?uri=referer" title="Validate">XHTML</a> and <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Validate">CSS</a> valid More <a href="http://www.keenwebtemplates.net/files/ZenCart-templates.php">Zen Cart templates</a> on KeenWebTemplates.net, more <a href="http://www.magictemplate.com/files/christian-church-website-templates.php">Christian Flash templates</a> on MagicTemplate.com</p>
</div>
<div id="footer2">
<p>Student Ministry picture courtesy of<a href="http://www.newsletternewsletter.com"> Newsletternewsletter.com</a>


</div>

</div>


</body>
</html>[/CODE]
Copy linkTweet thisAlerts:
@mapmakerAug 25.2008 — Here is the CSS:
[CODE]/*

template: Artificial Intelligence
author: luka cvrk (www.solucija.com)

*/

body {
margin: 0;
padding: 0;
background: #fff url(images/bg.gif) repeat-x;
font: normal .7em Tahoma, Verdana, Arial, Helvetica, Sans-Serif;
line-height: 1.6em;
color: #333;
}

/* LINKS AND HEADINGS STYLING */

a { color: #546F92; background: inherit; }
a:hover { color: #808080; background: inherit; }
h1 { font: bold 2em "Trebuchet MS", Helvetica, Sans-Serif; margin: 0; color: #fff; background-color:transparent; }
h2 { font: bold 1.4em "Trebuchet MS", Helvetica, Sans-Serif; margin: 10px 0px 0 0}
h3 { clear: both; font-size: 1.1em; color: #000; background: #fff url(images/h3bg.gif) no-repeat center left; padding: 0 14px; margin: 0;}
.blue { color: #546F92; background: inherit; }
.image { float: left; border: 2px solid #e2e2e2; padding: 3px; margin: 0 15px 10px 0; }

/* CONTENT WRAPPER */

#main {
width: 900px;
margin: 25px auto 0 auto;
}

/* TOP LEFT LOGO */

#logo {
float: left;
padding: 10px 0 10px 10px;
}
#logo h1 { color: #000; background: #fff; }

#flash {
position: absolute; top: 74px; left: 1032px;

}

/* TOP RIGHT HORIZONTAL MENU */

#menu {
float: right;
background: #fff url(images/barul.gif) no-repeat bottom right;
color: #808080;
padding: 18px 1px 11px 0;
margin: 0;
}
#menu li {
padding: 14px 18px 14px 18px;
color: #444;
background: #fff url(images/bar.gif) no-repeat bottom left;
display: inline;
}
#menu li.active {
background: #fff url(images/baractive.gif) no-repeat bottom left;
color: #8D9CAF;
font-weight: bold;
padding: 14px 18px 14px 18px;
margin: 0 1px 0 0;
}
#menu li a {
background: #f8f8f8;
color: #808080;
text-decoration: none;
}
#menu li a:hover {
color: #000;
background: #f8f8f8;
}
.key { text-decoration: underline; } /* ACCESKEY UNDERLINED LETTER */

/* LEFT INTRO SIDE */

#intro_left {
clear: left;
float: left;
width: 250px;
background: #8D9CAF url(images/leftintrobg.gif) repeat-x;
color: #E5EAF2;
margin: 0 0 1px 0;
}
#intro_left a { color: #fff; background: inherit; }
#intro_left p { padding: 14px 15px; margin: 0; }

/* LEFT VERTICAL MENU */

#menu_left {
float: left;
margin: 0 0 6px 0;
padding: 0 0 1px 0;
border-bottom: 2px solid #e2e2e2;
}
#menu_left li { list-style: none; }
#menu_left li a {
display: block;
color: #3F5B7F;
background: #C2CEde url(images/arrow.gif) no-repeat center left;
width: 204px;
padding: 7px 23px 7px 23px;
margin: 0 0 1px 0;
font-weight: bold;
text-decoration: none;
}
#menu_left li a:hover { <!--background: #9EB1C9 url(images/arrow.gif) no-repeat center left; color: #fff;--> }

/* RIGHT INTRO SIDE */

#intro_right {
float: right;
width: 340px;
padding: 25px 280px 0 20px;
color: #547592;
margin: 0 0 0 0;
height: 174px;
border: 2px solid #e2e2e2;
background-color: #BCCEDA;
background-image: url(images/lsfchurch.jpg);
background-repeat: no-repeat;
background-position: right center;
}
#intro_right h1 { margin: 0 0 20px 0; }
#intro_right .white { color: #FFF; background-color:transparent; }

/* LEFT SIDE */

#left {
float: left;
width: 250px;
}
.box {
padding: 0px 15px;
border: 1px solid #ccc;
margin: 0 0 10px 0;
line-height: 12pt
}
.note {
padding: 0px 0px 0px 0px;
border: 1px solid #ccc;
margin: 0 0 0px 0;
<!--background: #FFFFAD--> url(images/package.gif) no-repeat;
color: #585616;
}

/* RIGHT SIDE */

#right {
float: right;
width: 643px;
}
.leftcol {
float: left;
padding: 12px 15px;
width: 285px;
border:#ccc 1px solid;
text-align: justify;
margin: 5px 0 10px 0;
line-height: 12pt
}
.rightcol {
float: right;
padding: 10px 15px;
width: 285px;
border:#ccc 1px solid;
margin: 5px 0 10px 0;
line-height: 12pt
}
.special {
clear: both;
margin:0px 0 20px 0;
padding: 15px 20px; 0px; 0px
width: 900px;
border: 1px solid #ccc;
background: #eee;
color: #444;
line-height: 12pt
}

/* FOOTER */

#footer { clear: both; padding: 5px; border-top: 1px solid #ccc; }
#footer2 { clear: both; padding: -50px; text-align: center;line-height: 10pt; }
[/CODE]
Copy linkTweet thisAlerts:
@mapmakerAug 25.2008 — http://groups.ku.edu/~lsfku/about.html

This page shows how the page should look with the image of the church replaced with the .swf file.

Let me know if you need any additional information. I'm pretty new to html so any help is appreciated.

Thanks in advance!
×

Success!

Help @nihal spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.8,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...