O, ik ben zelf bezig met het maken van de CSS en Div en het werkt echt veel beter dan normaal. Het klopt nu allemaal :) Echt bedankt allemaal.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style type="text/css">
#menu {
position: relative;
width: 250px;
}
#menu.content {
border-style: solid;
border-width:1px;
border-color:#004880;
top:-4px;
background-color:#e6f2fc;
}
</style>
<title>Fly-Net V2 - Homepage</title>
</head>
<body>
<!-- Header -->
<img border="0" src="header.png" width="900" height="153" alt="">
<!-- Menu 1 header -->
<div id="menu" class="header">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 1 -->
<div id="menu" class="content">
Dit is het menu, hier kan ik alles kwijt wat ik maar kwijt wil :)
</div>
<!-- Menu 2 header -->
<div id="menu" class="header">
<img border="0" src="titel.png" width="250" height="16" alt="">
</div>
<!-- Menu 2 -->
<div id="menu" class="content">
Dit is het menu, hier kan ik alles kwijt wat ik maar kwijt wil :)
</div>
</body>
</html>
Op deze manier kan het inderdaad wel prima, ik was bezig om voor zowel de header van de menu's als voor de content als voor de footer (zelfde geld voor de onderkant daarvan) 1 afbeelding te gebruiken. Dat scheelt ook nog eens laadtijd.
Ik laat je nu eerst even gewoon proberen, je komt er vast wel uit.
Ik vind het alvast positief dat je er zelf mee aan de gang bent en dat het je prima lijkt te lukken.
Onderstaande code heb ik gemaakt voor je website, houd er rekening mee dat ik alleen de lange afbeelding voor de boven en onderkant heb gebruikt en deze hernoemd naar titel.png (bovenkant) en footer.png (onderkant)
Kijk maar of je er wat mee kan.
[edit]
Hier staat de CSS nog in het bestand zelf, maar het is beter als je deze erbuiten haalt en include in het bestand via:
Het stukje van If IE tot en met de endif moet wel gewoon in het bestand blijven staan. Heb hem ook alleen getest in Firefox en IE7 nog.
[/edit]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="author" content="Robert Deiman" />
<meta http-equiv="charset" content="iso-8859-1" />
<meta http-equiv="content-language" content="nl-en" />
<meta name="title" content="Vul hier de titel van je pagina in" />
<meta name="description" content="Vul hier een omschrijving van de website in " />
<meta name="keywords" content="Vul hier je keywords in" />
<meta name="generator" content="phpDesigner 2007 Pro" />
<title>..::.. Vul titel van je pagina in ..::..</title>
<style type="text/css">
body, html{
width:100%;
margin:0px;
padding:0px;
}
#container{
width:900px;
margin:4px auto;
}
#header{
float:left;
height:153px;
width:900px;
margin-bottom:4px;
background:#FFFFFF url('header.png') center top no-repeat;
}
#leftside{
float:left;
width:250px;
margin-right:4px;
}
.leftcontent{
float:left;
width:250px;
background-color:#E6F2FC;
margin-bottom:4px;
padding-top:0px;
padding-bottom:0px;
}
.headcontent{
background:#E6F2FC url('titel.png') left top no-repeat;
height:20px;
width:100%;
}
p.contenthead{
margin: 0px;
padding:0px;
margin-left:5px;
background:#E6F2FC url('titel.png') right top no-repeat;
text-align: center;
}
.contentfoot{
height:20px;
width:100%;
margin-bottom: 0px;
padding-bottom:0px;
background:#E6F2FC url('footer.png') left bottom no-repeat;
}
p.footers{
margin:0px;
padding:0px;
margin-left:5px;
background:#E6F2FC url('footer.png') right bottom no-repeat;
text-align:center;
}
#maincontent{
float:left;
width:646px;
background:#E6F2FC url('titel.png') left top no-repeat;
margin-bottom:4px;
}
#footer{
float:left;
width:100%;
height:100px;
}
</style>
<!--[if IE]>
<style type="text/css">
.contentfoot{
height:19px;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
</div>
<div id="leftside">
<div class="leftcontent">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Hier komt je content in het 1e linkervakje
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
<div class="leftcontent">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Hier komt je content in het 2e linkervakje
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
</div>
<div id="maincontent">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Het maakt niet veel uit hoe lang de tekst wordt.<br />Des te meer regels tekst, des te langer je content div wordt.<br />Hij zal dus gewoon meerekken met de inhoud.<br />Om dit te laten zien herhaalt dit stukje tekst zich een paar maal.<br />Het maakt niet veel uit hoe lang de tekst wordt.<br />Des te meer regels tekst, des te langer je content div wordt.<br />Hij zal dus gewoon meerekken met de inhoud.
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
<div id="footer">
<div class="headcontent">
<p class="contenthead">Titeltje</p>
</div>
Hier komt de inhoud die in je footer moet komen.
<div class="contentfoot">
<p class="footers"> </p>
</div>
</div>
</div>
</body>
</html>
Hij werkt eigelijk helemaal niet ( sorry dat ik het zeg ) Het is echt helemaal door de war.
Trouwens, dit is het geval in FireFox en IE. Kan jij het aanpassen bij jou code? Ik ga weer verder met mijn code alleen werkt die neit helemaal meer :P
Bumpen is het herhaaldelijk plaatsen van reacties op een thread of onderwerp in een internetforum teneinde deze thread bovenaan de lijst te houden zodat het langer onder de aandacht van de bezoekers blijft. Dit wordt meestal als irritant ervaren en daardoor niet geaccepteerd door de moderator(s) van het forum waardoor degene die bumpt een waarschuwing of ban kan krijgen. Ook kan de gebumpte thread gesloten worden, wat inhoudt dat er geen reacties meer aan toegevoegd kunnen worden. De term is afgeleid van het Engelse to bump (Nederlands: stoten).
:( Maar niet express, ik edit normaal altijd...zal voortaan beter opletten ( ik ben het systeem van SMF en phpBB gewent )
