Bij resizen loopt pagina verkeerd
Ik heb een half jaar geleden een website gemaakt namelijk deze:
http://www.ellens-art.nl.
Maar nu liep de gebruiker tegen een probleem aan, als het scherm klein is (beeldscherm). Dan zet hij de drie css div's onder elkaar. Dit kun je ook zien door naar die site te gaan en rechtsbovening op formaat verkleinen te klikken.
Ik heb geen idee wat er fout gaat, het was al lastig genoeg omdat de background van de linker div moet overlopen naar het middenblok. (2 plaatjes geslitst).
Ik heb vanalles geprobeerd maar dit is mijn 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
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
@charset "utf-8";
/* CSS Document */
html{
height:100%;
}
body {
text-align:center; color:#6FFF4F;
background-color: #1F1F1F;
border:none;
height: 100%;
margin: 0px;
}
a:link{
text-decoration: none; color:#6FFF4F;
border:none;
border-style: none;
border-width: 0px;
}
a:visited{
text-decoration: none; color:#6FFF4F;
border:none;
border-style: none;
border-width: 0px;
}
a:hover{
text-decoration: none; color: #000000;
border:none;
border-style: none;
}
#linkervlak{
background-image:url(banner-test-links.png);
overflow:hidden;
float: left;
width: 21%;
height: 768px;
background-repeat:no-repeat;
background-position:right top;
}
img{
border: none;
background-color:none;
}
#middenblok{
float: left ;
width: 59%;
height: 768px;
text-align:left; color:#6FFF4F;
font-family: "Comic Sans MS";
background-position: top left;
background-repeat: no-repeat;
background-color: #333333; elevation:level;
}
#rechtervlak{
background-image:url(banner-test-rechts.png);
float: left;
width: 20%;
height: 768px;
background-repeat: no-repeat;
overflow:hidden;
}
/* CSS Document */
html{
height:100%;
}
body {
text-align:center; color:#6FFF4F;
background-color: #1F1F1F;
border:none;
height: 100%;
margin: 0px;
}
a:link{
text-decoration: none; color:#6FFF4F;
border:none;
border-style: none;
border-width: 0px;
}
a:visited{
text-decoration: none; color:#6FFF4F;
border:none;
border-style: none;
border-width: 0px;
}
a:hover{
text-decoration: none; color: #000000;
border:none;
border-style: none;
}
#linkervlak{
background-image:url(banner-test-links.png);
overflow:hidden;
float: left;
width: 21%;
height: 768px;
background-repeat:no-repeat;
background-position:right top;
}
img{
border: none;
background-color:none;
}
#middenblok{
float: left ;
width: 59%;
height: 768px;
text-align:left; color:#6FFF4F;
font-family: "Comic Sans MS";
background-position: top left;
background-repeat: no-repeat;
background-color: #333333; elevation:level;
}
#rechtervlak{
background-image:url(banner-test-rechts.png);
float: left;
width: 20%;
height: 768px;
background-repeat: no-repeat;
overflow:hidden;
}
ik zal het proberen.