Beste CP'ers,
Ik heb een concept neergezet voor een website die ik binnenkort wil online zetten.
Mijn fout is nu, ik heb 3 balken.
Menu - Content - Last Work.
Menu werkt prima en last work.
Helaas doet content een beetje vreemd als je de browser resized, dus kleiner maakt.
Dan gaat het content blok onder Menu, en als je nog verder resized gaat het content blok onder Last Work.
Hoe kan ik maken dat Content vast staat in het midden, en als je resizet, dat hij in het midden blijft staat.
En het vreemde is ook, dat ik eerst de 2 menu's in een div moet aanroepen, en dat ik daarna pas mijn content menu aanroep.
Voorbeeld: http://www.corragio.nl
CSS
PHP
/* Basic */
* { margin: 0px; }
html { }
body { background: url(http://www.graphicsgrotto.com/backgrounds/water/images/bgwater3.jpg); }
a:link {color:#FF0000; clear: both;} /* unvisited link */
a:visited {color:#00FF00; clear: both;} /* visited link */
a:hover {color:#FF00FF; clear: both;} /* mouse over link */
a:active {color:#0000FF; clear: both;} /* selected link */
/* Layout */
/* Boven Kant */
#Header
{
width: 100%;
height: 150px;
background-color: #666666;
color: #CC9900;
border-bottom: solid 3px;
border-color: #FF6600;
}
/* Links Menu */
#Menu
{
float: left;
width: 150px;
height: auto;
overflow: auto;
clear: both;
margin-top: 5px;
margin-left: 5px;
border: solid 1px #FF6600;
background-color: #666666;
color: #CC9900;
}
/* Content Menu (Midden) */
#Content
{
width: 700px;
height: auto;
border: solid 1px #FF6600;
background-color: #666666;
color: #CC9900;
margin-top: 5px;
}
/* Rechts Menu */
#Laatste_Proj
{
float: right;
width: 350px;
height: auto;
overflow: auto;
margin-top: 5px;
margin-right: 5px;
border: solid 1px #FF6600;
background-color: #666666;
color: #CC9900;
clear: both;
}
/* Footer */
#Footer
{
margin-top: 50%;
width: 100%;
height: 75px;
background-color: #666666;
color: #CC9900;
border-top: solid 3px;
border-color: #FF6600;
text-align: center;
}
/* CLASSES */
/* Last Project Border + BG */
.Lst_Proj
{
width: 250px;
height: auto;
overflow: hidden;
background-color: #999999;
border: #000000 1px solid;
text-align: center;
color: #990000;
margin-top: 2px;
margin-bottom: 2px;
}HTML
PHP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title><?=$WebsiteName?></title>
<link href="CSS/Style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Header">
<h1>Goedenmiddag!</h1>
</div>
<div id="Menu">
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
<br />
<ul>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
<div id="Laatste_Proj">
<center><strong><h1>.:Last Work:.</h1></strong></center>
<center>
<div class="Lst_Proj">
<strong>Arkadia Online: </strong> <br />
<img src="http://thomas.arentheem.nl/upload%5Cgodfather_game_logo.jpg" /> <br />
Admin: <strong>Lancer & Medabi3.</strong><br />
URL: <a href="http://www.corragio.nl/" target="_blank">Arkadia Online</a>
</div>
</center>
<center>
<div class="Lst_Proj">
<strong>Lidige ORPG: </strong> <br />
<img src="http://thomas.arentheem.nl/upload%5Cgodfather_game_logo.jpg" /> <br />
Admin: <strong>Faint.</strong><br />
URL: <a href="http://www.forum.fusionzone.nl/" target="_blank">Lidige</a>
</div>
</center>
</div>
<center>
<div id="Content">
<center><strong><h1>.:Content:.</h1></strong></center>
Hier content shit
</div>
</center>
<div id="Footer">
© blabla 2009
</div>
</body>
</html>Met vriendelijke groeten,
Lancer.