- This topic is empty.
-
AuthorPosts
-
May 30, 2010 at 8:56 am #29194Jerm993Member
Hey, I’m working on a project that uses the anything slider. I’m not very strong with jquery or js, so i used the anything slider and restyled it to fit the page. Long story short i can’t get it to round the corners via, …border-radius… , Could there be something in Chris’s jquery preventing that? Anyway i’ve attached the css, I’ve changed a few small things background, arrow positions etc., I’ve tried placing the -webkit-border-radius:; in every spot that could make sense, in the .anythingslider class in the .wrapper, even the .wrapper ul. No rounded corners.
Thanks in advance,
Jeremy Carlsten
The CSS:
Code:/*
anythingSlider v1.2By Chris Coyier: https://css-tricks.com Edited By: Jeremy Carlsten
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/.anythingSlider { width: 760px; height: 360px; position: relative; margin: 50px auto 15px;}
.anythingSlider .wrapper { width: 680px; overflow: auto; height: 341px; margin: 0 40px; position: absolute; top: 0; left: 0; }/* Width below is max for Opera */
.anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; background: #0A0C0C;/* Fall Back */ background: rgba(10, 12, 12, 0.7); margin: 0; padding: 20px; }
.anythingSlider ul li { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
.anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward { background-position: 0 0; right: 0px; }
.anythingSlider .back { background-position: -67px 0; left: 0px; }
.anythingSlider .forward:hover { background-position: 0 -197px; }
.anythingSlider .back:hover { background-position: -67px -197px; }/*
Prevents
*/
.anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; }May 30, 2010 at 5:47 pm #76753Jerm993MemberTurns out the background was in .wrapper ul <– wonders why Chris put it there^^ where it needed to be in .wrapper I dont know how as there was only one background setting but it was causing a double background… thing, it that covered up the rounded corners with square ones. I noticed it after i gave up and figured i would try a drop shadow instead, the shadow magically bent into no where, some trial and error , and now i got it working.
Fixed code:
Code:/*
anythingSlider v1.2By Chris Coyier: https://css-tricks.com Edited By: Jeremy Carlsten
with major improvements by Doug Neiner: http://pixelgraphics.us/
based on work by Remy Sharp: http://jqueryfordesigners.com/
*/.anythingSlider { width: 760px; height: 360px; position: relative; margin: 50px auto 15px; }
.anythingSlider .wrapper { width: 680px; height: 341px; overflow: hidden; margin: 0 40px; position: absolute; top: 0; left: 0; background: #0A0C0C;/* Fall Back */ background: rgba(10, 12, 12, 0.6); -webkit-box-shadow: 3px 3px 3px #000; -webkit-border-radius: 20px; }/* Width below is max for Opera */
.anythingSlider .wrapper ul { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; margin: 0px; padding: 30px 10px; }
.anythingSlider ul li { display: block; float: left; padding: 0; height: 317px; width: 680px; margin: 0; }
.anythingSlider .arrow { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward { background-position: 0 0; right: 0px; }
.anythingSlider .back { background-position: -67px 0; left: 0px; }
.anythingSlider .forward:hover { background-position: 0 -197px; }
.anythingSlider .back:hover { background-position: -67px -197px; }/*
Prevents
*/
.anythingSlider .wrapper ul ul { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li { float: none; height: auto; width: auto; background: none; } -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.