transform ie8
Ik probeer een responsive website te maken en gebruik om mijn content te verdelen "transform" vlakken.
Het probleem is dat <=ie8 hier niet mee om kan gaan. Kan iemand mij helpen om dit toch goed te krijgen? (ps. Sorry dat de css niet echt mooi is, dit heeft een wat "minder" ervaren collega gemaakt en samen proberen we een oplossing te vinden voor het transform probleem alvorens de css te optimaliseren;) )
html
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="menubar">
Hier de menubar
</div>
<section class="schuinebg-container">
<div class="bgblauw">
<div class="schuinebg1">
<article class="schuinebg-content">
<h3>Content hier</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
<div class="schuinebg2">
<article class="schuinebg-content">
<h3>Diensten</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
</div>
<div class="bggrijs">
<div class="schuinebg3">
<article class="schuinebg-content">
<h3>Referenties</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
<div class="schuinebg4">
<article class="schuinebg-content">
<h3>Over ons</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
</div>
<div class="bgwit">
<div class="schuinebg5">
<article class="schuinebg-content">
<h3>Contact</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
</div>
</section>
</body>
</html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<div class="menubar">
Hier de menubar
</div>
<section class="schuinebg-container">
<div class="bgblauw">
<div class="schuinebg1">
<article class="schuinebg-content">
<h3>Content hier</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
<div class="schuinebg2">
<article class="schuinebg-content">
<h3>Diensten</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
</div>
<div class="bggrijs">
<div class="schuinebg3">
<article class="schuinebg-content">
<h3>Referenties</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
<div class="schuinebg4">
<article class="schuinebg-content">
<h3>Over ons</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
</div>
<div class="bgwit">
<div class="schuinebg5">
<article class="schuinebg-content">
<h3>Contact</h3>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ut turpis augue. Quisque non mollis lorem, eget ornare sem. Ut eget lacinia risus. Proin eu placerat elit. Aliquam vel est non velit volutpat consequat. Quisque eu tempus arcu. Ut at enim porttitor, condimentum tortor quis, ultrices risus. Aenean vulputate, augue eget aliquet ullamcorper, tortor purus vestibulum eros, non consectetur nisl turpis vel metus. Nam nec adipiscing massa. Nullam et mauris eu lorem tristique tempus in sit amet ligula. Cras convallis odio libero, vel aliquet ante cursus quis. Donec iaculis, mauris id pretium tincidunt, risus dui vehicula velit, ut tempus diam turpis nec odio. Mauris mollis egestas nisl, at imperdiet nunc fermentum nec. Duis ut mollis nisl.
<br/><br/>
Aenean accumsan purus nec ornare scelerisque. Praesent sapien dui, ullamcorper non neque tincidunt, volutpat molestie nunc. Donec a purus id ipsum congue lacinia in et mauris. Nunc sed faucibus lorem. Nam molestie ante quis est vehicula commodo. Aenean facilisis tristique velit a condimentum. Aliquam nec fringilla sem. Mauris quis mattis neque. Integer eleifend porttitor nibh ac tempus.
</article>
</div>
</div>
</section>
</body>
</html>
css
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
html, body{
margin: 0;
padding: 0;
}
.menubar{
background:white;
}
.bgblauw {
background: #8accde;
}
.bggrijs{
background: #a9a9a9;
}
.bgwit{
background: white;
}
.schuinebg-container{
width: 100%;
overflow: hidden;
/*padding-top: 150px;*/
}
.schuinebg1{
margin: 0 -50px;
transform-origin: left center;
background: #8accde;
transform: rotate(-4deg);
}
.schuinebg2{
margin: 0 -50px;
transform-origin: left center;
background: white;
transform: rotate(4deg);
margin-top: -200px;
}
.schuinebg3{
margin: 0 -50px;
transform-origin: left center;
background: #a9a9a9;
transform: rotate(-4deg);
}
.schuinebg4{
margin: 0 -50px;
transform-origin: left center;
background: #8accde;
transform: rotate(4deg);
margin-top: -200px;
}
.schuinebg5 {
margin: 0 -50px;
transform-origin: left center;
background: white;
transform: rotate(-4deg);
}
.schuinebg-content{
margin: 0 auto;
}
.schuinebg1 .schuinebg-content h3{
color: white;
}
.schuinebg2 .schuinebg-content h3{
color: #4c97ce;
}
.schuinebg3 .schuinebg-content h3{
color: white;
}
.schuinebg4 .schuinebg-content h3{
color: white;
}
.schuinebg5 .schuinebg-content h3{
color: #4c97ce;
}
.schuinebg1 .schuinebg-content{
transform: rotate(4deg);
color: white;
padding: 80px 100px 200px 100px;
}
.schuinebg2 .schuinebg-content{
transform: rotate(-4deg);
color: #4c97ce;
padding: 80px 100px 250px 100px;
}
.schuinebg3 .schuinebg-content{
transform: rotate(4deg);
color: white;
padding: 80px 100px 200px 100px;
}
.schuinebg4 .schuinebg-content{
transform: rotate(-4deg);
color: white;
padding: 80px 100px 250px 100px;
}
.schuinebg5 .schuinebg-content{
transform: rotate(4deg);
color: #4e4e4e;
padding: 80px 100px 200px 100px;
}
margin: 0;
padding: 0;
}
.menubar{
background:white;
}
.bgblauw {
background: #8accde;
}
.bggrijs{
background: #a9a9a9;
}
.bgwit{
background: white;
}
.schuinebg-container{
width: 100%;
overflow: hidden;
/*padding-top: 150px;*/
}
.schuinebg1{
margin: 0 -50px;
transform-origin: left center;
background: #8accde;
transform: rotate(-4deg);
}
.schuinebg2{
margin: 0 -50px;
transform-origin: left center;
background: white;
transform: rotate(4deg);
margin-top: -200px;
}
.schuinebg3{
margin: 0 -50px;
transform-origin: left center;
background: #a9a9a9;
transform: rotate(-4deg);
}
.schuinebg4{
margin: 0 -50px;
transform-origin: left center;
background: #8accde;
transform: rotate(4deg);
margin-top: -200px;
}
.schuinebg5 {
margin: 0 -50px;
transform-origin: left center;
background: white;
transform: rotate(-4deg);
}
.schuinebg-content{
margin: 0 auto;
}
.schuinebg1 .schuinebg-content h3{
color: white;
}
.schuinebg2 .schuinebg-content h3{
color: #4c97ce;
}
.schuinebg3 .schuinebg-content h3{
color: white;
}
.schuinebg4 .schuinebg-content h3{
color: white;
}
.schuinebg5 .schuinebg-content h3{
color: #4c97ce;
}
.schuinebg1 .schuinebg-content{
transform: rotate(4deg);
color: white;
padding: 80px 100px 200px 100px;
}
.schuinebg2 .schuinebg-content{
transform: rotate(-4deg);
color: #4c97ce;
padding: 80px 100px 250px 100px;
}
.schuinebg3 .schuinebg-content{
transform: rotate(4deg);
color: white;
padding: 80px 100px 200px 100px;
}
.schuinebg4 .schuinebg-content{
transform: rotate(-4deg);
color: white;
padding: 80px 100px 250px 100px;
}
.schuinebg5 .schuinebg-content{
transform: rotate(4deg);
color: #4e4e4e;
padding: 80px 100px 200px 100px;
}
Gewijzigd op 15/08/2014 01:06:16 door Davey Mat
Er zijn nog geen reacties op dit bericht.