PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
M

[CSS] content breedte

Door Martijn op 15-02-2006 12:40
3.152 views
hey,

Ik heb een menu en daarnaast de content. Het menu is 192px lang maar daarnaast wil ik de content hebben die de rest van de pagina in de breedte opvult. De content moet dan dus 100% - 192px breed zijn.

Hoe realiseer ik dit ?

Alvast bedankt,

Martijn
b
bart van der veen
15-02-2006 12:44
als je bij je content (is een div neem ik aan) geen waarde opgeeft of 100% dan gaat het goed: want in css mogen er maar 2 elementen naast elkaar staan dus als je bij de een een waarde opgeeft en bij de ander niet snapt je browser het zelf
M
Martijn
15-02-2006 12:57
Als ik bij de content div een waarde opgeeft van 100% Dan gooit hij die div onder het menu en heeft dan een width van 100%. Dus echt over de gehele breedte van het scherm. Dat is dus niet echt de bedoeling :P
M
Martijn
15-02-2006 12:58
Misschien moet ik er ook even bij de vermelden dat de content div een achtergrond plaatje heeft. en die is 507 px breed en de rest van de breedte moet opgevuld worden met een achtergrondkleur.
A
Arjan Kapteijn
15-02-2006 13:01
klik. Links en rechts hebben de menu's een breedte van 150px, in het midden word het opgevuld met content.
M
Martijn
15-02-2006 13:10
Thnx ik ga even kijken of ik er mee uit de voeten kan.

Ik wil dus links strak tegen de zijkant van het venster mijn menu hebben en daarnaast strak mijn content die in de breedte de rest van mijn pagina vult. Vandaar dus dat de content 100% - 192px moet zijn :)
M
Martijn
15-02-2006 13:36
Nee, ik kom er niet uit. Dit is de code die ik gebruik:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> Kyokushin v3 </TITLE>
<style type="text/css">

body, html {
	color: white
	margin: 0px;
	margin: 0px;
	width: 100%;
	background: url("graph/bg.gif");
	background-repeat: repeat;
}

#container {
	width: 100%;
}

#header {
	margin: 0px;
	padding: 0px;
	display: block;
	min-height: 100px;
	_height: 100px;
	width: 100%;
	background: url("graph/header.gif");
	background-repeat: no-repeat;
	background-color: #025892;
}

#menubox {
	width: 192px;
	float: left;
	background-color: #cdd6d8;
}

#subheader {
    margin: 0px;
	padding: 0px;
	display: block;
	width: 192px;
	min-height: 30px;
	_height: 30px;
	background: url("graph/links-boven.gif");
}

.menu-licht {
    margin: 0px;
	padding: 0px;
	display: block;
	width: 192px;
	min-height: 30px;
	_height: 30px;
	background-color: #658288;
	color: white;
	font-size: 13;
	text-align: center;
	vertical-align: middle;
	font-family: Comic Sans MS;
}

.menu-donker {
    margin: 0px;
	padding: 0px;
	display: block;
	width: 192px;
	min-height: 30px;
	_height: 30px;
	background-color: #025892;
	color: white;
	font-size: 13;
	text-align: center;
	vertical-align: middle;
	font-family: Comic Sans MS;
}

#contentbox {
	float: left;
	background: url("graph/content.gif");
	background-repeat: no-repeat;
	color: white;
	font-size: 13px;
	font-weight: bold;
	border-left: 1px dashed black;
}
</style>
</HEAD>
<BODY>

<div id="container">
	<div id="header"></div>
	<div id="menubox">
		<div id="subheader"></div>
		<div class="menu-licht">ALGEMENE INFORMATIE</div>
		<div class="menu-donker">AANMELDEN</div>
		<div class="menu-licht">LERAAR & ASSISTENTEN</div>
		<div class="menu-donker">TRAININGEN</div>
		<div class="menu-licht">DOJO ETIQUETTE</div>
		<div class="menu-donker">ACTIVITEITENKALENDER</div>
		<div class="menu-licht">CONTRIBUTIE</div>
		<div class="menu-donker">EXAMENS</div>
		<div class="menu-licht">LINKS</div>
		<div class="menu-donker">FOTOALBUM</div>
		<div class="menu-licht">MEDEDELINGEN</div>
		<div class="menu-donker">DANGRADEN</div>	
	</div>

	<div id="contentbox"></div>
</div>


</BODY>
</HTML>


Ik wil dus dat #contentbox naast #menubox komt. Met deze code zie ik niets van de #contentbox.
Dat komt denk ik omdat ik in de #contentbox geen breedte en hoogte opgeef, maar die kan ik niet opgeven omdat ik deze waarden van tevoren niet weet. Hoe moet ik dit oplossen?

Alvast bedankt,

Martijn
A
Arjan Kapteijn
15-02-2006 13:43
Geef hem eens geen float: left; mee.
M
Martijn
15-02-2006 13:46
Welke geen float left meegeven ?
M
Martijn
15-02-2006 13:57
Nee dat helpt ook niet, dan staat hij niet strak meer tegen mijn header aan, dan zit er een tussenruimte tussen mijn content en de header. Verder verdwijnt er dan aan de linkerkant van mijn content achter het menu. Dus dat werkt ook niet echt..

Reageren

Inloggen om te reageren