Layout problems

[jamesyb]

Hi, i have been struggling for some time with how to code my html with my coldfusion to display my images as follows:

previous----- displaying items 1 to 6 -----next

img1 img2 im3

im4 im5 im6

At the moment i am using a cfloop to display and i amd getting the following results

previous--------------displaying items 1 to 6--------------next

img1

img2

img3

img4

img5

img6


I think i have to put the html out with the cfloop ti achieve this but i am having trouble getting this right.

Here is the code i have so far for this.

In my code i have at the bottom the html that i would like to have the images displayed like, if someone can tell me how i can combine the two i will be forever grateful.

Thankyou,
James
p.s sorry for all the code, i wasnt sure how much i need to post.


<cfparam name="form.frmsearch" default="">
<cfparam name="url.frmsearch" default="#form.frmsearch#">

<cfquery name="q_fetch" datasource="******">
select * from stock



</cfquery>

<!--- create a parameter to pass that to the links --->
<cfset lcl_linkpara="&frmsearch=#urlencodedformat(url.frmsearch)#">


<cfset Result_Per_Page="6">

<!--- get the total record count from q_fetch query --->
<cfset Total_Records="#q_fetch.recordcount#">

<!--- set the default value for the offset record set number --->
<cfparam name="URL.offset" default="0">

<!--- the limit result set(i.e., end row) --->
<cfset limit=URL.offset+Result_Per_Page>



<!--- page results start from? --->
<cfset start_result=URL.offset+1>




<!--- make sure that the initial start row is starting from 1 --->
<cfset URL.offset=URL.offset+1>

<!--- if the record is their more than one page so show the navigation bar --->

<br>

<!--- Create Previous Link --->
<cfif URL.offset GT Result_Per_Page>
<!--- Previous Link Offset --->
<cfset prev_link=URL.offset-Result_Per_Page-1>
</cfif>

<!--- Find out how many pages are there for display --->
<cfset Total_Pages=ceiling(Total_Records/Result_Per_Page)>




<!--- create Next Link --->
<cfif limit LT Total_Records>
<!--- Next Link Offset --->
<cfset next_link=URL.offset+Result_Per_Page-1>

</cfif>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="3" width="27"><a href="cars.htm" onMouseOver="document.prev.src='images/leftArrow_off.gif'" onMouseOut="document.prev.src='images/leftArrow_on.gif'"><img src="images/leftArrow_off.gif" width="27" height="19" border="0" name="prev"></a></td>
<td height='5' width="150"></td>
<td rowspan="3" width="25"><a href="cars.htm" onMouseOver="document.next.src='images/rightArrow_off.gif'" onMouseOut="document.next.src='images/rightArrow_off.gif'"><img src="images/rightArrow_off.gif" width="25" height="19" border="0" name="next"></a></td>
</tr>
<tr>
<td align="center" class="whitenormal" bgcolor="#CCCCCC">&nbsp;&nbsp;<cfoutput>Item #start_result# -
<cfif limit GT Total_Records>
#Total_Records#
<cfelse>
#limit#
</cfif>
of #Total_Records# </cfoutput></td>
</tr>
<tr>
<td height='5'></td>
</tr>
</table>
<cfloop query="q_fetch" startrow="#URL.offset#" endrow="#limit#">
<br>
<br>
<cfif URL.offset GT Result_Per_Page>
<!--- Previous Link Offset --->
<cfset prev_link=URL.offset-Result_Per_Page-1>
<cfoutput><a href="#cgi.script_name#?offset=#prev_link## lcl_linkpara#"><IMG
SRC="images/prev_off.gif" NAME="prev" WIDTH="88" HEIGHT="15" BORDER="0" ALT="previous" VSPACE="2"></a></cfoutput>
</cfif>


<!--- create Next Link --->
<cfif limit LT Total_Records>
<!--- Next Link Offset --->
<cfset next_link=URL.offset+Result_Per_Page-1>
<cfoutput><a href="#cgi.script_name#?offset=#next_link## lcl_linkpara#"><IMG SRC="images/next_off.gif" NAME="next" WIDTH="67"
HEIGHT="15" BORDER="0" ALT="next" VSPACE="2"></A></TD></cfoutput>
</cfif></TR>

<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td><img src="graphics/shim.gif" width="140" height="1"></td>
</tr>
<tr align="center">
<td valign="bottom"><a href="details.htm" target="_self"><A HREF="detail.cfm?id=<cfoutput>#id#</cfoutput>"
TARGET="mainFrame"><IMG SRC="<cfoutput>#thumb_pics#</cfoutput>"
WIDTH="100"
HEIGHT="90" BORDER="0"></a></td>
</tr>
<tr align="center">
<td class="greytablesm"> <cfoutput>#year# #makeID# #modelID# #variant#</cfoutput></td>
</tr>
<tr align="center">
<td class="greytablesm"><cfoutput>#miles# </cfoutput> Miles</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm"><cfoutput>#owners# </cfoutput> Owners</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">Condition <a href="condition.cfm" class="greytablesm"> <cfoutput>#condition#</cfoutput></a></td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">£<cfoutput>#price#</cfoutput></td>
</tr>
</table>


</cfloop>


