Rotating div's, absolute positioning and responsive-ness

Question

I'm trying to code a design I've made in photoshop earlier, but I have the feeling I'm not doing things the 'right' way and that there should be another, better way, to achieve what I want.

To rotate the div's and keep it a link with the 100% width a href attribute, I've used transform. But this way everything inside get's turned 45deg too. Is there maybe a better way to achieve it? Because I want to add Jquery later, and it would be nice not having to rotate every little thing that I add in these divs.

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);

I would really like the website to be responsive, but for some reason the height doesn't want to join in with the rest of the percentages. For example, I want div#midden to be 24% of the height but keep it square. I can't figure out how to do this. http://jsfiddle.net/AeFcY/1/

And, last, the positioning. I want the whole thing to be in the center of the page, but the only way I figured out to do this with margin: 0 auto and absolute positioning. But, this gives one hell of a job positioning the divs next to each other... Right now I've positioned them by changing the 'right' attribute from 855px to -855px.

HTML code:

<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8" />
<title>imandragrafie</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

<body>

<div id="wrapper">
    <div id="links" class="zijden draai"><a href="#"></a></div>
    <div id="midden" class="draai"><a href="#"></a></div>
    <div id="rechts" class="zijden draai"><a href="#"></a></div>
</div>
</body>
</html>

CSS:

html, body, div#wrapper{
    background-color:#1b1b1b;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

div.draai{
    display:inline;
    padding:0;

    overflow:hidden;
    position:absolute;

    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);

    background-size: cover;
}

div#midden{
    width:333px;
    height:333px;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
    margin:auto;
    background-image:url('../images/home_midden.png');
}

div.zijden{
    width:241px;
    height:241px;
    top: 0;
    bottom: 0;
    margin:auto;
    background-color:blue;
}

div#links{
    background-image:url('../images/home_links.png');
    left: 0;
    right: 855px;
}

div#rechts{
    background-image:url('../images/home_rechts.png');
    left: 0;
    right: -855px;

}

a{
    width:100%;
    height:100%;
    padding:0;
    margin:0;
    position:absolute;
    right:0;
}

I would have used rotated image for this purpose... i see no advantage of rotating them via CSS here... — Aamir Shahzad, Jul 05 '14 at 11:55
So what's the right solution with the content in the boxes: Rotate the 'wrapper' of the content in the boxes -45 degrees? Would that work? — Lisa, Jul 05 '14 at 11:58

score 5 · Accepted Answer · edited May 23 '17 at 12:07

I figured out how to do this!

I've used these sources: http://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/ How to vertically center a div for all browsers?

I had to apply multiple wrappers and by using padding-bottom I managed to get responsive squares. JSfiddle: http://jsfiddle.net/ZC9et/

HTML:

<div class="outer"><div class="middle"><div class="wrap"> <!-- Open .wrap -->

  <div class="box side left"><!-- Open .box -->
    <a href="#" class="boxInner innerLeft"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  <div class="box"><!-- Open .box -->
    <a href="#" class="boxInner innerMiddle"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  <div class="box side right"><!-- Open .box -->
    <a href="#" class="boxInner innerRight"><!-- Open .boxInner -->
    </a><!-- Close .boxInner -->
  </div><!-- Close .box -->

  </div></div></div><!-- Close .wrap -->

CSS:

body {
        margin: 0;
        padding: 0;
        background-color:#1b1b1b;
    }

    .outer{
        display: table;
        position: absolute;
        height: 100%;
        width: 100%;
    }
    .middle{
        display: table-cell;
        vertical-align: middle;
    }
    .wrap {
        margin: 10px;
        margin-left: auto;
        margin-right: auto; 
        height:100%;
        overflow: hidden;


        -webkit-box-align:center;
        -webkit-box-pack:center;
        display:-webkit-box;
    }

    .box {
        float: left;
        position: relative;
        width: 24.45%;
        padding-bottom: 24.45%;

        margin:auto;

        top:0;
        bottom: 0;
        left: 0;
        right: 0;

        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .side {
        width: 17.57%;
        padding-bottom: 17.57%;
    }

    .left{
        left:-8%;
    }

    .right{
        left:8%;
    }

    .boxInner {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
        overflow: hidden;

        background-size: cover;
        background-repeat:no-repeat;
    }

    .innerLeft{
        background-color:blue;
    }
    .innerMiddle{
        background-color:blue;
    }
    .innerRight{
        background-color:blue;
    }

Rotating div's, absolute positioning and responsive-ness

1 Answers1