`mishimasan`
08-12-2008, 03:35 PM
Hello all. I have a simple php animated slideshow plugin that I want to install on my homepage. For anyone with the same plugin, it's called "Frontpage Slideshow" by Joomlaworks.gr.
I have made the page to how I want it to look using strict XHTML and CSS. Now I place the php script into the homepage, and when I save and refresh my browser the background image disappears and moreover, the slideshow does not appear (I made sure I used the correct version for my page and followed all the instructions in the readme.txt to configure it correctly)
I am running this web page locally, with a recent release of Apache server.
If someone could help, I would like to know why,
The background disappears
The slideshow does not appear
Here is the HTML with the PHP script contained:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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=utf-8" />
<title>easidesigns.co.uk - ignite your brand.</title>
<link rel="stylesheet" type="text/css" media="all" href="easidesigns.css" />
</head>
<body style="background-color:#530104; background-image:url(images/background2.jpg); background-position: top; background-repeat:repeat-y; padding-top:2em;">
<div id="masthead">
<a href="#" id="homelink"><img src="images/easidesigns-logo-slogan-2008.png" /></a>
<div id="navbar">
<ol id="navbarlist">
<li class="first"><a href="#">about us</a></li>
<li><a href="#">news</a></li>
<li class="last"><a href="#">contact us</a></li>
</ol>
</div>
<div id="navbar2">
<ol id="navbarlist2">
<li class="first"><a href="#">brand design</a></li>
<li>Promotion</li>
<li>Stationery</li>
<li>Print</li>
<li class="last">Photography</li>
</ol>
</div>
</div>
<div id="slideshow">
</div>
<div id="container">
<?php
// START of "Frontpage Slideshow" settings
$nameOfSlideshowToDisplay = "myslideshow"; // Enter the name of your slideshow. Slideshows are in folders inside /fpss/slideshows/.
$URLofyoursite = "file:///c:/xampp/htdocs/easidesigns/"; // Enter your site's URL.
$AbsoluteServerPathofyoursite = "/xampp/htdocs"; // Enter the root path of your site on the server.
// do not edit below this line
include_once($AbsoluteServerPathofyoursite."/fpss/mod_fpslideshow.php");
// END of "Frontpage Slideshow" settings
?>
<h1>
Article Title Goes Here
</h1>
<p>Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. <img src="images/teapot.jpg" />Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container.Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container.</p>
</div>
<div id="footer">
<ol id="footerlist">
<li class="first"><a href="#">copyright notice</a></li>
<li><a href="#">affiliates</a></li>
<li class="last"><a href="#">subscribe</a></li>
<li class="message">This site is best viewed in Mozilla Firefox 3</li>
</ol>
</div>
</body>
</html>
Here is the CSS code:
body { width:800px; margin:auto; }
#masthead { display:inline-block; width:800px; }
#homelink { float:left; padding-left:1em; margin-bottom:1.8em; }
#navbar { float:right; width:18em; margin-top:4.5em; margin-left:-18em; } /* negative margin pushes element together with previous element */
#navbar a { text-decoration:none; color:#4F4F4F; }
#navbar li { display:inline; margin-left:0.5em; padding-left:0.7em; border-left:1px solid #99C; }
#navbar li.first { border-left:0; }
#navbar li.last { padding-right:0; }
#navbar2 { padding-bottom:0.5em; clear:both; float:left; width:800px; height:27px; background-image:url(images/navbar2.jpg); background-repeat:no-repeat; }
#navbar2 li { display:none; padding-left:1em; }
#slideshow { width:800px; height:350px; background-color:black; }
#container { padding:2em; }
#container h1 { margin-bottom:1.3em; font-size:large; color:#4F4F4F; }
#container img { padding:1em; padding-left:0; float:left; }
#container p { margin-bottom:4em; }
#footer { clear:both; padding:0.7em 0.7em 0.7em 1em; list-style:none; }
#footer a { text-decoration:none; color:#4F4F4F; }
#footerlist li { display:inline; margin-right:0.5em; padding-right:0.75em; border-right:1px solid #99C; }
#footerlist li.last { border-right:none; }
#footerlist li.message { padding-left:22em; padding-right:0; border-right:0; }
Much appreciated,
`MishimaSan`
I have made the page to how I want it to look using strict XHTML and CSS. Now I place the php script into the homepage, and when I save and refresh my browser the background image disappears and moreover, the slideshow does not appear (I made sure I used the correct version for my page and followed all the instructions in the readme.txt to configure it correctly)
I am running this web page locally, with a recent release of Apache server.
If someone could help, I would like to know why,
The background disappears
The slideshow does not appear
Here is the HTML with the PHP script contained:
<?xml version="1.0" encoding="iso-8859-1"?>
<!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=utf-8" />
<title>easidesigns.co.uk - ignite your brand.</title>
<link rel="stylesheet" type="text/css" media="all" href="easidesigns.css" />
</head>
<body style="background-color:#530104; background-image:url(images/background2.jpg); background-position: top; background-repeat:repeat-y; padding-top:2em;">
<div id="masthead">
<a href="#" id="homelink"><img src="images/easidesigns-logo-slogan-2008.png" /></a>
<div id="navbar">
<ol id="navbarlist">
<li class="first"><a href="#">about us</a></li>
<li><a href="#">news</a></li>
<li class="last"><a href="#">contact us</a></li>
</ol>
</div>
<div id="navbar2">
<ol id="navbarlist2">
<li class="first"><a href="#">brand design</a></li>
<li>Promotion</li>
<li>Stationery</li>
<li>Print</li>
<li class="last">Photography</li>
</ol>
</div>
</div>
<div id="slideshow">
</div>
<div id="container">
<?php
// START of "Frontpage Slideshow" settings
$nameOfSlideshowToDisplay = "myslideshow"; // Enter the name of your slideshow. Slideshows are in folders inside /fpss/slideshows/.
$URLofyoursite = "file:///c:/xampp/htdocs/easidesigns/"; // Enter your site's URL.
$AbsoluteServerPathofyoursite = "/xampp/htdocs"; // Enter the root path of your site on the server.
// do not edit below this line
include_once($AbsoluteServerPathofyoursite."/fpss/mod_fpslideshow.php");
// END of "Frontpage Slideshow" settings
?>
<h1>
Article Title Goes Here
</h1>
<p>Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. <img src="images/teapot.jpg" />Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container.Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container. Hello all, this is a quick message to highlight this container.</p>
</div>
<div id="footer">
<ol id="footerlist">
<li class="first"><a href="#">copyright notice</a></li>
<li><a href="#">affiliates</a></li>
<li class="last"><a href="#">subscribe</a></li>
<li class="message">This site is best viewed in Mozilla Firefox 3</li>
</ol>
</div>
</body>
</html>
Here is the CSS code:
body { width:800px; margin:auto; }
#masthead { display:inline-block; width:800px; }
#homelink { float:left; padding-left:1em; margin-bottom:1.8em; }
#navbar { float:right; width:18em; margin-top:4.5em; margin-left:-18em; } /* negative margin pushes element together with previous element */
#navbar a { text-decoration:none; color:#4F4F4F; }
#navbar li { display:inline; margin-left:0.5em; padding-left:0.7em; border-left:1px solid #99C; }
#navbar li.first { border-left:0; }
#navbar li.last { padding-right:0; }
#navbar2 { padding-bottom:0.5em; clear:both; float:left; width:800px; height:27px; background-image:url(images/navbar2.jpg); background-repeat:no-repeat; }
#navbar2 li { display:none; padding-left:1em; }
#slideshow { width:800px; height:350px; background-color:black; }
#container { padding:2em; }
#container h1 { margin-bottom:1.3em; font-size:large; color:#4F4F4F; }
#container img { padding:1em; padding-left:0; float:left; }
#container p { margin-bottom:4em; }
#footer { clear:both; padding:0.7em 0.7em 0.7em 1em; list-style:none; }
#footer a { text-decoration:none; color:#4F4F4F; }
#footerlist li { display:inline; margin-right:0.5em; padding-right:0.75em; border-right:1px solid #99C; }
#footerlist li.last { border-right:none; }
#footerlist li.message { padding-left:22em; padding-right:0; border-right:0; }
Much appreciated,
`MishimaSan`