Repeat Region using CSS and No Tables

Using Tom Muck's Horizontal Looper, I have created a LEFT Aligned array of - 3 Columns x 2 Rows to display Images, Prices and Product Descriptions.  This works OK but I would like to achieve the same thing using CSS and No Tables.

The following goes some way towards achieving this aim but the number of rows seems to be dictated by the browser window width - the narrower the browser window the more the images are wrapped to give an increasing number of rows - I need a consistent array of 3 x 2.  Also, I need to have the Text in Product Descriptions wrap relative to the image width.  Using my poorly written code below, the Text in Product Description extends beyond the width of the image.

Can anyone assist?

<style type="text/css">
div.float {
  float: left;
  }
 
div.float p {
   text-align: center;
   }
</style>


 startrw = 0
endrw = HLooper1__index
numberColumns = 3
numrows = 2
while((numrows <> 0) AND (Not Recordset1.EOF))
      startrw = endrw + 1
      endrw = endrw + numberColumns
 %>
     <%
While ((startrw <= endrw) AND (Not Recordset1.EOF))
%>
    <div class="float">
  <a href ="<%=CurrentUrl%>" style="text-decoration:none">
      <img src="<%=(Recordset1.Fields.Item("IMAGE").Value)%>" width="70 > 
      </a>
  alt="image 1><br />
  <p><a href ="<%=CurrentUrl%>" style="text-decoration:none"><br>
      <%=Recordset1("DESCRIPTION")%><br><a href ="<%=CurrentUrl%>" style="text-decoration:none"></a>
     
      <%=Recordset1("SELLING_PRICE")%></a> </p>
</div>
      
    <%
      startrw = startrw + 1
      Recordset1.MoveNext()
      Wend
      %>
    <%
 numrows=numrows-1
 Wend
 %>
turveyAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

rockmansatticCommented:
First I would clean up your html a little, some thing like this will make troubleshooting the other issues easier.
<%
startrw = 0
endrw = HLooper1__index
numberColumns = 3
numrows = 2
while((numrows <> 0) AND (Not Recordset1.EOF))
     startrw = endrw + 1
     endrw = endrw + numberColumns
 %>
     <%
While ((startrw <= endrw) AND (Not Recordset1.EOF))
%>
    <div class="float">
  <a href ="<%=CurrentUrl%>" style="text-decoration:none"> <img src="<%=(Recordset1.Fields.Item("IMAGE").Value)%>" width="70" > </a>
  <br>
  <a href ="<%=CurrentUrl%>" style="text-decoration:none"><%=Recordset1("DESCRIPTION")%></a>
 
  <br>
  <a href ="<%=CurrentUrl%>" style="text-decoration:none"><%=Recordset1("SELLING_PRICE")%></a>
     
     
</div>
     
    <%
     startrw = startrw + 1
     Recordset1.MoveNext()
     Wend
     %>
    <%
 numrows=numrows-1
 Wend
 %>



Some of the code was not properly nested.
also, you will prpbably have to incorperate javascript to get teh screensize, then put that variable into a vbscript varable to run an equality statment on.
this may also be done to make the text wrap where you want it.  
Ill see about getting you some code for number opf images per row, I have a simialr proj currently.

Rockman
0
rockmansatticCommented:
OK Ive got a little code for you that should help.

you will need to get the screen size from a previous page (such as the homepage).

I have set this up to send the size via url, put I would suggest setting a cookie and saving  that info for each user.

page 1

<head>
<script type="text/javascript">
var screenW = 640, screenH = 480;
if (parseInt(navigator.appVersion)>3) {
 screenW = screen.width;
 screenH = screen.height;
}
else if (navigator.appName == "Netscape"
    && parseInt(navigator.appVersion)==3
    && navigator.javaEnabled()
   )
{
 var jToolkit = java.awt.Toolkit.getDefaultToolkit();
 var jScreenSize = jToolkit.getScreenSize();
 screenW = jScreenSize.width;
 screenH = jScreenSize.height;
}


document.location = "********your_products_page.asp********?resW="+screenW+"&resH="+screenH;
</script>
</head>

your_products_page
<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>

