Hallo, ik zit met een klein probleempje waar jullie misschien wel een oplossing voor hebben. Heb al gezocht op google en hier maar het kan zijn dat ik het verkeerd formuleer dat ik niks vind, maar ik vraag het zelf maar even.
Ik heb nu een website gemaakt met 1 div container, en daar 2 floating divs ingezet ( links een menu, rechts content). De div waar content in staat wordt uitgerekt als er veel tekst in staat, daardoor kwam hij dus buiten de container te staan. Dit heb ik opgelost door de container overflow:auto mee te geven. Alleen de linker div die blijft ook al geef ik height: 100% op, gewoon klein, zonder mee te rekken onder aan de rand van de container. Toen ik de overflow had uit staan, werkte height:100% wel normaal tot de bodem van de container. Nu heb ik van alles geprobeerd, ook met clear:both wat ik las op een website. Ik weet niet wat ik er aan moet doen dus kom ik hier vragen of iemand mij kan helpen met dit.
Het gaat om http://www.drift-it.nl
De code van mijn index en css bestand zijn :
CSS :
Index.php
Ik heb nu een website gemaakt met 1 div container, en daar 2 floating divs ingezet ( links een menu, rechts content). De div waar content in staat wordt uitgerekt als er veel tekst in staat, daardoor kwam hij dus buiten de container te staan. Dit heb ik opgelost door de container overflow:auto mee te geven. Alleen de linker div die blijft ook al geef ik height: 100% op, gewoon klein, zonder mee te rekken onder aan de rand van de container. Toen ik de overflow had uit staan, werkte height:100% wel normaal tot de bodem van de container. Nu heb ik van alles geprobeerd, ook met clear:both wat ik las op een website. Ik weet niet wat ik er aan moet doen dus kom ik hier vragen of iemand mij kan helpen met dit.
Het gaat om http://www.drift-it.nl
De code van mijn index en css bestand zijn :
CSS :
Cascading Stylesheet:
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
| body { background-image: url(/images/bg21.png); background-repeat: repeat-x; } A:Link{text-decoration: none;color: #000000;} A:visited {text-decoration: none;color: #000000;} A:Hover{filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); -moz-opacity: 5;} .head { background: url('/images/head-3.png'); padding:0px; height:100px; width:800px; margin-left: auto; margin-right: auto; margin-bottom: 5px; } .container1 { background: url('/images/bg1.png'); border:1px solid black; width:798px; height: 100%; margin-left: auto; margin-right: auto; overflow:auto; } .klein { background: url('/images/bg1.png'); border-right: 1px solid black; width:175px; float:left; height: 100%; } .klein_text_l { width:169px; padding:3px; padding-top:15px; padding-bottom:15px; color: #efeeee; font-weight:bold; font-size:10px; font-family: verdana; } .klein_text { width:169px; padding:3px; padding-top:15px; padding-bottom:15px; } .k_head { background: url('/images/bg3.png'); height:25px; width:100%; color: #efefef; font-weight:bold; font-size:10px; font-family: verdana; text-align:center; line-height:14pt; } .content { font-family: verdana; font-size:12px; float:right; padding:5px; position: relative; width:590px; margin: 5px 5px 5px 5px; } .extradiv { clear: both; } |
Index.php
HTML:
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
| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE> Drift-it </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> <link rel="stylesheet" type="text/css" href="style.css" /> <!--[if lte IE 6]> <style type="text/css"> /* ie png hack */ /* special thanks to Christopher Walker (http://tibetanportal.com/) for his contribution */ .container1 { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg2.png', sizingMethod=scale); } .klein { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg2.png', sizingMethod=scale); } .k_head { background-image: none ; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, src='images/bg3.png', sizingMethod=scale); } </style> <![endif]--> </HEAD> <BODY> <div class="head"></div> <div class="container1"> <div class="klein"> <div class="k_head">menu</div> <div class="klein_text_l"> <?php mosLoadModules('left'); ?> </div> <div class="k_head">who's online</div> <div class="klein_text_l"> <?php mosLoadModules('user8'); ?> </div> <div class="k_head">login</div> <div class="klein_text_l"> <?php mosLoadModules('user9'); ?> </div> </div> <div class="content"> <?php mosMainbody(); ?> </div> </div> </BODY> </HTML> |
:strip_icc():strip_exif()/u/62639/tm.jpg?f=community)
