Thumbnails

**monsoon** · 27-04-2009 08:10 PM

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?

HTML Code:

<!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>

**monsoon** · 27-04-2009 08:11 PM

HTML Code:

<!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>

**likethegoddess** · 28-04-2009 05:36 AM

Looks like you haven't closed all of your individual image divs.

Thread: Thumbnails

LinkBack

Thread Tools

Display

Thumbnails

Similar Threads

Help! how do I fix pixelated thumbnails and rollovers?

Scrolling thumbnails

Bookmarks

Bookmarks

Posting Permissions