<%
dim screenw
dim screenh
dim numberofrows
screenw = request.querystring("resW") ' put the value of the size into a vbscript var
screenh = request.querystring("resH") ' put the value of the size into a vbscript var
response.Cookies("resW") = screenw  'defines a cookie to remember the res
response.Cookies("resW").Expires = Date + 10  'sets the life of the cookie

'from now on you can get the size of the screen from this user via the cookie
If (Request.Cookies("resW")<> "") then
      screenw = Request.Cookies("resW")
      End If
      
      
If (screenw = 640) then
    numberofrows = 4  
      End If
If (screenw = 800) then
      numberofrows = 6
      End If
If (screenw = 1024) then
      numberofrows = 8
      End If
If (screenw = 1152) then
      numberofrows = 10
      End If

%>

now you can take the variable   numberofrows and apply it to your code.

Hope this helps.

Rockman
0
turveyAuthor Commented:
Thanks, Rockman, for your swift response.  I have tidied up the code as suggested.  As for the rest - I probably did not explain myself properly.  Whilst the question of screen size will be a consideration as I continue to develop the site, for the time being, I just want to get the results of the database search displayed in two rows of three.

The Horizontal Looper is set up to display up to six search results at a time.  I would like the Horizontal Looper to Count as it progresses through each iteration and, after the third iteration,  introduce a line break.  In this way three images would be on one line and three on the next - for an example of what I am trying to achieve see the Tutorial at:
http://css.maxdesign.com.au/floatutorial/tutorial0405.htm.

The CSS for the line break is given as;
.clearboth { clear: both; }
and the HTML  - which would only be triggered after the third iteration;
<br class="clearboth">

What I think I need to achieve this result is an 'If - Then - End If' Statement which will trigger the '.clearboth { clear: both; }' on the count of three - but, alas, I don't know how to do it or where to put it.

Hope you can help.
Regards, Turvey
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

rockmansatticCommented:
OK, Ill take a shot at it tomorrow..

Rockman
0
seanpowellCommented:
Hi Turvey,

Couple things...

1. Are the sizes of your images fixed?
2. Can you not set a fixed with for the thumbnail area?

Something like:

<style type="text/css">

#container
{
      width:600px;
}

div.float
{
      width:200px;
      float: left;
      text-align: center;
}

div.float p
{
      text-align: center;
}

</style>

and then:

<div id="container">
      <div class="float">
            <a href ="<%=CurrentUrl%>" style="text-decoration:none">
            <img src="<%=(Recordset1.Fields.Item("IMAGE").Value)%>" width="70" alt="image1">
            </a>
            <p><a href ="<%=CurrentUrl%>" style="text-decoration:none"><%=Recordset1("DESCRIPTION")%></a><br>
            <%=Recordset1("SELLING_PRICE")%></p>
      </div>
      <div class="float">
            <a href ="<%=CurrentUrl%>" style="text-decoration:none">
            <img src="<%=(Recordset1.Fields.Item("IMAGE").Value)%>" width="70" alt="image1">
            </a>
            <p><a href ="<%=CurrentUrl%>" style="text-decoration:none"><%=Recordset1("DESCRIPTION")%></a><br>
            <%=Recordset1("SELLING_PRICE")%></p>
      </div>
</div>

Sean
0
turveyAuthor Commented:
Thanks Sean,
I tried your suggestion but this resulted in two columns of six images with column 2 displaying the same images as column 1.

Image1 - Image1
Image2 - Image2
Image3 - Image3
Image4 - Image4
Image5 - Image5
Image6 - Image6

What I am seeking is:
Image1 - Image2 - Image3
Image4 - Image5 - Image6

I am convinced that I need a vbScript 'If - then' Statement as outlined in the above Comment dated 11/02/2004 12:59PM GMT.  Every attempt to write the Statement myself generates Error Messages such as  'Expected Statement' or 'Expected Wend'.
Regards
0
turveyAuthor Commented:
The

<%If startrw = 4 then Response.Write "<br class='clearboth'>"%>
0
turveyAuthor Commented:
The piece of code I have been seeking is as follows:

<%If startrw = 4 then Response.Write "<br class='clearboth'>"%>

I finally worked this out for myself but thanks to all who have read my question and to those who responded.
I am now going to ask for it to be deleted.

Regards to all.
0
CetusMODCommented:
Question PAQ'd
500 points refunded.

CetusMOD
Community Support Moderator
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Dreamweaver

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.