Results 1 to 6 of 6

Thread: CMotion Gallery: neutral area not centered

  1. #1
    Join Date
    Jul 2011
    Location
    New York
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default CMotion Gallery: neutral area not centered

    1) Script Title: CMotion Gallery

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...iongallery.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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2011
    Location
    New York
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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...

    http://www.beachpackagingdesign.com/

    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.
    Last edited by BeachPack; 07-20-2011 at 01:32 PM. Reason: typos

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    On horiziconmenu.html change:

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

    Code:
    <!DOCTYPE html>
    And change:

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

    Code:
    <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:

    Code:
    /* Gallery Styles */
    
    #motioncontainer {
    	width: 3800px;
    	height: 149px;
    	visibility: visible;
    	top: 1px;
    }
    
    #motioncontainer a img {
    border: 0px solid #cccccc; /* Set imag . . .
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2011
    Location
    New York
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    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.

    -Randy
    Last edited by BeachPack; 07-23-2011 at 12:16 AM.

  6. #6
    Join Date
    Jul 2011
    Location
    New York
    Posts
    14
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Thank you for all your help

    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.

    -Randy

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •