Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

How would you achieve this?

Discussion in 'Website Coding & Programming Forum:' started by bigdave, Jun 9, 2015.

  1. bigdave

    bigdave Moderator Staff Member

    I need to achieve this effect where the blue swoosh hangs out of the slider and slightly into the body below.

    [​IMG]

    My initial though was to sit a .png over the top using
    Code:
    display:block; 
    marging-top:-14em auto 0; 
    position:relative; 
    z-index:99;
    This worked at 1100px width but it just doesnt work as the screen gets smaller. Yeah it can be fixed with media queries but it'd need A LOT of them!

    The only alternative I can see is to include the swoosh as part of the slider image. In itself that isn't a major issue but it means a z-index and minus top margin for the body area under the slider, which in itself only shoves the issue further down the page.

    Can anyone think of a better solution?
     
  2. Paul Murray

    Paul Murray Moderator Staff Member

    What happens when you resize the viewport, I assume it moves or something? Just thinking out loud here but can you use the swoosh as a background image and set "background-size:cover;" to have it fit the div size? Setting it's position to absolute will take it out of the flow completely (remember to set it's parent to relative) so it won't affect the positioning of any elements and won't require a negative margin on the body.

    I had a similar issue with a background image on a site I've just finished building and I had to basically check the positioning by hand by resizing the browser and adding in a media query to shift it's position at that viewport size. In your case I'd maybe just include the swoosh in the image itself and test your negative margin option to see if it causes any issues.
     
  3. bigdave

    bigdave Moderator Staff Member

  4. bigdave

    bigdave Moderator Staff Member

    Good idea! I'm using bxSlider for the functionality and have already defined the viewport height.. Will give it a go.
     
  5. Paul Murray

    Paul Murray Moderator Staff Member

    You'll probably need to tweak the overflow value for the slider too in order to allow the swoosh to hang outside of it, otherwise it will just be cropped off.
     
  6. Paul Murray

    Paul Murray Moderator Staff Member

    Just noticed you're using a marging rather than a margin, though I suspect this is just a mis-type rather than a typo in your live code?
     
  7. bigdave

    bigdave Moderator Staff Member



    yeah, just a typo in the post. :)
     
  8. bigdave

    bigdave Moderator Staff Member

    I'm starting to wonder if defining the height of the slide is actually the issue. The swoosh sits perfectly at the bottom of the 480px high slide frame but still wants to be 480px from the top of its parent when rescaled, despite the 480px being depreciated by a media query.

    Will try scrapping the fixed height (it was a lazy way of stopping the slides being cropped at the bottom any way).
     
  9. Paul Murray

    Paul Murray Moderator Staff Member

    Have you tried absolute positioning on the swoosh?
     
  10. bigdave

    bigdave Moderator Staff Member

    Removing the height of the slider and adding position:absolute; bottom:-2em; seems to have fixed things.

    Cheers
     

Share This Page