View Full Version : CMotion Gallery: neutral area not centered

07-19-2011, 03:28 PM
1) Script Title: CMotion Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm

3) Describe problem: I'm having trouble with the "neutral area" winding up too far to the right, rather than truly centered. This is OK when the window is really big, but if the window is smaller it means that you can't scroll in both directions. One work around has been to make the neutral area very small, but that makes navigation kind of jittery. Thanks in advance for any help with this.

07-20-2011, 05:03 AM
Generally that's from the overuse/misuse of align/text-align center and/or the center tag itself. If that's the trouble here, you can either redesign the page to use only margin to center elements and text-align center only to center text, or in the HTML code from Step 2 on the demo page, add text-align left to first line like so:

<div id="motioncontainer" style="text-align:left;position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

<nobr id="trueContainer"><a href="javascript:enlargeimage('dynamicbook1.gif')"><img src="dynamicbook1.gif" border=1></a> <a href="javascript:enlargeimage('dynamicbook1.gif', 300, 300)"><img src="dynamicbook1.gif" border=1></a> <a href="http://www.dynamicdrive.com"><img src="dynamicbook1.gif" border=1></a> <a href="#"><img src="dynam . . .

But that's only my best guess of the cause. If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

07-20-2011, 01:31 PM
Hi John, Thanks for taking a look at this. The cookie-based script you posted has been working great and I've almost finished with the de-framing on the earlier web-site.

The problem of the non-center neutral area was also occurring in the existing frames-based site...


Initially (in my browser) it seemed close to centered, but if I make the window more narrow, the neutral area is clearly on the right and one can only scroll in one direction. I'm not sure if the problem is in the html page or in my settings in the CSS and/or JS documents. Thanks.

07-20-2011, 02:19 PM
On horiziconmenu.html change:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<!DOCTYPE html>

And change:

<div id="motioncontainer" style="position:relative;">
<div id="motiongallery" style="position:absolute; white-space: nowrap>


<div id="motioncontainer" style="position:relative;overflow:hidden;margin:0 auto;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">

In the gallerystyle.css file add the px units to the height declaration:

/* Gallery Styles */

#motioncontainer {
width: 3800px;
height: 149px;
visibility: visible;
top: 1px;

#motioncontainer a img {
border: 0px solid #cccccc; /* Set imag . . .

07-20-2011, 03:48 PM
Hi John,
Thanks for the help. I made the changes you suggested to my new version and it seemed to almost work.

One thing I'm noticing is that if I resize the page the neutral area does not immediately reposition itself, unless I refresh the page. Is that correct?

The centering does seem better, but the shorter doctype declaration seems to now be causing some of the type to extend beyond it's table width, which wasn't happening with the other doctype declaration.

The code of my new page and CSS files are attached.

Thank you.


07-22-2011, 04:26 PM
Hi John, I think I've resolved the most of the problems. I just posted the new frame-less version of our website http://www.beachpackagingdesign.com/ and the CMotion Menu is now behaving pretty well in the browsers I've checked it in so far....

Your cookies javascript was key, but the doctype issue that you brought up turned out to be very important as I was scrambling to get the web site working this morning in other browsers. (Some of the pages, I'm leaving with the old doctype since changing it just plays havoc with the type.)

I don't think my "neutral area" is precisely centered, but it's so much better than before.

Thanks for your help.