<cfloop index="i" from="1" to="#Total_Pages#">
<cfset j=i-1>
<cfset offset_value=j*Result_Per_Page>
<!--- deactivate the link if the page number is current page --->
<cfif offset_value EQ URL.offset-1 >
<cfoutput>#i#</cfoutput>
<cfelse>
<cfoutput><a href="#cgi.script_name#?offset=#offset_value## lcl_linkpara#">#i#</a></cfoutput>
</cfif>
</cfloop>
<HTML>
<HEAD>
<TITLE>Honest John's Cars</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">


<link rel="stylesheet" href="style.css">
</HEAD>

<BODY>
<TABLE align="center" cellpadding="0" cellspacing="0" border="0" width="530" height="100%">
<TR>
<TD><IMG src="graphics/shim.gif" width="180" height="1"></TD>
<TD><IMG src="graphics/shim.gif" width="180" height="1"></TD>
<TD><IMG src="graphics/shim.gif" width="180" height="1"></TD>
</TR>
<TR>
<TD colspan="3"><IMG src="images/spacer.gif" width="1" height="1"></TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD align="center">&nbsp; </TD>
<TD class="greysm" align="center">&nbsp;</TD>
</TR>
<TR>
<TD valign="bottom" align="center" colspan="3" height="10">&nbsp;</TD>
</TR>
<TR align="center" valign="top">
<TD>
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td><img src="graphics/shim.gif" width="140" height="1"></td>
</tr>
<tr align="center">
<td valign="bottom"><a href="details.htm" target="_self"><img src="pictures/thumb_pics/001.jpg" width="140" height="110" border="0"></a></td>
</tr>
<tr align="center">
<td class="greytablesm"> 2000 Rover 25 1.8 GTi Hatch</td>
</tr>
<tr align="center">
<td class="greytablesm">44000 miles</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">2 owners</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">condition 1</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">&pound;5995</td>
</tr>
</table>
</TD>
<TD>
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td><img src="graphics/shim.gif" width="140" height="1"></td>
</tr>
<tr align="center">
<td valign="bottom"><a href="details.htm" target="_self"><img src="pictures/thumb_pics/002.jpg" width="140" height="110" border="0"></a></td>
</tr>
<tr align="center">
<td class="greytablesm">1999 Ford Mondeo 1.8<br>
Turbo Diesel Estate</td>
</tr>
<tr align="center">
<td class="greytablesm">76000 miles</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">2 owners</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">condition 2</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">&pound;4495</td>
</tr>
</table>
</TD>
<TD>
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td><img src="graphics/shim.gif" width="140" height="1"></td>
</tr>
<tr align="center">
<td valign="bottom"><a href="details.htm" target="_self"><img src="pictures/thumb_pics/003.jpg" width="140" height="110" border="0"></a></td>
</tr>
<tr align="center">
<td class="greytablesm">Vauxhall Astra 1.6 Arctic Estate</td>
</tr>
<tr align="center">
<td class="greytablesm">88000 miles</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">3 owners</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">condition 3</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">&pound;2995</td>
</tr>
</table>
</TD>
</TR>
<TR>
<TD colspan="3" height='5'></TD>
</TR>
<TR valign="top">
<TD align="center">
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td><img src="graphics/shim.gif" width="140" height="1"></td>
</tr>
<tr align="center">
<td valign="bottom"><a href="details.htm" target="_self"><img src="pictures/thumb_pics/004.jpg" width="140" height="110" border="0"></a></td>
</tr>
<tr align="center">
<td class="greytablesm">1996 Honda Civic 1.6 V-tech Hatch</td>
</tr>
<tr align="center">
<td class="greytablesm">107000 miles</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">4 owners</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">condition 2</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">&pound;3795</td>
</tr>
</table>
</TD>
<TD align="center">
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td><img src="graphics/shim.gif" width="140" height="1"></td>
</tr>
<tr align="center">
<td valign="bottom"><a href="details.htm" target="_self"><img src="pictures/thumb_pics/005.jpg" width="140" height="110" border="0"></a></td>
</tr>
<tr align="center">
<td class="greytablesm">2000 Citroen Saxo Forte Hatch</td>
</tr>
<tr align="center">
<td class="greytablesm">28000 miles</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">2 owners</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">condition 2</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">&pound;3795</td>
</tr>
</table>
</TD>
<TD align="center">
<table border="0" cellspacing="2" cellpadding="0">
<tr>
<td><img src="graphics/shim.gif" width="140" height="1"></td>
</tr>
<tr align="center">
<td valign="bottom"><a href="details.htm" target="_self"><img src="pictures/thumb_pics/006.jpg" width="140" height="110" border="0"></a></td>
</tr>
<tr align="center">
<td class="greytablesm">1999 Renault Laguna 1.6 RT Hatch</td>
</tr>
<tr align="center">
<td class="greytablesm">80000 miles</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">3 owners</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">condition 3</td>
</tr>
<tr align="center">
<td height="2" class="greytablesm">&pound;3595</td>
</tr>
</table>
</TD>
</TR>
<tr>
<td colspan='3' height="30"><p>&nbsp;</p></td>
</tr>
</TABLE>

</BODY>
</HTML>