Results 1 to 8 of 8

Thread: CSS Positioning Problem

  1. #1
    Join Date
    Aug 2011
    Location
    BC - Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation CSS Positioning Problem

    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
    Last edited by TechEZ; 08-19-2011 at 09:05 PM.

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    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.

  3. #3
    Join Date
    Aug 2011
    Location
    BC - Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you for the information.

  4. #4
    Join Date
    Aug 2011
    Location
    BC - Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  5. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    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.

  6. #6
    Join Date
    Aug 2011
    Location
    BC - Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  7. #7
    Join Date
    Aug 2011
    Location
    BC - Canada
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  8. #8
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 517 Times in 503 Posts
    Blog Entries
    5

    Default

    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.
    Last edited by traq; 08-19-2011 at 08:13 PM.

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
  •