Beste leden van criminalspoint.
Ik ben bezig met een klein stukje html 5 !
Aleen nu krijg ik die menu's maar niet onder elkaar .
html5 !
PHP
<!doctype html>
<html>
<!-- Gemaakt door dave Schaafsma -->
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
<link href="stijlblad2.css" rel="stylesheet" type="text/css" />
<title> Basiscursus html </title>
</head>
<body>
<div id="wrapper">
<header>
<div id="logo"><h1>Logo bovenaan</h1></div>
<div id="Menubalk">Menu balk
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>menu 3</li>
</ul>
<form class="rechts">
<input type="text" name="tag" />
<input type="submit" value="HTML 5 TAG zoeken" />
</form>
</div>
</header>
</div>
<div id="nav">
<nav class="dikkerand">
<h2> Menu blok 1</h2>
<p><a href="index.html">Een linkje</a></p>
<p><a href="index.html">Een linkje</a></p>
<p><a href="index.html">Een linkje</a></p>
<p><a href="index.html">Een linkje</a></p>
</nav>
<nav class="dikkerand">
<h2> Menu blok 2 </h2>
<p><a href="index.html">Weer een linkje</a></p>
<p><a href="index.html">Weer een linkje</a></p>
<p><a href="index.html">Weer een linkje</a></p>
<p><a href="index.html">Weer een linkje</a></p>
</nav>
<nav class="dikkerand">
<h2> Menu blok 3 </h2>
<p><a href="index.html">Nog meer linkjes</a></p>
<p><a href="index.html">Nog meer linkjes</a></p>
<p><a href="index.html">Nog meer linkjes</a></p>
<p><a href="index.html">Nog meer linkjes</a></p>
</nav>
</div>
<!-- hier begint de inhoud van de pagina -->
<section>
<article>
<h2> dit is een artikel</h2>
<p>The main vechile of klingon langauge institute is holqed, qaurterly linquistics language and culture.</p>
</article>
<article>
<aside>
<p> Hier komt wat overige tekst die ik erin moest typen om het resultaat te zien </p>
<p> Leuk om te weten hoe dat in zijn werking gaat. </p>
<p> 50 pennys </p>
<p> en 5 cent </p>
</aside>
</article>
<article>
<h2> Dit is artikel nummer 2</h2>
<p> there is much controversy in relationship to font size specifications. </p>
</article>
<article>
<h2> Dit is artikel nummer 3</h2>
<p>The klingon language institue is nonprofit 501(c)3 corporation and star trek, and all relatedmars are copyrights
and trademarks of paramount pictures. All rights reserverd. klingon language institute authorized user.</p>
</article>
<div class="clearright"></div>
</section>
<!--hier eindigt de inhoud van de webpagina -->
<footer>
Voetregel
</footer>
</body>
</html>CSS3 !!!
PHP
body{
font-family:arial;
background:silver;
font-size: 20px;
}
header{
background:yellow;
}
#logo{
background:purple;
height:100px;
}
#menubalk{
background:orange;
float: left;
}
.rechts{
float: right;
}
.mooi{
background:white
font-size:12px
}
#id{
background:red;
font-weight:bold;
}
aside{
background:tomato;
float:right;
width:200px;
}
#nav{
float:left;
}
nav{
background:green;
float:left;
width:200px;
}
section{
background:red;
margin-left:200px;
}
article{
background:white;
clear:right;
}
footer{
background:blue;
clear:both;
}
.clearright{
clear:right;
}
menubalk ul{
list-style-type: none;
display:inline;
margin-left:0px;
padding-left:0px;
}
#menubalk li{
display:inline;
margin-left:0px;
}
#menubalk{
background:orange;
height:30px;
}
#wrapper{
margin:0px auto 0px auto;
min-width:780px;
max-width:1000px;
}
.dikkerand{
border: 10px solid white;
border-radius:30px 30px 30px 0px;
}