The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Tricky CSS question kindly help me

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #39817

    Hello Friends,

    i did some custom code, i have been working with squarespace

    problem is that.. damn thing doesn’t scroll properly. I have tried edigitng the css with no avail i was thinking my be some one could help me out..

    see the page:

    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
    audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
    audio:not([controls]) { display: none; }
    [hidden] { display: none; }
    html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    body { margin: 0; font-size: 13px; line-height: 1.231; }
    body, button, input, select, textarea { font-family: sans-serif; color: #222; }

    /*Define Accordion box*/
    .accordion { width:830px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }

    /*General Accordion****************************************************************************/
    /*Set style of open slide*/
    .accordion section:target { background:#FFF; padding:10px;}
    .accordion section:target:hover { background:#FFF; }
    .accordion section:target h2 {width:100%;}
    .accordion section:target h2 a{ color:#333; padding:0;}
    .accordion section:target p {display:block;}
    .accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }

    /*set style of closed slide*/
    .accordion section{ float:left; overflow:hidden; color:#333; cursorointer; background: #333; margin:3px; }
    .accordion section:hover {background:#444;}
    .accordion section p { display:none; }
    .accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
    .accordion section:nth-child(1):after{content:’1′;}
    .accordion section:nth-child(2):after{content:’2′;}
    .accordion section:nth-child(3):after{content:’3′;}
    .accordion section:nth-child(4):after{content:’4′;}
    .accordion section:nth-child(5):after{content:’5′;}
    /*End General Accordion****************************************************************************/

    /*Horizontal Accordion *********************************************************************/
    .horizontal section{ width:5%; height:250px;
    -moz-transition:width 0.2s ease-out;
    -webkit-transition:width 0.2s ease-out;
    -o-transition:width 0.2s ease-out;
    -ms-transition:width 0.2s ease-out;
    transition:width 0.2s ease-out;

    /*Position the number of the slide*/
    .horizontal section:after{top:140px;left:15px;}

    /*Header of closed slide*/
    .horizontal section h2 {
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width:240px; position:relative; left:-100px; top:85px;

    /*On mouse over open slide*/
    .horizontal :target{ width:73%;height:230px; }
    .horizontal :target h2{ top:0px;left:0;
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    /*End Horizontal Accordion *********************************************************************/
    /*Vertical Accordion *************************************************************************/
    .vertical section{ width:100%; height:40px;
    -webkit-transition:height 0.2s ease-out;
    -moz-transition:height 0.2s ease-out;
    -o-transition:height 0.2s ease-out;
    -ms-transition:height 0.2s ease-out;
    transition:height 0.2s ease-out;
    /*Set height of the slide*/
    .vertical :target{ height:250px; width:97%; }

    .vertical section h2 { position:relative; left:0; top:-15px; }

    /*Set position of the number on the slide*/
    .vertical section:after{ top:-60px;left:810px;}
    .vertical section:target:after{ left:-9999px;}

    looking for help…. cany any one suggest me where i did mistake

    thanks in advanced

    web design company

    Kitty Giraudel

    Please, make a reduced test case on CodePen or JSFiddle.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.