I added a javascript-based image switcher to this home page:

http://oldmanmountain.com/test/

As you can see, the image(s) are all pushed up in the upper-left corner of the page, below the header and sidebar.

This is an old site and it uses absolutely positioned div tags. So, I created a div and gave it an absolute position of top: 221px left:199px. That was to clear the header and sidebar. I then added the images as per the following:

<div id="imageSwitcher" class="imgsw">
    <img src="imagesBobs/HomePage/homePageSwitcher/image1.jpg" width="685" height="775"  />
    <img src="imagesBobs/HomePage/homePageSwitcher/image2.jpg" width="685" height="775"  />
    <img src="imagesBobs/HomePage/homePageSwitcher/image3.jpg" width="685" height="775"  />
    <img src="imagesBobs/HomePage/homePageSwitcher/image4.jpg" width="685" height="775"  />
    <img src="imagesBobs/HomePage/homePageSwitcher/image5.jpg" width="685" height="775"  />
    <img src="imagesBobs/HomePage/homePageSwitcher/image6.jpg" width="685" height="775"  />
</div>
<!-- end imageSwitcher div -->

So far, so good. Then I linked to the javascript files that came with the switcher. Suddenly the images shifted to the top left corner of the site.

I have tried adding margin and padding and tried removing the positioning and using margin and padding instead. No luck. I looked in the config file that came with the switcher and cannot see anything that would cause the images to shift position. I am guessing the javascript file is making the images switch position.

Help!, anyone?

1 answer

0
points

Thought about this going to sleep last night, and it seems to work.

The div holding the images needs to be inside another div, which can be positioned at will. For whatever reason, this code seems to work:

<div id="imageSwitcher">
<div id="varal" class="imgsw">    
    <img src="imagesBobs/HomePage/homePageSwitcher/image1.jpg" width="685" height="775" alt="See what you and Old Man Mountain can do." />
    <img src="imagesBobs/HomePage/homePageSwitcher/image2.jpg" width="685" height="775" alt="See what you and Old Man Mountain can do." />
    <img src="imagesBobs/HomePage/homePageSwitcher/image3.jpg" width="685" height="775" alt="See what you and Old Man Mountain can do." />
    <img src="imagesBobs/HomePage/homePageSwitcher/image4.jpg" width="685" height="775" alt="See what you and Old Man Mountain can do." />
    <img src="imagesBobs/HomePage/homePageSwitcher/image5.jpg" width="685" height="775" alt="See what you and Old Man Mountain can do." />
    <img src="imagesBobs/HomePage/homePageSwitcher/image6.jpg" width="685" height="775" alt="See what you and Old Man Mountain can do." />
</div><!-- end varal div -->

<!-- end imageSwitcher div -->

Answered almost 9 years ago by Bob Faulkner