Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Repeat Region using CSS and No Tables

Posted on 2004-10-30
10
Medium Priority
?
287 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
Comment
Question by:turvey
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
10 Comments
 
LVL 10

Expert Comment

by:rockmansattic
ID: 12463030
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
ID: 12463471
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
ID: 12472180
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
Enroll in October's Free Course of the Month

Do you work with and analyze data? Enroll in October's Course of the Month for 7+ hours of SQL training, allowing you to quickly and efficiently store or retrieve data. It's free for Premium Members, Team Accounts, and Qualified Experts!

 
LVL 10

Expert Comment

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

Rockman
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 12594817
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
ID: 12604737
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
ID: 12652779
The

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

Author Comment

by:turvey
ID: 12652797
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:
CetusMOD earned 0 total points
ID: 12685842
Question PAQ'd
500 points refunded.

CetusMOD
Community Support Moderator
0

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Adobe Dreamweaver CS5 is a WYSIWYG web page editor that has advanced HTML, CSS, and Javascript rendering functionality and is probably the most well-known HTML editor available. Much of Dreamweaver's appeal centers around the Design View interfac…
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…
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
We’ve all felt that sense of false security before—locking down external access to a database or component and feeling like we’ve done all we need to do to secure company data. But that feeling is fleeting. Attacks these days can happen in many w…

609 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