css - Overlapping elements within a square grid -

-

i’ve implement layout based on square grid. shown on following image, elements have overlap responsive within grid. (the squares offset on x-axis , overlap 1 grid cell on y-axis.)

http://i.stack.imgur.com/9bz5g.jpg

does know how achieve effect? i'm using framework foundation 6. i’d prefer solution without javascript. can’t use foundation .#-push-# , .#pull-# classes because shift elements inwards , 2 squares have in separate rows.

i’ve set jsfiddle containing 2 squares. 

.square {    background: #f00;    position: relative;  }    .square:after {    content: "";    display: block;    padding-bottom: 100%;  }    .content {    position: absolute;    width: 100%;    height: 100%;  }    .dark {    background: #cbcbcb;  }    .light {    background: #dedede;  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css" rel="stylesheet"/>  <div class="row">    <div class="small-12 columns">      <div class="row">        <div class="small-8 columns end">          <div class="square dark">            <div class="content">test</div>          </div>        </div>      </div>      <div class="row">        <div class="small-6 small-offset-6 columns end">          <div class="square light">            <div class="content">test</div>          </div>        </div>      </div>    </div>  </div>

many in advance help.

it seems work if calculate offset percent , mind column spacing. therefore adjustet snippet , added square 4 colums:

.square {    background: #f00;    position: relative;  }    .square:after {    content: "";    display: block;    padding-bottom: 100%;  }    .content {    position: absolute;    width: 100%;    height: 100%;  }    .dark {    background: #cbcbcb;  }    .light {    background: #dedede;  }    /* new */  .small-6.columns.overlap-top > .square {    margin-top: calc(-33.3% + 1.33*0.625rem); // 1 third 33.3% minus 1.33 times col spacing  }    .small-4.columns.overlap-top > .square {    margin-top: calc(-50% + 1*0.625rem); // 1 half 50% minus 1 times col spacing  }    @media screen , (min-width: 40em) {    .small-6.columns.overlap-top > .square {     margin-top: calc(-33.3% + 1.33*0.9375rem);    }      .small-4.columns.overlap-top > .square {      margin-top: calc(-50% + 1*0.9375rem);    }  }
<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.0/foundation.css" rel="stylesheet"/>  <div class="row">    <div class="small-12 columns">      <div class="row">        <div class="small-8 columns end">          <div class="square dark">            <div class="content">square 1</div>          </div>        </div>      </div>      <div class="row">        <!-- new class overlap-top -->        <div class="small-6 small-offset-6 columns overlap-top end">          <div class="square light">            <div class="content">square 2</div>          </div>        </div>      </div>      <!-- new square -->      <div class="row">        <div class="small-4 small-offset-4 columns overlap-top end">          <div class="square dark">            <div class="content">square 3</div>          </div>        </div>      </div>    </div>  </div>

jsfiddle: https://jsfiddle.net/jwt0k1pw/1/

hope helps!


Comments

Post a Comment

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

-
i have spring project , try make use spring boot , run @ embadded tomcat following : https://spring.io/guides/gs/rest-service/ this application //@configuration //@enableaspectjautoproxy @springbootapplication @componentscan(basepackages = "gux.prome") public class application { public static void main(string[] args) { springapplication.run(application.class, args); } } if use maven command: mvn spring-boot:run , project starts fine, need debug , run main method @ intelij, exception occurs: exception in thread "main" java.lang.illegalargumentexception: cannot instantiate interface org.springframework.context.applicationlistener : org.springframework.boot.logging.classpathloggingapplicationlistener @ org.springframework.boot.springapplication.createspringfactoriesinstances(springapplication.java:414) @ org.springframework.boot.springapplication.getspringfactoriesinstances(springapplication.java:394) @ org.springframework.bo...
Read more

reactjs - React router and this.props.children - how to pass state to this.props.children -

-
i'm using react-router first time , don't know how think in yet. here's how i'm loading components in nested routes. entry point .js reactdom.render( <router history={hashhistory} > <route path="/" component={app}> <route path="models" component={content}> </route> </router>, document.getelementbyid('app') ); app.js render: function() { return ( <div> <header /> {this.props.children} </div> ); } so child of app content component sent in. i'm using flux , app.js has state , listens changes, don't know how pass state down this.props.children. before using react-router app.js defines children explicitly, passing state natural don't see how now. using couple of react helper methods can add state, props , whatever else this.props.children render: function() { var children = react.ch...
Read more

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -

-
i have excel workbook used generate quotations customers. there main page user inputs data, , there buttons generate various pdfs , send them customer. however, 1 user consistently getting error preventing generating , sending pdfs. i beleive "microsoft windows common controls 6.0 (sp6)". it's installed on users' computers. on mine, location "c:\windows\syswow64\mscomctl.ocx" on others "c:\windows\system32\mscomctl.ocx" the user experiencing issues on 32-bit machine, "mscomctl.ocx" file should in system32. have manually put in there, , pointed common controls reference in vba it. issue seems keep reverting looking in syswow64. since folder doesn't exist, can't find it, , can't produce pdfs. i thought perhaps issue user running older version of office (2007) there users on 2013 , 2016. thought perhaps mixture of 64-bit , 32-bit users. user gets sent workbook other users (as quotation process goes further, gets passed ...
Read more