Uitrekken van de website

[royduin]

Beste forum leden,

mijn css is nog niet al te best. Heb een layout gesliced, dit is voor mijn gevoel aardig gegaan. Werkt perfect in verschillende browsers. Enkel wanneer er teveel tekst op staat en de layout moet uitrekken ziet het er niet uit.

index.php:

	<div id="container">
		<div id="schaduw_links"></div>
		<div id="center">
			<div id="banner">
				<img src="images/banner.jpg" width="800" height="131">
			</div>
			<div id="menu">
				<ul>
					<li>» <a href="#">Home</a></li>
					<li>» <a href="#">Informatie</a></li>
					<li>» <a href="#">Contact</a></li>
				</ul>
			</div>
			<div id="menu_lijn"></div>
			<div id="content">
				<div id="content_tekst">
					Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst
				</div>
				<div id="content_banner"><img src="images/banner_strepen.jpg" width="58" height="129"></div>
			</div>
			<div id="footer">Copyright © Website.nl</div>
		</div>
		<div id="schaduw_rechts"></div>
	</div>

style.css:

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 0;
	padding: 0;
}

#container {
	margin: 0 auto;
	width: 840px;
	height: 800px;
	overflow: hidden;
}

#schaduw_links {
	width: 20px;
	height: 100%;
	background: url(../images/zijkant_links.jpg);
	float: left;
}

#banner {
	width: 800px;
	height: 131px;
	overflow: hidden;
}

#center {
	width: 800px;
	float: left;
}

#menu {
	width: 199px;
	height: 669px;
	background: url(../images/hand.jpg) no-repeat;
	background-position: bottom;
	float: left;
}

#menu_lijn {
	width: 1px;
	height: 669px;
	background-color: #abc3ff;
	float: left;
}

#content {
	width: 600px;
	height: 579px;
	float: left;
}

#content_tekst {
	width: 542px;
	height: 579px;
	float: left;
}

#content_banner {
	width: 58px;
	height: 579px;
	float: left;
}

#footer {
	font-size: 10px;
	text-align: right;
	line-height: 150px;
	font-weight: bold;
	width: 600px;
	height: 90px;
	background: url(../images/footer.jpg) no-repeat;
	float: left;
}

#schaduw_rechts {
	width: 20px;
	height: 100%;
	background: url(../images/zijkant_rechts.jpg);
	float: left;
}

Ik hoop dat iemand mij kan vertellen hoe ik dit goed krijg. Tevens wanneer iemand aan of opmerkingen heeft hoor ik deze ook graag.

Alvast bedankt!

 

[James007]

Een geslicede layout is de facto niet uitrekbaar, of je zou in het midden kleurvlakken of horizontaal herhalende achtergrondjes moeten hebben. Zet het spul eens online want om van ons nu te gaan eisen dat we je hele website reconstrueren... nou

 

[royduin]

Hier staat het online (zo met spatie's zodat het niet geïndexeerd word door zoekmachines).
h t t p : / / 7 8 . 4 7 . 2 3 1 . 1 2 2 / ~ v a n h o e k / i n d e x . p h p

 

[csshunter]

Hoy Roy,
Om de pagina zelf te laten meerekken, is inderdaad een heel andere basislayout (zonder hoogtes in pixels) nodig.

Maar als je in de #content_tekst opneemt { overflow: auto; }, dan komt er een keurig scrollbarretje naast als de tekst te lang is.

Succes!
CSShunter

PS:
Zet je nog even de lettergrootes om in relatieve maten, bv. body { font-size: .8em;} i.p.v. body { font-size: 11px; } ? Dan kunnen óók mensen die de site met Internet Explorer bekijken, het letterformaat via Beeld > Tekengrootte aanpassen als de lettertjes voor hen te klein zijn!

 

[royduin]

Wanneer ik alle div's die uit moeten rekken op 100% zet en de container op min-height werkt het niet. Zou toch goed moeten gaan?

@csshunter: Scrollbar had ik ook aan zitten denken, enkel dan d.m.v. een iframe. Maar wil de layout toch echt uittrekbaar hebben.


Ik hoop dat iemand mij kan helpen tot ik een uittrekbare layout heb.

 

[ErikBooy007]

Foa, één spatie in je link was ook goed geweest, en als je niet wilt dat zoekmachines je site indexeren, doe je dat middels robots.txt.

That said and done, je kunt je div toch gewoon geen hoogte geven, dat wordt ie automatisch wel groter als er meer content in komt, en aangezien het puur een wit vlak is, heb je ook geen geknoei met achtergronden en dergelijk, door je slicen...

[EDIT]
De container moet dan natuurlijk ook geen hoogte hebben.
[/EDIT]

[EDIT]
Ik heb even wat geprobeerd, wat dingen verwijderd, wat toegevoegd en dit is het resultaat: www.erik booy.nl/Overige/VanHoek (zonder de spatie natuurlijk weer) . Als je de code overneemt, moet je wel even images/background.png erbij pakken. Ik heb in de code wat commentaar gezet. En even terzijde, een div gebruiken om een lijntje van boven naar beneden te trekken is ook not done daar heb je de border voor.
[/EDIT]

 

[royduin]

Voor de velen spatie's; excuses. Met het indexeren bedoelde ik dat de website op dit forum te vinden is.

Ik heb zelf heel wat geprobeerd, zonder hoogtes, op veel plaatsen 100%, echt van alles, kwam er niet uit.

Ik wil jou hartelijk bedanken voor de hulp, niet alleen dat het opgelost is, maar ook dat ik er weer wat van geleerd heb.

Nogmaals bedankt.