Content div springt uit container

Door Tom C op 18-11-2008 23:38

1.119 views

Hallo allemaal :)

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:


/*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;
	}

index.php: (zonder header en menu)


<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 &amp; Netwerk</a></li>
				<li><a href="http://www.tomcolen.nl/backup/">Beveiliging &amp; Virussen</a></li>
				<li><a href="http://www.tomcolen.nl/backup/">(Web)design &amp; 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

Tamara

19-11-2008 08:21

je div content heeft position:absolute. daarom doet ie zo raar denk ik... je kan beter een float gebruiken

Crispijn -

19-11-2008 08:24

jepz, voor al je kolommen een float left gebruiken en je bent al een heel stuk verder.

Tom C

19-11-2008 13:25

Oke.

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..

Tamara

19-11-2008 13:38

bij je content left: 150px; weghalen

top, left enz. werken alleen bij een position:absolute. als je toch nog wilt positioneren, gebruik dan margins/padding

Tom C

19-11-2008 14:09

Oke, ik heb nu 150px weggehaald bij content left..

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:


#content {
	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

Crispijn -

19-11-2008 15:57

geef alleen het menu en de content een float left. geef ze allebei een breedte mee en het probleem moet opgelost zijn. Je footer positioneren doe je door na de content en het menu een div met de style clear: both mee te geven.

Dit moet al een heel eind goed gaan zo gok ik.

position absolute gebruik je eigenlijk nooit.... alleen bij overlays en dergelijke.

Succes!

Tom C

19-11-2008 16:55

Works like a charm!

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

Thijs Damen

19-11-2008 18:34

google op Faux Columns Css

het is niet de bedoeling dat hier alles word uitgespuugd. google bestaat ook.

Tom C

19-11-2008 18:43

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.

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

Tom C

20-11-2008 00:11

Oke.

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.

Reageren

Inloggen om te reageren