CSS Positioning Problem

[TechEZ]

I am trying to use the slide show script from on Dynamic Drive, Ultimate Fade-in slideshow (v2.4), to create 5 rotating shows aligned horizontally, but for whatever reason they keep going in a funky diagonal instead. I tried reversing how they are put in and that didnt help anything either:

<div id="fadeshow5" class="Show5"></div>
<div id="fadeshow4" class="Show4"></div>
<div id="fadeshow3" class="Show3"></div>
<div id="fadeshow2" class="Show2"></div>
<div id="fadeshow1" class="Show1"></div>

div.Show5 { position:absolute; top:250px; left:675px; z-index:9; }
div.Show4 { position:absolute; top:250px; left:525px; z-index:10; }
div.Show3 { position:absolute; top:250px; left:375px; z-index:11; }
div.Show2 { position:absolute; top:250px; left:225px; z-index:12; }
div.Show1 { position:absolute; top:250px; left:75px; z-index:13; }

Any suggestions? I want to use this script as it allows sizing of the photos I use in the show. Unless there is another one that will work better. Thanks

[traq]

since each div has an id already, you should just use the id in your css rules. beyond that,

Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

more importantly,

Please post a link to the page on your site that contains the problematic script so we can check it out. If your page is not yet live, you might consider using an online service such as jsfiddle.

[TechEZ]

Thank you for the information.

[TechEZ]

-----------------------------------
Ultimate Fade-in slideshow (v2.4)
http://www.dynamicdrive.com/dynamici...nslideshow.htm
-----------------------------------

Ok I am using the above script and have modified it that I am using the id, rather than id and class (Not sure why I didnt do that in first place, but...)

Here is a link to a copy of the page as it isn't live yet:

http://oldgraymare.ca/DDForum-Help.html

Thanks

[traq]

well, if you look at the actual DOM (so you can see the changes that the slideshow script makes to your original html source), you'll notice that the slideshow div's positioning is changed dynamically to "relative" - because this value is inline, it overrides the value in your stylesheet:



You can add !important to each of your "position: absolute" rules to counteract this:



however, a better solution would be to wrap each of the slideshow divs inside a container div, and position the container instead. and, as you can see, after you've got your slideshows in a row you'll need to adjust the positioning, since they overlap each other currently.

[TechEZ]

Ok, following what I understand from above, I added the following and removed the individual "fadeshow" CSS styles.

div.Show { position:absolute; top:250px; left:75px; z-index:9; }

<div class="Show">
<div id="fadeshow5"></div>
<div id="fadeshow4"></div>
<div id="fadeshow3"></div>
<div id="fadeshow2"></div>
<div id="fadeshow1"></div>
</div>

I get a vertical collumn of the five now.

http://oldgraymare.ca/DDForum-Help.html

Also, pardon my ignorance, but how do you pull up the DOM information like you did? I may have to go to the option with the !important

Thanks

[TechEZ]

Just read the fine print lol....You wanted each on in a div... Which worked. So thank you for all the help.

[traq]

no problem, glad you could figure it out.

If your question has been answered, you should mark this thread "Resolved."
Go to your first post and click on [ Edit ], then click on [ Go Advanced ]. In drop-down list "Prefix", select the option "Resolved."

the screenshots I posted were in Chrome, using the web inspector (right click > Inspect Element). Most other browsers have similar tools.