Thanks to you great people (Massive credit to angelwatt) I'm getting there on my first site and learning loads.
I'm using a slideshow (Google Ajax feed API) programmed into my (x)html. I've got the slideshow appearing in my page; it takes a little while to load (I'm guessing because it opens pics in 'picasa' then sends the feed to my site all done by javascript I think).
It would be great if I could figure out how to do my own (But I think this is beyond me right now, important thing to do is to get my site online build it's web presence and try to get myself some business of my own construction company).
At the moment the images are tiny, and I need them bigger; it looks like I can scale them in the self-explanatory scaling bit of options I guess http://www.google.com/uds/solutions/slideshow/reference.html but I'm not sure how to write it, I've tried various different combinations but yet no joy.
I would also like to disable the pause on hover; but I have tried this before and not managed to get it to work.
Any help is greatly appreciated: Here is my html:
Here is my CSS:
I'm using a slideshow (Google Ajax feed API) programmed into my (x)html. I've got the slideshow appearing in my page; it takes a little while to load (I'm guessing because it opens pics in 'picasa' then sends the feed to my site all done by javascript I think).
It would be great if I could figure out how to do my own (But I think this is beyond me right now, important thing to do is to get my site online build it's web presence and try to get myself some business of my own construction company).
At the moment the images are tiny, and I need them bigger; it looks like I can scale them in the self-explanatory scaling bit of options I guess http://www.google.com/uds/solutions/slideshow/reference.html but I'm not sure how to write it, I've tried various different combinations but yet no joy.
I would also like to disable the pause on hover; but I have tried this before and not managed to get it to work.
Any help is greatly appreciated: Here is my html:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<link rel='stylesheet' media="screen" type='text/css' href='layout2.css'>
<script src="http://www.google.com/jsapi"
type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
type="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="masterhead"></div>
<div id="navbar">
<ul>
<li>home</li>
<li>services</li>
<li>previous jobs</li>
<li>guarantee</li>
<li>contact us</li>
</ul>
<div class="spacer"></div>
</div>
<div class="spacer"></div>
<div id="page_content">
<div id="slideShow">RC Staircase Loading...</div>
<script type="text/javascript">
function LoadSlideShow() {
var feed = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5352451384466625153?alt=rss&kind=photo&hl=en_GB";
var options = {displayTime:2000, transistionTime:600, scaleImages:true};
var ss = new GFslideShow(feed, "slideShow", options);scaleImages : true,
5
}
/**
* Use google.load() to load the AJAX Feeds API
* Use google.setOnLoadCallback() to call LoadSlideShow once the page loads
*/
google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);
</script>
<h1>Here is my Header</h1>
<p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</div>
<div id="sidebar">
<ul>
<li>RC Staircases
<li>3 Flight Mirrored Concrete Staircase</li>
<li>Cast-in-situ Concrete Staircase</li>
<li>Concrete Staircase</li>
<li>2 Flight Staircase</li>
<li>Waterproof Concrete Basements
<li>Waterproof Concrete Basement</li>
<li>Caltite Basement</li>
<li>Concrete Structures
<li>Angle Formwork</li>
<li>Heat-Efficient Roof</li>
</ul>
</div>
<div class="spacer"</div>
<div class="footer">
<ul>
<li>Precise Formwork Limited</li>
<li>Office: 01708 736500</li>
<li>Mobile: 07590 657295</li>
<li>Email: email@preciseformwork.co.uk</li>
</ul>
</div>
</div>
</body>
</html>
HTML:
body {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
}
#container {
position:relative;
width:900px;
height:100%;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
border:0px;
background-color:#CCCCFF;
}
#masterhead {
background-image:url(Images/Graphics/logo_web.gif);
width:900px;
height:118px;
padding:0px 0px 0px 0px;
margin:0px;
}
#masterhead {
margin-left:auto;
margin-right:auto;
}
#navbar ul{
list-style:none;
font:1.5em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
margin:0px;
padding:0px;
padding-bottom:15px;
}
#navbar li {
display:inline;
width:150px;
padding:25px;
}
.spacer {
clear:both;
}
/* Slideshow */
#slideShow {
width : 160px;
height : 160px;
padding : 10px;
}
#sidebar ul {
list-style-type:none;
font:1em "Lucidia Grande", Lucida Sans Unicode, Verdana, sans-serif;
margin:0px;
padding:0px;
border:1px solid #000;
float:right;
}
#sidebar li {
background: #CCC;
width:200px;
padding-top:0.5em;
padding-bottom:0.5em;
padding-right:0.3em;
border-bottom:0.1em solid#666;
text-align:right;
}
#footer {
padding:0px;
margin:0px;
}
#page_content {
width:680px;
padding:0px;
float:left;
border:1px solid #000;
}