Css overlap probleem...
Ik probeer te maken dat de rounded corners beneden aan de pagina automatisch verschuiven naar onder als ik meer tekst toevoeg... Ik heb al veel voorbeelden bekeken maar ik snap nog niet wat ik fout doe...
Dus ik wil dat wanneer content meer tekst krijgt, rounded borders automatisch verschuifd...
Css code:
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
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
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
/* CSS Document */
body
{
background: #2449a0 url(afbeeldingen/Background.png) repeat-x;
margin:0 auto;
padding:0;
}
.Page
{
width: 812px;
height: 963px;
margin:0 auto;
}
.menu
{
width: 812px;
height: 36px;
margin: 0 auto;
}
#Banner
{
width: 812px;
height: 151px;
margin: 0 auto;
}
#Banner img
{
margin-left: 5px;
margin-top: 25px;
}
#Top_img
{
width: 806px;
height: 247px;
margin: 0 auto;
}
#Top_img img
{
width: 806px;
height: 225px;
margin-top: 22px;
}
#Content
{
width: 806px;
height: 475px;
position: relative;
background: #AFADAD url(afbeeldingen/Grey_bg.png) repeat-x;
margin: 0 auto;
}
#Content div.White1
{
width: 528px;
height: 476px;
background: url(afbeeldingen/Bg_light.png) repeat;
margin-top: 0px;
margin-left: 8px;
float: left;
}
#Content div.White2
{
width: 463px;
height: 382px;
margin-top: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #3a2c2c;
margin-left: 25px;
font-size: 12px;
}
#Content div.blue
{
font-family: Arial, Helvetica, sans-serif;
color: #4c71be;
font-size: 13px;
}
#Content div.Dark
{
width: 253px;
height: 476px;
background: url(afbeeldingen/Dark_bg.png) repeat-y;
float: left;
margin-left: 7px;
}
#Content div.Dark2
{
width: 225px;
height: 324px;
margin-top: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin-left: 13px;
font-size: 12px;
}
#Content div.Date
{
font-size: 12px;
font-family: Tahoma;
color: #efe78c;
}
#Rounded
{
width: 806px;
height: 13px;
position: relative;
background: url(afbeeldingen/Small_grey.png) repeat;
margin: 0 auto;
}
#Rounded div.Rounded1
{
width: 528px;
height: 9px;
float: left;
margin-left: 8px;
margin-top: 0px;
}
#Rounded div.Rounded2
{
width: 253px;
height: 9px;
float: left;
margin-left: 7px;
margin-top: 0px;
}
#Rounded div.Rounded3
{
width: 805px;
height: 8px;
float: left;
margin-left: 0px;
margin-top: 0px;
}
body
{
background: #2449a0 url(afbeeldingen/Background.png) repeat-x;
margin:0 auto;
padding:0;
}
.Page
{
width: 812px;
height: 963px;
margin:0 auto;
}
.menu
{
width: 812px;
height: 36px;
margin: 0 auto;
}
#Banner
{
width: 812px;
height: 151px;
margin: 0 auto;
}
#Banner img
{
margin-left: 5px;
margin-top: 25px;
}
#Top_img
{
width: 806px;
height: 247px;
margin: 0 auto;
}
#Top_img img
{
width: 806px;
height: 225px;
margin-top: 22px;
}
#Content
{
width: 806px;
height: 475px;
position: relative;
background: #AFADAD url(afbeeldingen/Grey_bg.png) repeat-x;
margin: 0 auto;
}
#Content div.White1
{
width: 528px;
height: 476px;
background: url(afbeeldingen/Bg_light.png) repeat;
margin-top: 0px;
margin-left: 8px;
float: left;
}
#Content div.White2
{
width: 463px;
height: 382px;
margin-top: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #3a2c2c;
margin-left: 25px;
font-size: 12px;
}
#Content div.blue
{
font-family: Arial, Helvetica, sans-serif;
color: #4c71be;
font-size: 13px;
}
#Content div.Dark
{
width: 253px;
height: 476px;
background: url(afbeeldingen/Dark_bg.png) repeat-y;
float: left;
margin-left: 7px;
}
#Content div.Dark2
{
width: 225px;
height: 324px;
margin-top: 30px;
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
margin-left: 13px;
font-size: 12px;
}
#Content div.Date
{
font-size: 12px;
font-family: Tahoma;
color: #efe78c;
}
#Rounded
{
width: 806px;
height: 13px;
position: relative;
background: url(afbeeldingen/Small_grey.png) repeat;
margin: 0 auto;
}
#Rounded div.Rounded1
{
width: 528px;
height: 9px;
float: left;
margin-left: 8px;
margin-top: 0px;
}
#Rounded div.Rounded2
{
width: 253px;
height: 9px;
float: left;
margin-left: 7px;
margin-top: 0px;
}
#Rounded div.Rounded3
{
width: 805px;
height: 8px;
float: left;
margin-left: 0px;
margin-top: 0px;
}
Pagina:
http://lostworld.be/coach/
Als iemand mij zou kunnen helpen A.u.b.?
Thx,
Jelle
je hebt een content div, met daarin drie divs:
content-header, deze krijg dit achtergrondplaatje:
content-content: deze krijgt dit achtergrondplaatje:
het plaatje laat je herhalen langs de y-as met repeat-y
LET OP: in deze div komen ook je tekstkolommen
content-footer, deze krijgt dit achtergrondplaatje:
Je reactie vind ik wel een beetje gek. Aan de lay-out te zien heb je aardig wat CSS ervaring maar uit je reactie blijkt anders. Heb je de hele lay-out zelf gemaakt? Of ben je een template aan het tweaken?
Ik heb nog nooit paginas gemaakt die automatisch vergroten/verkleinen...
Ik zal proberen wat je hierboven zegt...
Heb dus gedaan wat je zij:
www.lostworld.be/coach/index2.htm
Het werkt nog steeds niet...Ook niet met de overflow hidden en de width 100%.. Als ik nu &bnsps zet gebeurt er het zelfde...ze gaan gewoon over de rounded corners ipv dat ze de rounded corners wegduwen naar onder.