?
Solved

Dreamweaver Maximum Region Repeats

Posted on 2009-02-19
11
Medium Priority
?
316 Views
Last Modified: 2013-11-12
I have a page developed in Dreamweaver which contains a repeating region. The region contains a thumbnail (90x72 pixels) and an event title, event location and event date.  It works perfectly but only allows 19 instances. When trying to create the 20th it aligns to the right of the 19th off the page. Is there a limit for the repeats? I need 30-50.
0
Comment
Question by:slegy
  • 6
  • 5
11 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 23686855
Hi slegy,

There's no functional limit to how much can be returned but there are practical limits.  The 20th row described above may be finding a hole in your design or CSS and moving unexpectedly.

The other practical limit is memory.  The more rows your repeat, the larger the page load is on the browser/video/RAM and the more likely it is you will cause a rendering error as one of those items crash.
0
 

Author Comment

by:slegy
ID: 23687155
Hi Jason. Believe is or not, this website I've been working on for what seems forever is in the process of implementation. We are just waiting for the transfer of the domain to the new host.

It occurred to me that part of my problem may be that I using a background image. To this point I had been limiting the page size to the size of the image, but the user wants endless scrolling, i.e., everything on one page. So I removed the image size. I've tried repeat and repeat-y, but that hasn't made any difference. I have another page where I didn't use a repeating region but has the same format. It contains over 30 entries and the background just keeps repeating with no problem. It must be a programmer-imposed conflict somewhere between the repeating region and the use of the background image. I'll do some more testing but will take the easy route rather than spend a lot of time.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 23687329
>> It must be a programmer-imposed conflict somewhere between the repeating region and the use of the
>> background image.

If this is a CSS design, it is more likely that the region is finding a hole.  Is the repeat region in a table?
0
NEW Veeam Backup for Microsoft Office 365 1.5

With Office 365, it’s your data and your responsibility to protect it. NEW Veeam Backup for Microsoft Office 365 eliminates the risk of losing access to your Office 365 data.

 

Author Comment

by:slegy
ID: 23687540
No table. Here is the code from the template:
  <div id="background">
  <!-- TemplateBeginEditable name="pgslideShow" -->
  <div id="pgHeader">
    <div id="pgslideShow">    </div>
    <div id="pgTitle"> </div>
      <div id="pgYear">9999</div>
      </div>
    <!-- TemplateEndEditable -->
 <!-- TemplateBeginRepeat name="eventDisplay" --><!-- TemplateBeginEditable name="eventEdit" -->
    <div id="event">
      <div id="eventImage"> <a href="#"><img src="#" border="0" /></a> </div>
      <div class="eventTitle" id="eventTitle"> <a href="#" class="eventTitle">Event Title</a> </div>
      <div id="eventLocation"> Event Location </div>
      <div id="eventDate"> Event Date </div>
    </div>
    <!-- TemplateEndEditable --><!-- TemplateEndRepeat -->
  </div>
  <div id="clear"></div>

Here's the CSS:

@charset "utf-8";
/* CSS Document */
#background {
 width: 668px;
 background-image: url(../assets/images/mainTemplate/worldBlue.jpg);
 }
#pgHeader {
 position: relative;
 width: 640px;
 }
#pgslideShow {
 float: left;
 height: 146px;
 margin-top: 6px;
 }
#pgTitle {
 float: right;
 height: 140px;
 width: 140px;
 text-align: left;
 line-height: 40px;
 font-size: 28px;
 color:#483D8B;
 font-style: italic;
 padding-top: 18px;
 }
#pgYear {
 position: relative;
 float: left;
 left: 8px;
 width: 80px;
 height: 40px;
 font-size: 30px;
 color: #483D8B;
 text-align: center;
 font-style: italic;
  }
#event {
 position: relative;
 float: left;
 width: 550px;
 left: 44px;
 margin-top: 13px;
 }
#eventImage {
 float: left;
 border: thin solid #FFFFFF;
 }
#eventDescrip {
 float: right;
 width: 320px;
 margin-top: 8px;
 }
#eventTitle {
 float: right;
 width: 438px;
 font-size: 13px;
 color: #A52A2A;
 padding-top: 16px;
 }
#eventLocation {
 width: 438px;
 float: right;
 font-size: 12px;
 color: #483D8B;
 }
#eventDate {
 width: 438px;
 float: right;
 color: #483D8B;
 padding-bottom: 10px;
 }

The background repeats once (for a total of two) and then that's when things go awry.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 23687808
You are using CSS id's in the repeat region and that's not correct.  An id is used once per page.  Anything other than that and you throw the browser into quirks mode.

Change all of the CSS in the repeat region to classes and make the changes in the CSS file accordingly and retest.

A link so I can see it for myself would also be helpful.
0
 

Author Comment

by:slegy
ID: 23692087
Now I'm in unknown territory. I've not used classes extensively. Will research that. Here is the link to the page before I tried to put everything on one page:
http://ilcaoffice.win.aplus.net/photoGallery/photos2008/index.html
 
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 23693370
To make a class just change the # to a .  in the CSS file and the HTML from id= to class=
0
 

Author Comment

by:slegy
ID: 23693399
Jason - What I mean was, I use classes extensively for formatting text. But in order to maintain the formatting for the photogallery page, I'm not sure how to do that with with classes rather than ids. I will continue researching.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 23693461
If you look at your repeat region above you will see the css is using ids. Just change the reference to a class and copy the css definitions to classes in the css file. There is no functional difference between a class and an id.
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 1000 total points
ID: 23694696
Sorry for the terse answers earlier.  Was on the iPod and couldn't demonstrate code.

Here's what I mean:

<!-- TemplateBeginRepeat name="eventDisplay" --><!-- TemplateBeginEditable name="eventEdit" -->
   <div id="event">
     <div id="eventImage"> <a href="#"><img src="#" border="0" /></a> </div>
     <div class="eventTitle" id="eventTitle"> <a href="#" class="eventTitle">Event Title</a> </div>
     <div id="eventLocation"> Event Location </div>
     <div id="eventDate"> Event Date </div>
   </div>
   <!-- TemplateEndEditable --><!-- TemplateEndRepeat -->

Change to:

<!-- TemplateBeginRepeat name="eventDisplay" --><!-- TemplateBeginEditable name="eventEdit" -->
   <div class ="event">
     <div class="eventImage"> <a href="#"><img src="#" border="0" /></a> </div>
     <div class="eventTitle" id="eventTitle"> <a href="#" class="eventTitle">Event Title</a> </div>
     <div class="eventLocation"> Event Location </div>
     <div class="eventDate"> Event Date </div>
   </div>
   <!-- TemplateEndEditable --><!-- TemplateEndRepeat -->

Add the following to the CSS:

.event {
position: relative;
float: left;
width: 550px;
left: 44px;
margin-top: 13px;
}
.eventImage {
float: left;
border: thin solid #FFFFFF;
}
.eventDescrip {
float: right;
width: 320px;
margin-top: 8px;
}
.eventTitle {
float: right;
width: 438px;
font-size: 13px;
color: #A52A2A;
padding-top: 16px;
}
.eventLocation {
width: 438px;
float: right;
font-size: 12px;
color: #483D8B;
}
.eventDate {
width: 438px;
float: right;
color: #483D8B;
padding-bottom: 10px;
}
0
 

Author Closing Comment

by:slegy
ID: 31549014
Thanks again - as always a great learning experience. Yes, I made those changes earlier and have put the page together. It looks and works great. Now I have another long one to do.
0

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

830 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