Solved

Repeat Region using CSS and No Tables

Posted on 2004-10-30
251 Views
Last Modified: 2010-04-25
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
 %>
0
Question by:turvey
    9 Comments
     
    LVL 10

    Expert Comment

    by:rockmansattic
    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
     
    LVL 10

    Expert Comment

    by:rockmansattic
    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
     

    Author Comment

    by:turvey
    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
     
    LVL 10

    Expert Comment

    by:rockmansattic
    OK, Ill take a shot at it tomorrow..

    Rockman
    0
     
    LVL 31

    Expert Comment

    by:seanpowell
    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
     

    Author Comment

    by:turvey
    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
     

    Author Comment

    by:turvey
    The

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

    Author Comment

    by:turvey
    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
     

    Accepted Solution

    by:
    Question PAQ'd
    500 points refunded.

    CetusMOD
    Community Support Moderator
    0

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    For those who don't know, Adobe Dreamweaver is a popular commercial web editor that enables you to design, build and manage complex websites. The editor is a WYSIWYG (What You See Is What You Get) web editor, which means that you can create your web…
    This article is very specific and is only intended to help if you are installing Dreamweaver 8 in a Windows 7 environment with Office 2007 installed.   I'm not sure why Microsoft tends to release OS' that should not be released but they do.  Windows…
    This Experts Exchange video Micro Tutorial shows how to tell Microsoft Office that a word is NOT spelled correctly. Microsoft Office has a built-in, main dictionary that is shared by Office apps, including Excel, Outlook, PowerPoint, and Word. When …
    Internet Business Fax to Email Made Easy - With eFax Corporate (http://www.enterprise.efax.com), you'll receive a dedicated online fax number, which is used the same way as a typical analog fax number. You'll receive secure faxes in your email, fr…

    934 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now