Content div springt uit container
De bedoeling van mijn site is simpel:
Ik wil graag dat mijn website in de lengte meerekt, afhankelijk van de lengte van de tekst.
Dit krijg ik niet echt voor elkaar.
Mijn probleem is nu, dat wanneer ik een tekst schrijf die 'te lang' is, deze óver mijn footer heenvalt, en dus uit zijn container. Het is de bedoeling dat de tekst tegen de footer aan moet 'botsen', en deze dus omlaag moet duwen.
Dit wil echter niet echt lukken.
Voor het zien van mijn probleem, zie http://www.tomcolen.nl
De groene dashed lijn is de container div van het verticale menu, en de content. De blauwe lijn is de content div.
Hier mijn betreffende code:
style.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
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
/*Verticaal Menu*/
#container {
position: relative;
width: 100%;
border: 1px dashed green;
}
.spacer {
clear: both;
}
#leftbar {
float: left;
margin-top: 1px;
background-color: #a31d27; /*#a30023;*/
width: 150px;
/*height: 100%;*/
color: #ffffff;
font-family: calibri, serif;
}
.lefttext {
padding-left: 0px;
font-size: 1em;
}
.lefttext ul li a {
padding: 5px;
margin: 0;
}
.lefttext ul, ul li {
list-style-type: none;
display: inline;
padding: 0;
margin: 0;
}
.lefttext a {
display: block;
padding: 0px;
margin: 0px;
line-height: 1em;
text-decoration: none;
color: #ffffff;
/*border: solid 1px;*/
}
.lefttext a:hover {
color: #ffffff;
background: #6b0017; /*#03006e;*/
}
/*CONTENT*/
#content {
position: absolute;
left: 150px;
width: 85%;
border: 1px solid blue;
}
/*FOOTER*/
#footer {
margin-top: 1px;
background-color: #6b0017; /*#03006e;*/
background-repeat: repeat-x;
height: 75px;
}
#container {
position: relative;
width: 100%;
border: 1px dashed green;
}
.spacer {
clear: both;
}
#leftbar {
float: left;
margin-top: 1px;
background-color: #a31d27; /*#a30023;*/
width: 150px;
/*height: 100%;*/
color: #ffffff;
font-family: calibri, serif;
}
.lefttext {
padding-left: 0px;
font-size: 1em;
}
.lefttext ul li a {
padding: 5px;
margin: 0;
}
.lefttext ul, ul li {
list-style-type: none;
display: inline;
padding: 0;
margin: 0;
}
.lefttext a {
display: block;
padding: 0px;
margin: 0px;
line-height: 1em;
text-decoration: none;
color: #ffffff;
/*border: solid 1px;*/
}
.lefttext a:hover {
color: #ffffff;
background: #6b0017; /*#03006e;*/
}
/*CONTENT*/
#content {
position: absolute;
left: 150px;
width: 85%;
border: 1px solid blue;
}
/*FOOTER*/
#footer {
margin-top: 1px;
background-color: #6b0017; /*#03006e;*/
background-repeat: repeat-x;
height: 75px;
}
index.php: (zonder header en menu)
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
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
<div id="container">
<div class="spacer"><!-- No Content --></div>
<div id="leftbar">
<div class="lefttext">
<ul>
<li><a href="http://www.tomcolen.nl/backup/">Hardware</a></li>
<li><a href="http://www.tomcolen.nl/backup/">Besturingssystemen</a></li>
<li><a href="http://www.tomcolen.nl/backup/">Software</a></li>
<li><a href="http://www.tomcolen.nl/backup/">Internet & Netwerk</a></li>
<li><a href="http://www.tomcolen.nl/backup/">Beveiliging & Virussen</a></li>
<li><a href="http://www.tomcolen.nl/backup/">(Web)design & Webservers</a></li>
</ul>
</div>
</div>
<div id="content">
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test
</div>
<div class="spacer"><!-- No Content --></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
<div class="spacer"><!-- No Content --></div>
<div id="leftbar">
<div class="lefttext">
<ul>
<li><a href="http://www.tomcolen.nl/backup/">Hardware</a></li>
<li><a href="http://www.tomcolen.nl/backup/">Besturingssystemen</a></li>
<li><a href="http://www.tomcolen.nl/backup/">Software</a></li>
<li><a href="http://www.tomcolen.nl/backup/">Internet & Netwerk</a></li>
<li><a href="http://www.tomcolen.nl/backup/">Beveiliging & Virussen</a></li>
<li><a href="http://www.tomcolen.nl/backup/">(Web)design & Webservers</a></li>
</ul>
</div>
</div>
<div id="content">
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test<br />
test
</div>
<div class="spacer"><!-- No Content --></div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Hopelijk kunnen jullie mij helpen :)
Mvg,
Tom
Gewijzigd op 01/01/1970 01:00:00 door Tom C
Ik heb dus nu gedaan wat jullie hebben gezegd: alle kolommen een 'float: left;' gegeven. Alleen, nu klopt het dus helemaal niet meer.
Kijk maar weer even op http://www.tomcolen.nl
De content komt nu onder het menu te staan, maar wel rechts ervan. Dus ik snap niet waarom hij er niet exact naast komt te staan.
En mijn footer is verdwenen..
Weet iemand misschien wat ik fout doe?
Of heeft iemand misschien tijd om mijn CSS aan te passen, zodat ik het wat beter begrijp?
Mvg,
Tom
EDIT:
Oke. Dit is vreemd. Op het moment dat ik dezelfde code upload, staat de website weergegeven als hierboven beschreven, als ik een minuut later refresh, ziet het er weer anders uit... =S
Nu is het probleem dat het verticale menu en de content te ver uit elkaar staan..
En mijn footer is nog steeds niet zichtbaar..
Gewijzigd op 01/01/1970 01:00:00 door Tom C
top, left enz. werken alleen bij een position:absolute. als je toch nog wilt positioneren, gebruik dan margins/padding
Maar nu staat de content ONDER het verticale menu..
Dus nu klopt het helemaal niet meer..
Ik snap er niks van..
Het is de bedoeling dat de content náást het verticale menu komt te staan
(vandaar die 150px left bij content, want het menu is 150px breed).
Maar hij komt er steeds onder, en ik weet niet waarom.
Volgens mij zou hij er gewoon naast moeten komen..
Iemand?
EDIT:
Ik heb nu in de CSS het volgende gedaan:
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
#content {
float: left;
position: absolute;
left: 150px;
width: 85%;
border: 1px solid blue;
}
float: left;
position: absolute;
left: 150px;
width: 85%;
border: 1px solid blue;
}
Nu is de positie van de content dus goed,
alleen, hij valt óver de container heen,
en dat is dus niet de bedoeling. De container zou mee moeten rekken
met de content div.. Heeft iemand daar een oplossing voor?
Is het misschien een idee om de footer ook in de container div op te nemen?
Mvg,
Tom
Gewijzigd op 01/01/1970 01:00:00 door Tom C
Dit moet al een heel eind goed gaan zo gok ik.
position absolute gebruik je eigenlijk nooit.... alleen bij overlays en dergelijke.
Succes!
Hartstikke bedankt! ;-)
Nog een klein vraagje:
Als je nu naar mijn site gaat, zie je dus dat de tekst in de content div, de footer omlaag drukt. Dit is inderdaad de bedoeling. Alleen, mijn menu rekt niet mee,
waardoor er een wit gat ontstaat aan de rechterkant.
Het is dus de bedoeling dat het menu meerekt, afhankelijk van de lengte van de content.
Heb je misschien een idee hoe ik het menu mee laat rekken / dat gat kan opvullen?
Mvg,
Tom
Gewijzigd op 01/01/1970 01:00:00 door Tom C
het is niet de bedoeling dat hier alles word uitgespuugd. google bestaat ook.
Thijs Damen schreef op 19.11.2008 18:34:
google op Faux Columns Css
het is niet de bedoeling dat hier alles word uitgespuugd. google bestaat ook.
het is niet de bedoeling dat hier alles word uitgespuugd. google bestaat ook.
Ik wil niet vervelend doen, maar dit is gewoon een zinloze opmerking.
'Google bestaat.' => Logisch. Snapt iedereen. Dacht je niet dat ik dat niet eerst geprobeerd had ;-)
'Het is niet de bedoeling dat hier alles wordt uitgespuugd.'
=> Daar vraag ik ook helemaal niet om. Forums als deze zijn bedoeld om hulp te vragen als je er zelf niet uitkomt, and that's exactly what I'm doing.
Nou, eventjes terug on topic:
Ik zal straks (ik heb nu even geen tijd) wat artikelen doorlezen over die Faux Columns, want daar heb ik nog nooit van gehoord. Dus bedankt voor die tip.
Maar de rest van het verhaal is gewoon zinloos :)
Mvg,
Tom
Gewijzigd op 01/01/1970 01:00:00 door Tom C
Ik heb een artikel over de Faux Columns doorgenomen en uitgevoerd,
en het werkt perfect!
Dus: Beste Thijs, bedankt voor je tip! ;-)
Mvg,
Tom
PS. Dit topic kan op slot.
Denk om het bumpen, volgende keer je bericht bewerken, er zit niet voor niets een edit knop op.
En voor een volgende keer: Als iemand een zoekterm voor je doorgeeft, ga dan eerst eens zoeken alvorens zo'n reactie te geven. Natuurlijk snappen we dat je google wel kent, (helaas gebruikt niet iedereen dat, maar daar werd verder niets over gezegd) maar het gaat uiteindelijk om de zoekterm.
Als je die kende had je al wel wat gevonden, dus het is een vrij logische reactie, misschien niet helemaal lekker geformuleerd, maar een prima reactie.