SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    nuked my carousel.

    being going over my code & please close to starting over.
    when the user clicks the left or right button the setting show up correct for about a second.
    but was wondering if there was something obvious to anyone that I missed.

    I relize it has do do w/the margin of the inner span. but I'll be darned if i can see where I coded it off or broke it.
    http://www.danielamorescalchi.com/co...ngineering.php

    thx
    D

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Morning pdxSherpa,

    In style.css line 1391 you define this rule:

    Code CSS:
    .active { margin-top:-18em; height: 18em}

    The negative top margin is what's nuking your carousel.
    The reason there is a split second where everything looks good, is because this is the time before the style is applied.

  3. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    than you Pullo. Dead on!

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Good stuff

    You said you were "close to starting over", but your error took me about thirty seconds to find.
    Would you like me to explain how I did so?

  5. #5
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Absolutely! Thank you!
    I was using chrome/inspect element. I could see the margins were off but could not pinpoint the problem

    D

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,881
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Sure thing.

    Well, using Chrome, I saw the initial problem straight off.
    I then right clicked on the slide (which was half out of view), then selected "Inspect Element".
    This opened up Chrome's Dev Tools with a <div class="span7"> highlighted.
    This just seemed to be the text within the slide and there weren't any suspicious styles attached to it.
    (you should be able to see the styles associated with a particular element on the right hand side of the Dev Tools when the element is selected).
    I then selected the element's nearest sibling (<div class="span2">) by clicking on it from within the Dev Tools.
    This seemed to be the picture and was equally as unsuspicious.
    I then selected the parent element of <div class="span2">, which was <div id="eng1stSlide" class="item active">.
    This seemed to be the slide container. That's when I saw the negative margin being applied to the class "active".
    I removed that rule from within the Dev Tools (just remove the tick next to the style) so as to make sure and Bingo!

    As an additional tip (apologies if you know this already) - if you mouse over the various DOM elements from within the Dev Tools elements tab - the actual elements they correspond to are highlighted on the page.

    Hope that helps.

  7. #7
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    724
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Pullo. I already used Chrome for debugging but they way you explained your methodical approach will be helpful. I saw it was off the margin. had not thought of the parent class.
    Great advice.
    D


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
  •