I've got two issues:
Another silly layout question
:
I'm referring to picture attached the padding between the top of the image and the black border line of the page_content.
I'm setting up my gallery page which at the moment has 3 'slideshows' classed as <div> with the neccessary java text under my gallery html.
There is my first external css sheet which is called layout.css (placed at top so lowest priority) then bottom I have gallery.css which is specifically for the layout of my gallery slideshows. In short I don't know why padding is occuring top of the slideshows and between border line of page_content. I have used the developer toolbar and the actual img of the slideshow comes up different but no mention of this in css. Sorry if this is hard to understand.
Also the next thing I want to do is have some text directly underneath the slideshows as a brief description of each slideshow (e.g. Peri Construction system used at Heat-Efficient Roofing 'Bubbledeck System'. I have tried entering a paragraph of text but it just places it behind the slideshow (obviously no good as cannot see it). I'm going to have about 20 of these on the page; so it's important that I learn how the layout works. These slideshows will perform the link (hopefully) then I will have loads of pictures on each project in the form of a lightbox gallery.
Any input appreciated.
Here is my html for gallery.html:
Css for gallery.css:
Css for layout.css:
Another silly layout question
: I'm referring to picture attached the padding between the top of the image and the black border line of the page_content.
I'm setting up my gallery page which at the moment has 3 'slideshows' classed as <div> with the neccessary java text under my gallery html.
There is my first external css sheet which is called layout.css (placed at top so lowest priority) then bottom I have gallery.css which is specifically for the layout of my gallery slideshows. In short I don't know why padding is occuring top of the slideshows and between border line of page_content. I have used the developer toolbar and the actual img of the slideshow comes up different but no mention of this in css
. Sorry if this is hard to understand.Also the next thing I want to do is have some text directly underneath the slideshows as a brief description of each slideshow (e.g. Peri Construction system used at Heat-Efficient Roofing 'Bubbledeck System'. I have tried entering a paragraph of text but it just places it behind the slideshow (obviously no good as cannot see it). I'm going to have about 20 of these on the page; so it's important that I learn how the layout works. These slideshows will perform the link (hopefully
) then I will have loads of pictures on each project in the form of a lightbox gallery.Any input appreciated
.Here is my html for gallery.html:
HTML:
<!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>
<link rel='stylesheet' media="screen" type='text/css' href='layout.css' />
<title></title>
<link rel='stylesheet' media="screen" type='text/css' href='gallery.css' />
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
<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>
<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>
<div class="spacer"></div>
<div id="page_content">
<div id="slideShow1">Welwyn Garden City Loading...
<script type="text/javascript">
//<![CDATA[
function LoadSlideShow() {
var feed = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373904009294790593?alt=rss&kind=photo&hl=en_GB";
var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
var ss = new GFslideShow(feed, "slideShow1", options);scaleImages :true;}
/**
* 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>
</div>
<div id="slideShow2">Bubbledeck Loading...
<script type="text/javascript">
//<![CDATA[
function LoadSlideShow() {
var feed = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373908300495958129?alt=rss&kind=photo&hl=en_GB";
var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
var ss = new GFslideShow(feed, "slideShow2", options);scaleImages :true;}
google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);
//]]>
</script>
</div>
<div id="slideShow3">Two Flight Staircase Loading...
<script type="text/javascript">
//<![CDATA[
function LoadSlideShow() {
var feed = "http://picasaweb.google.com/data/feed/base/user/preciseformworklimited/albumid/5373929580803791473?alt=rss&kind=photo&hl=en_GB";
var options = {displayTime:2000, transistionTime:600, scaleImages:true, pauseOnHover:false};
var ss = new GFslideShow(feed, "slideShow3", options);scaleImages :true;}
google.load("feeds", "1");
google.setOnLoadCallback(LoadSlideShow);
//]]>
</script>
</div>
<div class="spacer"></div>
</div>
<div id="sidebar">
<ul>
<li>RC Staircases
<li>3 Flight Mirror Concrete Staircase</li>
<li>Cast-in-situ Concrete Staircase</li>
<li>Concrete Staircase</li>
<li>2 Flight Staircase</li>
<li>Gutter Staircase</li>
<li>Concrete Frames</li>
<li>Caltite Basement</li>
<li>Waterproof Concrete Basement</li>
<li>Angle Formwork</li>
<li>Heat-Efficient Roof</li>
</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>Css for gallery.css:
HTML:
#slideShow1 {
width:220px;
height:170px;
padding:0px;
margin:0px;
float:left;
}
#slideShow2 {
width: 220px;
height: 170px;
padding-left:10px;
padding-right:10px;
padding-top:0px;
margin:0px;
float:left;
}
#slideShow3 {
width:220px;
height:170px;
clear:none;
float:left;
margin:0px;
padding:0px;
}
.clearboth {
clear:both;
}Css for layout.css:
HTML:
body {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
background-color:#FEFFD9;
}
#container {
position:relative;
width:900px;
height:100%;
margin:0px;
padding:0px;
margin-left:auto;
margin-right:auto;
border:0px;
background-color:#FEFFD9;
}
#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 : 510px;
height : 300px;
padding : 5px;
margin-left: 80px;
margin-top: 10px;
border: 2px solid #CCC;
}
#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;
}
