treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] PSD to CSS conversion problem

  • Dear Forum users,

    From my designer I got a complete PSD and I created a valid html/css + script implementation. Only for slider I got a problem. Please, check my website http://fog7.org and its main slider, right after the menu. Well, I used javascript, so the slider (li element) is moving, but this is the real design image: http://www.picz.ge/img/s1/1301/30/f/f28fa27b221c.jpg

    Do you see the difference? I have marked with red line of what I am not able to do . I tried everything, but maybe there is a trick for such thing? I'm looking for your help to finish the design completely.

    Any help will be much appreciated. Thanks in advance

  • a.current:before, a.current:after {
         border-color: transparent #099edd transparent transparent;
         border-style: solid;
         border-width: 0 15px 15px 0;
         content: "";
         height: 20px;
         width: 0;
         position: absolute;
         top: 0;
         left: -12px;
         z-index: 1;
    }
    
    a.current:after {
         border-width: 15px 15px 0px 0px;
         top: auto;
         bottom: 0;
    }
    
  • Thanks. Will try it.

  • I should have added that you'll need to remove the existing :after ruleset because it's more specific and will overrule these (your selectors are unnecessarily long).

  • Dear wolfcry911! It worked! Thanks a lot! :D