CSS inhoud probleem
Dit is de site waar het omgaat: http://www.picel.nl/cms/cms.html
Je zit aan de linker kant van dit soort | staan, deze streepjes moeten binnen de div vallen
Dit is de css die daar bij hoort.
#Content{
width:800px;
height:100%;
background-color:#DFEAE9;
min-height:50px;
margin:0 auto;
border-left:1px solid #2a2a2a;
border-top:1px solid #2a2a2a;
border-right:1px solid #2a2a2a;
}
#Content_Left{
float: left;
height: 100%;
width: 575px;
min-height:50px;
}
#Content_Right{
height: 100%;
width: 25px;
float: right;
min-height:50px;
}
#Content_Center{
width: 200px;
height:100%;
/*min-height:600px;*/
background-color:#c7d6d5;
min-height:50px;
margin-left: 575px;
margin-right: 25px;
}
Dit zijn de div in het layout:
<div id="Content">
<div id="Content_Left">|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|<br />
|</div>
<div id="Content_Right">..</div>
<div id="Content_Center">//|<br />
</div>
</div>
Kan iemand mij vertellen wat het probleem is?
Alvast bedankt voor je hulp ! :D:D
Als je die een breedte en een overflow: hidden geeft, rekt hij weer mee.
Voor de breedte kun je een vast getal in pixels opgeven of een percentage.
Aangepaste css:
#Content{
width:800px;
height:100%;
background-color:#DFEAE9;
min-height:50px;
margin:0 auto;
border-left:1px solid #2a2a2a;
border-top:1px solid #2a2a2a;
border-right:1px solid #2a2a2a;
}
#Content_Left{
height: 100%;
width:575px;
overflow:hidden;
min-height:50px;
}
#Content_Right{
height: 100%;
width: 25px;
float: right;
min-height:50px;
}
#Content_Center{
width: 200px;
height:100%;
/*min-height:600px;*/
background-color:#c7d6d5;
min-height:50px;
margin-left: 575px;
margin-right: 25px;
}
nogmaals alvast bedankt voor de hulp
zie: http://www.picel.nl/cms/cms.html
Die css staat hierboven vermeld.
Gewijzigd op 01/01/1970 01:00:00 door erik den Blaauwen
Alvast bedankt.
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
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
#Content {
background-color:#D1EBDA;
border-left:1px solid #2A2A2A;
border-right:1px solid #2A2A2A;
border-top:1px solid #2A2A2A;
margin:0pt auto;
width:800px;
height:auto;
}
#Content_Left {
height:100%;
min-height:50px;
overflow:hidden;
width:575px;
float:left;
}
#Content_Right {
float:right;
height:100%;
min-height:50px;
width:25px;
}
#Content_Center {
background-color:#FFFFFF;
height:100%;
margin-left:575px;
margin-right:25px;
min-height:50px;
width:200px;
}
background-color:#D1EBDA;
border-left:1px solid #2A2A2A;
border-right:1px solid #2A2A2A;
border-top:1px solid #2A2A2A;
margin:0pt auto;
width:800px;
height:auto;
}
#Content_Left {
height:100%;
min-height:50px;
overflow:hidden;
width:575px;
float:left;
}
#Content_Right {
float:right;
height:100%;
min-height:50px;
width:25px;
}
#Content_Center {
background-color:#FFFFFF;
height:100%;
margin-left:575px;
margin-right:25px;
min-height:50px;
width:200px;
}
Hier je css die aangepast is. Nu staat alles op 1 rij, maar je achtergrond (dat blauw) loopt maar tot die 50 px of er moet meer tekst in komen te staan.
Als je meer vragen hebt hoor ik het wel.
Gewijzigd op 01/01/1970 01:00:00 door J V
De tekst in het linker tekst vak (genaamd: Content_left) gaat nog steeds over de footer heen.
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
132
133
134
135
136
137
138
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
132
133
134
135
136
137
138
body{
margin:0 auto;
/*background-color:#EBF1F0;*/
}
/*----------------- Header ---------------------*/
#Header{
width:800px;
height:100px;
background-image:url(afbeeldingen/Header_bg.png);
margin:0 auto;
border:1px solid #2a2a2a;
}
#Header_Left{
float: left;
height: 100%;
width: 569px;
padding-left:3px;
}
#Header_Right{
height: 100%;
width: 25px;
float: right;
}
#Header_Center{
width: 200px;
height:100%;
/*min-height:600px;*/
background-color:#FFFFFF;
margin-left: 575px;
margin-right: 25px;
}
/*-- style --*/
.Titel{
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
font-weight:bold;
color:#CC3300;
}
.H_klein{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
font-weight:bold;
color:#2a2a2a;
}
.H_Normaal{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
.H_Normaal_bold{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#333333;
}
/*----------------- Main ---------------------*/
#Main{
width:800px;
height:25px;
/*background-color:#EBF1F0;*/
margin:0 auto;
}
/*-- style --*/
.M_Normaal{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
/*----------------- Content --------------------*/
#Content{
width:800px;
height:100%;
background-color:#d1ebda;
min-height:50px;
margin:0 auto;
border-left:1px solid #2a2a2a;
border-top:1px solid #2a2a2a;
border-right:1px solid #2a2a2a;
}
#Content_Left{
height: 100%;
width:575px;
overflow:hidden;
min-height:50px;
}
#Content_Right{
height: 100%;
width: 25px;
float: right;
min-height:50px;
}
#Content_Center{
width: 200px;
height:100%;
/*min-height:600px;*/
background-color:#FFFFFF;
min-height:50px;
margin-left: 575px;
margin-right: 25px;
}
/*-- style --*/
/*----------------- Header ---------------------*/
#Footer{
width:800px;
height:100%;
background-color:#91c9a4;
margin:0 auto;
border-left:1px solid #2a2a2a;
border-bottom:1px solid #2a2a2a;
border-right:1px solid #2a2a2a;
}
/*-- style --*/
.F_Klein{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
}
margin:0 auto;
/*background-color:#EBF1F0;*/
}
/*----------------- Header ---------------------*/
#Header{
width:800px;
height:100px;
background-image:url(afbeeldingen/Header_bg.png);
margin:0 auto;
border:1px solid #2a2a2a;
}
#Header_Left{
float: left;
height: 100%;
width: 569px;
padding-left:3px;
}
#Header_Right{
height: 100%;
width: 25px;
float: right;
}
#Header_Center{
width: 200px;
height:100%;
/*min-height:600px;*/
background-color:#FFFFFF;
margin-left: 575px;
margin-right: 25px;
}
/*-- style --*/
.Titel{
font-family:Arial, Helvetica, sans-serif;
font-size:30px;
font-weight:bold;
color:#CC3300;
}
.H_klein{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
font-weight:bold;
color:#2a2a2a;
}
.H_Normaal{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
.H_Normaal_bold{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
color:#333333;
}
/*----------------- Main ---------------------*/
#Main{
width:800px;
height:25px;
/*background-color:#EBF1F0;*/
margin:0 auto;
}
/*-- style --*/
.M_Normaal{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#333333;
}
/*----------------- Content --------------------*/
#Content{
width:800px;
height:100%;
background-color:#d1ebda;
min-height:50px;
margin:0 auto;
border-left:1px solid #2a2a2a;
border-top:1px solid #2a2a2a;
border-right:1px solid #2a2a2a;
}
#Content_Left{
height: 100%;
width:575px;
overflow:hidden;
min-height:50px;
}
#Content_Right{
height: 100%;
width: 25px;
float: right;
min-height:50px;
}
#Content_Center{
width: 200px;
height:100%;
/*min-height:600px;*/
background-color:#FFFFFF;
min-height:50px;
margin-left: 575px;
margin-right: 25px;
}
/*-- style --*/
/*----------------- Header ---------------------*/
#Footer{
width:800px;
height:100%;
background-color:#91c9a4;
margin:0 auto;
border-left:1px solid #2a2a2a;
border-bottom:1px solid #2a2a2a;
border-right:1px solid #2a2a2a;
}
/*-- style --*/
.F_Klein{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
color:#333333;
}
Vervang je oude code door deze. Of voeg bij je content-links die float:left toe. Anders verglijk je wat je nu hebt met diegene hierboven, dan zie je het wel.
in ieder geval alvast bedankt voor het meedenken :D!
Ik zie zelf niet wat nou precies het probleem is, zal wel een klein dingetje zijn dat ik niet zie :P
Gewijzigd op 01/01/1970 01:00:00 door erik den Blaauwen
Dat kan je heel makkelijk doen.
Klik hier voor een voorbeeld en kijk goed naar de css en html
maar het is in ieder geval dat de footer mee naar onder gaat als de content langer wordt. Als de content_center langer wordt dan gaat de footer wel mee, mar zodra content_left en content_right langer worden dan gaan ze over de footer heen..
en het is dus uit eidnelijkde bedoeling dat als 1 van de drie content langer worden dat ze dan allemaal de zelfde lengte hebben. en dat de footer ook mee schuift naar beneden of boven.
wouter schreef op 14.01.2008 20:32:
Jordy , Je wilt iemand helpen Ok alles goed :) kijk eens in FF2 naar je woonwinkel hij is niet om te bezoeken of mijn scherm valt uitmekaar
Ben bang dat dat aan jezelf ligt, want ik heb hier ook FF2 en daar mankeert niets aan, plus dat al veel meer mensen het als voorbeeld gebruikt hebben. En van hun heb ik niets gehoord, dus kijk er zelf nog even naar zou ik zeggen ;).
Anders maak je even een printscreen ervan.
@TS:
Klik1
Klik2
Klik4
Hier 4 links, ik moet ze alleen nog even testen.
Edit:
Klik 3 heb ik weggehaald want die werkte alleen als de content in het midden langer werd. Klik 4 is een mooie van jan koehoorn en vind ik persoonlijk zelf de beste (ik ben niet anders gewent van Jan) dus daar zou ik even naar kijken.
Gewijzigd op 01/01/1970 01:00:00 door J V