After cleaning up my pages a few bugs disappeared, well impressed with those validator tools. The only problem i feel i have at this stage now is, the more text i add in the paragraphs under each gallery item it pushes the thumbnail below it down the page. Should the overflow: scroll deal with this?
Thanks in advance.
Daz
HTML for my thumbnail test page.
<!DOCTYPE html>
<html lang="en">
<head>
<title> Fitted Kitchen Specialist </title>
<meta charset="utf-8" />
<link href="kitchen1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="header">
<div id="sitebranding">
<h1> FittedkitchenSpecialist.com</h1>
</div>
<!--end of sitebranding div-->
<div id="tagline">
<p> Fitted kitchen specialist in the Nottingham area. </p>
</div>
<!--end of tagline div-->
</div>
<!--end of header div-->
<div id="navigation">
<ul>
<li><a href="kitchen.html">Home</a></li>
<li><a href="kitchen%20about.html">About</a></li>
<li><a href="Kitchen%20gallery.html">Image Gallery</a></li>
<li><a href="Kitchen%20thumbs.html">Thumbs Gallery</a></li>
<li><a href="Kitchen%20test.html">Test</a></li>
<li><a href="kitchen%20contact.html">Contact</a></li>
<li><a href="Kitchen%20quotes.html">Words On Life</a></li>
</ul>
</div>
<!-- end of navigation div -->
<div class="container">
<h2>Welcome to my virtual showroom</h2>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
<h3>Avant Alabaster</h3>
<p>High gloss vinyl 18mm MDF.</p>
</div>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Ebony%20tundra.jpg">"><img src="kitchen%20thumbs/Avant%20Ebony%20tundra%20Small.jpg" alt="High gloss door in Ebony colour."/></a>
<h3>Avant Ebony</h3>
<p>High gloss vinyl 18mm MDF.</p>
</div>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Ebony%20tundra.jpg">"><img src="kitchen%20thumbs/Avant%20Ebony%20tundra%20Small.jpg" alt="High gloss door in Ebony colour."/></a>
<h3>Avant Ebony</h3>
<p>High gloss vinyl 18mm MDF..</p>
</div>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
<h3>Avant Alabaster</h3>
<p>High gloss vinyl 18mm MDF.</p>
</div>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
<h3>Avant Alabaster</h3>
<p>High gloss vinyl 18mm MDF.</p>
</div>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
<h3>Avant Alabaster</h3>
<p>High gloss vinyl 18mm MDF.</p>
</div>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
<h3>Avant Alabaster</h3>
<p>High gloss vinyl 18mm MDF.</p>
</div>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
<h3>Avant Alabaster</h3>
<p>High gloss vinyl 18mm MDF.</p>
</div>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
<h3>Avant Alabaster</h3>
<p>High gloss vinyl 18mm MDF.</p>
</div>
<div class="galleryItem">
<a href="kitchen%20thumbs/Avant%20Alabaster.jpg">"><img src="kitchen%20thumbs/Avant%20Alabaster%20Small.jpg" alt="High gloss door in Alabaster colour."/></a>
<h3>Avant Alabaster</h3>
<p>High gloss vinyl 18mm MDF.</p>
</div>
<!--end of gallery item div-->
</div>
<!--end of container div-->
</body>
</html>
CSS:
body {
font-family: Verdana, Helvetica, Arial, sans-serif;
background-color: #E4EEFF;
line-height: 125%;
padding: 0;
border: 0;
}
h1,
h2,
h3 {
font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;
}
h1 {
font-size: x-large;
background-color: #6d92d8;
color: white;
font-weight: bold;
padding-top: 2em;
padding-bottom: .9em;
padding-left: .4em;
margin: 0;
background: #6d92d8 url(backgrounds/worktop-small.jpg) repeat-y right;
}
h2 {
color: navy;
font-size: 130%;
font-weight: normal;
padding-top: 15px;
}
li {
font-size: small;
list-style-type: square;
}
/* circle, disc, square and none options,
read CSS anthology by Rachael Andrew for more detail on button styling*/
p {
font-size: small;
color: navy;
}
/* Hashtag denotes an ID */
#tagline P {
font-style: italic;
font-family: Georgia, Times, serif;
background-color: #bed8f3;
border-top: 3px solid #7da5d8;
border-bottom: 3px solid #7da5d8;
padding-top: .2em;
padding-bottom: .4em;
padding-left: .8em;
margin: 0;
background: #bed8f3 url(backgrounds/tagline-fade.jpg) repeat-y right;
}
#navigation {
width: 180px;
height: 484px;
background: #7da5d8 url(backgrounds/drawer2.jpg) no-repeat;
/*must use backgrounds as source folder*/
background-color: #bed8f3;
color: #6d92d8;
/* colours bullet points only as visited/hover/active are controlled lower down*/
}
#header {
border-top: 3px solid #7da5d8;
}
em {
text-transform: uppercase;
}
a {
font-weight: bolder;
color: black;
}
a:link {
color: orange;
/* colours email address only*/
}
a:visited {
color: white;
}
a:hover {
text-decoration: none;
color: white;
background-color: navy;
}
a:active {
color: green;
background-color: navy;
}
.fun {
color: #339999;
font-family: Georgia, Times, serif;
letter-spacing: 0.05em;
}
.fun p {
color: green;
}
cite {
color: navy;
font-weight: bold;
}
h2,
ul {
margin-top: 15px;
}
/*This section deals with the position of items on the screen.
It uses absolute positioning - fixed x and y coordinates measured
from the top-left corner of the browser's content display.*/
#navigation,
#bodycontent,
#header {
position: absolute;
}
#navigation,
#bodycontent {
top: 115px;
/* 104% will show border across top of navigation box 101% will merge*/
}
#bodycontent {
left: 200px;
}
#header,
#tagline {
width: 100%;
}
/*#navigation {
position: relative;
left: 1300px;
}
An example of how to move navigation across to right*/
.feature {
float: right;
margin: 10px;
}
.galleryphoto img {
border: 15px solid white;
}
.galleryphoto p {
font-size: 65%;
font-weight: bold;
margin-top: 0;
width: 430px;
line-height: 1.4em;
}
.galleryphoto p span {
font-weight: normal;
color: gray;
}
/*Alternative to the above
.photocredit {
font-weight: normal;
color: gray;
}*/
.galleryphoto {
padding-bottom: 10px;
border-bottom: 1px solid navy;
margin-bottom: 10px;
}
/* test for thumbnails gallery*/
.container {
position: absolute;
width: 80%;
margin: 150px;
overflow: auto;
float: right;
}
.container {
left: 80px;
}
.galleryItem {
color: grey;
font: 10px/1.5 Verdana, Helvetica, sans-serif;
float: left;
width: 16%;
margin: 2% 2% 50px 2%;
}
.galleryItem h3 {
text-transform: uppercase;
text-align: center;
}
.galleryItem img {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
max-width: 100%;
}
.galleryItem p {
text-align: left;
}
/*.galleryItem
border: 5px solid white;
*/
/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
.galleryItem {width: 21%;}
}
@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
.galleryItem {width: 29.33333%;}
}
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
.galleryItem {width: 46%;}
}
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
.galleryItem {width: 96%;}
.galleryItem img {width: 96%;}
.galleryItem h3 {font-size: 18px;}
.galleryItem p {font-size: 18px;}
}