content variabel maken

Luc · 15 April 2012

Beste,

Ik heb momenteel 3 divs, twee van deze divs hebben een vaste waarde (linker menu, rechter menu). Nu wil ik dat de content het resterende vak opvult. Dus afhankelijk van de browser grootte dat de content uitrekt of inkrimpt.

Dit is mij tot heden nog niet gelukt, en zal toch wel fijn zijn als het kon.

Ik heb 2 keer div float left, en een keer float right.

Hopelijk kunnen jullie mij helpen.

De menu's hebben dus altijd een vaste breedte en dan moet de content het middelste vak vullen, zonder dat hij dus die menu's in de weg zit.

Met vriendelijke groet,

Luc

Nick · 15 April 2012

content 100% maken en de rechter div in de content div doen?

of bedoel je zoiets? http://vgame.webege.com/test.php

Luc · 15 April 2012

Ja zoiets bedoelde ik. Bedankt

Nick · 15 April 2012

PHP

<html>
<head>


<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Naamloos spel</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="css/ingelogd.css" rel="stylesheet" type="text/css" media="screen" />


</head>


<body>


  <div id="header">
<h1>Header</h1>
  </div>


  <div id="container">
container
  </div>


  <div id="menu-left">
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="ingelogd.php?p=uitloggen">Uitloggen</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="ingelogd.php?p=begin">Startpagina</a><br />
	&nbsp;&nbsp;<a href="ingelogd.php?p=bank">Bank</a><br />
	&nbsp;&nbsp;<a href="ingelogd.php?p=reizen">Reizen</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<br /><br />
  </div>


  <div id="menu-right">
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<div class="hoofd">
&nbsp;&nbsp;Hoofd
</div>
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
	&nbsp;&nbsp;<a href="#">link</a><br />
<br /><br />
  </div>


  <div id="content">


content


  </div>
  <div id="footer">
Footer
  </div>


</body>
</html>

Toon Meer

links zou ik wel even leeghalen en in de CSS staan dingen die jij niet nodig hebt denk

PHP

body { 
font: normal 100% Arial, Helvetica, sans-serif; 
background: #696969; 
color: #5D5D5D; 
margin: 0; 
} 


#header{
height: 120px;
width: 100%;
margin: 0;
background: #1D1D1D;
}


#container{
width: 100%;
background: #8B0000;
color: #000000;
text-align: center;
}


#menu-left{
float: left;
width: 250px;
background: #333333;
}


#menu-right{
float: right;
width: 250px;
background: #333333;
}


.hoofd{
background: #8B0000;
color: #000000;
font-family: "arial"; 
font-size: 12pt;
font-weight: bold;
}


#content{
margin: 10px auto;
min-height: 450px;
width: 55%;
color: #000000;
border: 1px solid #8B0000;
}


#footer{
border: 1px solid #000;
width: 100%;
height: 30px;
position: fixed;  
bottom: 0;  
background: #1D1D1D;  
}


a {
color: #000000;
}


a:hover{
color: #1D1D1D;
}

Toon Meer

Luc · 15 April 2012

Thanks, deze werkt inderdaad

:slotje:

Alex · 15 April 2012

PHP

<div style="float: left; width: 200px;">Links</div>
<div style="float: left; width: auto; margin-left: 200px;margin-right: 200px; position: absolute;z-index: -10000;">
Midden
</div>
<div style="float: right;  width: 200px;">Rechts</div>

Succes

Edit: had topic niet herladen, mijn fout

Patrick · 15 April 2012

Closed

Partner Gezocht om meerdere NFT Collecties op Open Sea te Plaatsen

Plesk installer

cpanel / whm themes

PHP Point of Sale

Probleem omtrent Tinymce

Kunnen jullie mij helpen met deze enquete

een eigen cloud sever

Probleem C++ en CL

193 Nieuwe domeinnamen April 2025

228 Nieuwe domeinnamen Maart 2025

285 Nieuwe domeinnamen Februari 2025

content variabel maken

Participate now!

Fijne feestdagen

Kritieke update voor Really Simple Security-plug-in

ING Nederland streeft naar ondersteuning van Google Pay tegen eind februari

Functioneel ontwerp

Access Control List implementatie in PHP/MySQL - deel 1/2

Access Control List implementatie in PHP/MySQL - deel 2/2

Delen

Gebruikers die dit topic bekijken