Grow your CSS skills. Land your dream job.

Code Slider Centering on 125%+ & Box Shadow Issue

  • MBM
    # June 1, 2012 at 12:02 pm

    I’ve centred code slider with the following :

    .coda-slider-wrapper {position:relative;margin: 0 auto;width:50%;overflow:hidden;}

    And added a box shadow effect :

    -webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    -moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);}

    The box shadow is splling out of the slider frame. When I increase the page zoom level the slider stays in the center of the page but at 125% and over the text flows out of the container and scrollbars appear at the bottom of the panel despite adding overflow:hidden to the css. How do I make the panel, text and box shadow resize and stay in the center and get rid of the scrollbars?

    http://mbmitservices.co.uk/TBSC/index.html

    Full Coda slider css :

    /* Insignificant stuff, for demo purposes */

    body { padding: 20px }
    .panel h2.title { margin-bottom: 10px }
    noscript div { background: #ccc; border: 1px solid #900; margin: 20px 0; padding: 15px;}

    /* Most common stuff you'll need to change */

    .coda-slider-wrapper {position:relative;margin: 0 auto;width:50%;overflow:hidden;
    -webkit-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    -moz-box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);
    box-shadow:5px 5px 1.5em hsla(0, 0%, 0%, 1.0);}
    .coda-slider { background: #ebebeb }

    /* Use this to keep the slider content contained in a box even when JavaScript is disabled */
    .coda-slider-no-js .coda-slider { height: 200px; overflow: auto !important; padding-right: 20px }

    /* Change the width of the entire slider (without dynamic arrows) */
    .coda-slider, .coda-slider .panel { width: 800px; height:850px;}

    /* Change margin and width of the slider (with dynamic arrows) */
    .coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 600px;}
    .coda-slider-wrapper.arrows .coda-slider { margin: 0 10px }

    /* Arrow styling */
    .coda-nav-left a, .coda-nav-right a { background: #000; color: #fff; padding: 5px; width: 100px; }

    /* Tab nav */
    .coda-nav ul li a.current { background: #39c; }

    /* Panel padding */
    .coda-slider .panel-wrapper { padding: 20px;}

    /* Preloader */
    .coda-slider p.loading { padding: 20px; text-align: center; }

    /* Don't change anything below here unless you know what you're doing */

    /* Tabbed nav */
    .coda-nav ul { clear: both; display: block; margin: auto; overflow: hidden;}
    .coda-nav ul li { display: inline }
    .coda-nav ul li a { background: #000; color: #fff; display: block; float: left; margin-right: 1px; padding: 3px 6px; text-decoration: none;
    font-family: 'PT Sans Narrow', sans-serif; font-size:18px;}

    /* Miscellaneous */
    .coda-slider-wrapper { clear: both; overflow: auto }
    .coda-slider { float: left; overflow: hidden; position: relative }
    .coda-slider .panel { display: block; float: left }
    .coda-slider .panel-container { position: relative }
    .coda-nav-left, .coda-nav-right { float: left }
    .coda-nav-left a, .coda-nav-right a { display: block; text-align: center; text-decoration: none }
Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".