Auto resize, Kwicks menu at Full Screen.

[sjoerdvhal]

I am working on this: Your text to link…

If u can see i have some troubles with my css.. If u resize your page it would not automaticly resize.. Also on the left and the right side u see an edge..
I try to change this with width at 95% and change the margins but this will give also an error if u change the page..

Could somebody help me out with this?

And here my CSS:

/* This css file serves as a template for styling your kwicks.  Feel free to modify, but please make note of the comments - some of them are important. */

body {

background-color: #1d1e21;

width: 100%;

margin: 0;

padding: 0;

}



.kwicks {

/* recommended styles for kwicks ul container */

list-style: none;

position: relative;

margin: 0;

padding: 0;

display: block;

}



.kwicks li{

/* these are required, but the values are up to you (must be pixel) */

width: 35%;

height: 900px;

/*do not change these */

display: inline-block;

overflow: hidden;

padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */

}



.kwicks.horizontal li {

float: left;

width: 33.3333%;

height: 900px;

/*do not change these */

display: inline-block;

overflow: hidden;

padding: 0;  /* if you need padding, do so with an inner div (or implement your own box-model hack) */

}



#kwick_1 {

background-color: #53b388;

-moz-transform:rotate(10deg);

-webkit-transform:rotate(10deg);

-o-transform:rotate(10deg);

-ms-transform:rotate(10deg);

}



#kwick_1 img {

position:absolute;

right: -100px;

-moz-transform:rotate(-10deg);

-webkit-transform:rotate(-10deg);

-o-transform:rotate(-10deg);

-ms-transform:rotate(-10deg);

}



#kwick_2 {

background-color: #5a69a9;

-moz-transform:rotate(10deg);

-webkit-transform:rotate(10deg);

-o-transform:rotate(10deg);

-ms-transform:rotate(10deg);

}



#kwick_3 {

background-color: #c26468;

-moz-transform:rotate(10deg);

-webkit-transform:rotate(10deg);

-o-transform:rotate(10deg);

-ms-transform:rotate(10deg);

}



#content ul{

position: relative;

margin-left: 55px;

width: 100%;

display: inline-block;

margin: 0 auto;

margin-top: -100px;

display: inline-block;

overflow: hidden;

}



#content{

position:absolute;

margin: 0 auto;

margin-top: 170px;

display: inline-block;

overflow: hidden;

width: 100%;

height: 600px;

}



.kwicks horizontal{

display: inline-block;

height: 300px;

}

[Author]

Posts