I'm a newbie, learning html and css. I'm creating a art site for a friend and come unstuck with the thumbnails page. The problem is that i want to create 2 rows of 4 thumbnails, in the example below i have used 6 images but the fourth image goes onto the second row and is shown as the sixth image, rather than being on the first row as the fourth image! I dont know what i am doing wrong, any ideas anyone?

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />

<title>Starchild Work</title>

<meta http-equiv="Content-Language" content="en-us" />

 

<meta http-equiv="imagetoolbar" content="no" />

<meta name="MSSmartTagsPreventParsing" content="true" />

 

<meta name="description" content="Description" />

<meta name="keywords" content="Keywords" />

 

<meta name="author" content="Starchild" />

 

<style type="text/css" media="all">@import "css/master.css";</style>

 

 

</head>

 

<body>

 

<div id="page-container">

 

<div id="main-nav">

<div id="altnav">

<a href="index.html">HOME</a>

<a href="introduction.html">INTRODUCTION</a>

<a href="work.html">WORK</a>

<a href="exhibitions.html">EXHIBITIONS</a>

<a href="projects.html">PROJECTS</a>

<a href="links.html">LINKS</a>

<a href="contact.html">CONTACT</a><br/>

<a href="frame.html">ON FRAME</a>

<a href="canvas.html">ON CANVAS</a>

<a href="paper.html">ON PAPER</a>

<a href="board.html">ON BOARD</a>

</div>

 

<div id="header">

<h1><img src="starchild.jpg" width="263" height="71" /></h1>

</div>

 

 

<div id="content">

 

<div class="img"><a target="_blank" href="americaeatsitsyoung175.html"><img src="Images/on board/America Eats its Young175.jpg" alt="America Eats Its Young" width="175" height="175" vspace="53" margin="20"<a/>

 

</div>

 

<div class="img"><a target="_blank" href="hatecandy.html"><img src="Images/on board/Hate Candy175.jpg" alt="Hate Candy" width="175" height="175" vspace="40"<a/>

 

</div>

 

<div class="img"><a target="_blank" href="happyendingmachine.html"><img src="Images/on board/Happy Ending Machine175.jpg" alt="Happy Ending Machine" width="175" height="175" vspace="40"<a/>

 

</div>

 

<div class="img"><a target="_blank" href="heavypetting.html"><img src="Images/on board/heavy petting175.jpg" alt="Heavy Petting" width="175" height="175" vspace="40"<a/>

 

<div class="img"><a target="_blank" href="iglom.html"><img src="Images/on board/I GLOM175.jpg" alt="I Glom" width="175" height="175" vspace="40"<a/>

 

<div class="img"><a target="_blank" href="lightsoutbaby.html"><img src="Images/on board/Lights Out Baby!175.jpg" alt="Lights Out Baby!" width="175" height="175" vspace="40"<a/>

 

</div>

 

<div id="footer"></div>

 

</div>

</div>

 

</body>

</html>

Any chance we could see the CSS, as this affects the layout?

<div class="img"><a target="_blank" href="heavypetting.html"><img src="Images/on board/heavy petting175.jpg" alt="Heavy Petting" width="175" height="175" vspace="40"<a/>

 

you have forgotten to close your DIVs here.....check the above

 

<div class="img"><a target="_blank" href="iglom.html"><img src="Images/on board/I GLOM175.jpg" alt="I Glom" width="175" height="175" vspace="40"<a/>

 

<div class="img"><a target="_blank" href="lightsoutbaby.html"><img src="Images/on board/Lights Out Baby!175.jpg" alt="Lights Out Baby!" width="175" height="175" vspace="40"<a/>

 

</div>

I've sorted all the bugs and it now validates to W3C

 

Main problems

1. you had <a/> should be </a>
   
2. some divs not closed off properly
   

 

Still need the css to see layout

 

<!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>Starchild Work</title>
<meta http-equiv="Content-Language" content="en-us" />

<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />

<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />

<meta name="author" content="Starchild" />

<style type="text/css" media="all">@import "css/master.css";</style>


</head>

<body>

<div id="page-container">

<div id="main-nav">
<div id="altnav">
<a href="index.html">HOME</a>
<a href="introduction.html">INTRODUCTION</a>
<a href="work.html">WORK</a>
<a href="exhibitions.html">EXHIBITIONS</a>
<a href="projects.html">PROJECTS</a>
<a href="links.html">LINKS</a>
<a href="contact.html">CONTACT</a><br/>
<a href="frame.html">ON FRAME</a>
<a href="canvas.html">ON CANVAS</a>
<a href="paper.html">ON PAPER</a>
<a href="board.html">ON BOARD</a>
</div>
</div>

<div id="header">
<h1><img src="starchild.jpg"  alt="starc" width="263" height="71" /></h1>
</div>


<div id="content">

<div class="imgx"><a target="_blank" href="americaeatsitsyoung175.html"><img src="Images/on board/America Eats its Young175.jpg" alt="America Eats Its Young" width="175" height="175" vspace="53"/></a></div>

<div class="imgx"><a target="_blank" href="hatecandy.html"><img src="Images/on board/Hate Candy175.jpg" alt="Hate Candy" width="175" height="175" vspace="40"/></a></div>

<div class="imgx"><a target="_blank" href="happyendingmachine.html"><img src="Images/on board/Happy Ending Machine175.jpg" alt="Happy Ending Machine" width="175" height="175" vspace="40"/></a></div>

<div class="imgx"><a target="_blank" href="heavypetting.html"><img src="Images/on board/heavy petting175.jpg" alt="Heavy Petting" width="175" height="175" vspace="40"/></a></div>

<div class="imgx"><a target="_blank" href="iglom.html"><img src="Images/on board/I GLOM175.jpg" alt="I Glom" width="175" height="175" vspace="40"/></a></div>

<div class="imgx"><a target="_blank" href="lightsoutbaby.html"><img src="Images/on board/Lights Out Baby!175.jpg" alt="Lights Out Baby!" width="175" height="175" vspace="40"/></a></div>


<div id="footer"></div>

</div>
</div>

</body>
</html>

Yeh, it's the css causing it