<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Silverworx | Silverworx</title>
</head>
<body>
<div id="waarschuwing">
Dit is geen echte site, dit is gewoon een gemaakte template. Alle links werken ook niet, dit is de enigste pagina.
</div>
<div id="container">
<div id="waarschuwing">
</div>
<div id="header">
<div class="logo">
<img src="logo.png">
</div>
<i><p class="TijsVerbeek">© 2013 Silverworx</p></i>
</div>
<div id="navmenu">
<div class="navmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Webhosting</a></li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">VPS</a>
<ul>
<li><a href="#">Minecraft VPS</a></li>
<li><a href="#">Cloudbox VPS</a></li>
</ul>
</li>
<li><a href="#">Alle Producten</a></li>
</ul>
</div>
<div class="search">
<ul>
<li><a href="#">Zoeken</a></li>
<ul>
</div>
<div id="body">
<div class="cloud">
<a href="#">Cloudbox VPS</a>
</div>
<div class="box1">
<p class="box11"><sup>EUR</sup>15,00</p>
<p class="box12">B R O N Z E C L O U D B O X</p>
<div class="button">
<ul>
<li><a href="#"><p>Bestel</p></a></li>
</ul>
</div>
</div>
<div class="box2">
<p class="box11"><sup>EUR</sup>30,00</p>
<p class="box12">S I L V E R C L O U D B O X</p>
<div class="button">
<ul>
<li><a href="#"><p>Bestel</p></a></li>
</ul>
</div>
</div>
<div class="box3">
<p class="box11"><sup>EUR</sup>45,00</p>
<p class="box13">G O L D C L O U D B O X</p>
<div class="button">
<ul>
<li><a href="#"><p>Bestel</p></a></li>
</ul>
</div>
</div>
<div class="box4">
<p class="box11"><sup>EUR</sup>60,00</p>
<p class="box14">E M E R A L D C L O U D B O X</p>
<div class="button">
<ul>
<li><a href="#"><p>Bestel</p></a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<h2>Silverworx</h2>
<a href="#">Over Silverworx</a>
<p class="contact"><a href="index.php">Contact</a></p>
<p class="footer1">© Silverworx</p>
<p class="footer2">Designed by Joren Wouters</p>
<div>
</div>
</body>
</html>
#container {
width: 100%;
max-width: 100%;
}
#waarschuwing {
position: absolute; top: 0px; left: 0px;
height: 30px;
width: 100%;
background: #0099FF;
color: #000;
font-family: Arial;
font-size: 5px;
text-align: center;
position: fixed;
z-index: 999;
}
#header {
position: absolute; top: 30px; left: 0px;
width: 100%;
height: 100px;
background: #fcfcfc;
}
.logo {
position: relative; top: 10px; left: 50px;
height: 75px;
width: 250px;
background: #fcfcfc;
}
.TijsVerbeek {
position: absolute; top: 15px; left: 1000px;
}
#navmenu {
position: absolute; top: 130px; left: 0px;
width: 100%;
height: 55px;
background: #333;
}
.navmenu {
position: absolute; top: 0px; left: 120px;
width: 800px;
height: 55px;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 100;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 31px;
}
.navmenu li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
height: 55px;
text-align: center;
line-height: 55px;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 55px;
width: 150px;
display: block;
background: #333;
color: #fff;
transition: all .3s linear 0;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
}
.navmenu ul li:hover ul {
visibility: visible;
color: #fff;
transition: all .3s linear 0;
}
.navmenu li:hover {
background: #0099FF;
color: #fff;
transition: all .3s linear 0;
}
.navmenu ul li:hover ul li a:hover {
background: #0099FF;
color: #000;
}
.navmenu a:hover {
color: #fff;
background: #0099FF;
}
.search {
position: absolute; top: 0px; left: 1050px;
height: 55px;
width: 150px;
background: #999;
}
.search {
margin: 0;
padding: 0;
z-index: 100;
}
.search ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 55px;
}
.search li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
height: 55px;
text-align: center;
}
.search ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 55px;
width: 150px;
display: block;
background: #333;
color: #fff;
transition: all .3s linear 0;
}
.search a:hover {
color: #fff;
background: #0099FF;
}
#body {
position: absolute; top: 160px; left: 0px;
background: #fcfcfc;
width: 100%;
height: 848px;
}
.contactform {
position: absolute; top: 10px; left: 150px;
font-family: Arial;
text-decoration: bold;
font-size: 20;
}
label {
display: block;
margin-top: 20px;
letter-spacing: 2px;
}
form {
margin: 0 auto;
width: 459px;
}
input, textarea {
width: 439px;
height: 27px;
background: #efefef;
border: 1px solid #dedede;
padding: 10px;
margin-top: 3px;
font-size: 0.9em;
color: #3a3a3a;
moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
textarea {
height: 213px;
max-width: 439px;
}
#submit {
width: 127px;
height: 38px;
font-family: Arial;
color: #000;
background: #999;
font-size: 16px;
text-shadow: 1px 1px 1px #999;
margin-top: 20px;
opacity: 0.8;
}
#submit:hover {
opacity: .5;
}
.cloud a {
position: absolute; top: -65px; left: 150px;
font-family: Arial;
font-size: 20;
text-decoration: none;
color: #000;
}
.cloud a:visited {
color: #000;
}
.box1 {
position: absolute; top: -10px; left: 155px;
background: #ecf2f6;
width: 300px;
height: 334px;
border: 1px solid #d9dee1;
}
.button {
position: absolute; top: 250px; left: 50px;
width: 200px;
height: 40px;
border: 1px solid #000;
}
.button ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
.button li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
}
.button ul li a {
text-align: center;
font-family: Arial;
font-size: 20;
text-decoration: none;
height: 40px;
width: 200px;
display: block;
background: #0099FF;
color: #fff;
}
.button p {
position: absolute; top: -16px; left: 76px;
font-family: Arial;
font-size: 20;
color: #fff;
text-decoration: none;
}
.button p:hover {
text-decoration: underline;
}
.box11 {
position: absolute; top: 15px; left: 40px;
font-size: 55;
font-family: Arial;
color: #0099FF;
}
.box12 {
position: absolute; top: 180px; left: 30px;
font-size: 18;
font-family: Arial;
color: #000;
}
.box13 {
position: absolute; top: 180px; left: 50px;
font-size: 18;
font-family: Arial;
color: #000;
}
.box14 {
position: absolute; top: 180px; left: 20px;
font-size: 18;
font-family: Arial;
color: #000;
}
.box2 {
position: absolute; top: -10px; left: 505px;
background: #ecf2f6;
width: 300px;
height: 334px;
border: 1px solid #d9dee1;
}
.box3 {
position: absolute; top: -10px; left: 855px;
background: #ecf2f6;
width: 300px;
height: 334px;
border: 1px solid #d9dee1;
}
.box4 {
position: absolute; top: 374px; left: 155px;
background: #ecf2f6;
width: 300px;
height: 334px;
border: 1px solid #d9dee1;
}
#footer {
position: absolute; top: 920px; left: 0px;
width: 100%;
height: 250px;
background: #333;
}
h2 {
position: absolute; top: 40px; left: 150px;
font-family: Arial;
font-size: 13;
color: #fff;
}
.contact {
position: absolute; top: -13px; left: 180px;
font-family: Arial;
font-size: 13;
}
#footer a {
position: absolute; top: 80px; left: 150px;
font-family: Arial;
font-size: 13;
color: #fff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
.footer1 {
position: absolute; top: 125px; left: 630px;
font-family: Arial;
font-size: 13;
color: #fff;
}
.footer2 {
position: absolute; top: 150px; left: 597px;
font-family: Arial;
font-size: 13;
color: #fff;
}
Dit is een HTML en een CSS bestand.
Weet iemand waarom je de tekst in #waarschuwing niet ziet?
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Silverworx | Silverworx</title>
</head>
<body>
<div id="waarschuwing">
Dit is geen echte site, dit is gewoon een gemaakte template. Alle links werken ook niet, dit is de enigste pagina.
</div>
<div id="container">
<div id="waarschuwing">
</div>
<div id="header">
<div class="logo">
<img src="logo.png">
</div>
<i><p class="TijsVerbeek">© 2013 Silverworx</p></i>
</div>
<div id="navmenu">
<div class="navmenu">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="#">Webhosting</a></li>
<li><a href="#">Webdesign</a></li>
<li><a href="#">VPS</a>
<ul>
<li><a href="#">Minecraft VPS</a></li>
<li><a href="#">Cloudbox VPS</a></li>
</ul>
</li>
<li><a href="#">Alle Producten</a></li>
</ul>
</div>
<div class="search">
<ul>
<li><a href="#">Zoeken</a></li>
<ul>
</div>
<div id="body">
<div class="cloud">
<a href="#">Cloudbox VPS</a>
</div>
<div class="box1">
<p class="box11"><sup>EUR</sup>15,00</p>
<p class="box12">B R O N Z E C L O U D B O X</p>
<div class="button">
<ul>
<li><a href="#"><p>Bestel</p></a></li>
</ul>
</div>
</div>
<div class="box2">
<p class="box11"><sup>EUR</sup>30,00</p>
<p class="box12">S I L V E R C L O U D B O X</p>
<div class="button">
<ul>
<li><a href="#"><p>Bestel</p></a></li>
</ul>
</div>
</div>
<div class="box3">
<p class="box11"><sup>EUR</sup>45,00</p>
<p class="box13">G O L D C L O U D B O X</p>
<div class="button">
<ul>
<li><a href="#"><p>Bestel</p></a></li>
</ul>
</div>
</div>
<div class="box4">
<p class="box11"><sup>EUR</sup>60,00</p>
<p class="box14">E M E R A L D C L O U D B O X</p>
<div class="button">
<ul>
<li><a href="#"><p>Bestel</p></a></li>
</ul>
</div>
</div>
</div>
<div id="footer">
<h2>Silverworx</h2>
<a href="#">Over Silverworx</a>
<p class="contact"><a href="index.php">Contact</a></p>
<p class="footer1">© Silverworx</p>
<p class="footer2">Designed by Joren Wouters</p>
<div>
</div>
</body>
</html>
#container {
width: 100%;
max-width: 100%;
}
#waarschuwing {
position: absolute; top: 0px; left: 0px;
height: 30px;
width: 100%;
background: #0099FF;
color: #000;
font-family: Arial;
font-size: 5px;
text-align: center;
position: fixed;
z-index: 999;
}
#header {
position: absolute; top: 30px; left: 0px;
width: 100%;
height: 100px;
background: #fcfcfc;
}
.logo {
position: relative; top: 10px; left: 50px;
height: 75px;
width: 250px;
background: #fcfcfc;
}
.TijsVerbeek {
position: absolute; top: 15px; left: 1000px;
}
#navmenu {
position: absolute; top: 130px; left: 0px;
width: 100%;
height: 55px;
background: #333;
}
.navmenu {
position: absolute; top: 0px; left: 120px;
width: 800px;
height: 55px;
}
.navmenu {
margin: 0;
padding: 0;
z-index: 100;
}
.navmenu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 31px;
}
.navmenu li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
height: 55px;
text-align: center;
line-height: 55px;
}
.navmenu ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 55px;
width: 150px;
display: block;
background: #333;
color: #fff;
transition: all .3s linear 0;
}
.navmenu ul ul {
position: absolute;
visibility: hidden;
}
.navmenu ul li:hover ul {
visibility: visible;
color: #fff;
transition: all .3s linear 0;
}
.navmenu li:hover {
background: #0099FF;
color: #fff;
transition: all .3s linear 0;
}
.navmenu ul li:hover ul li a:hover {
background: #0099FF;
color: #000;
}
.navmenu a:hover {
color: #fff;
background: #0099FF;
}
.search {
position: absolute; top: 0px; left: 1050px;
height: 55px;
width: 150px;
background: #999;
}
.search {
margin: 0;
padding: 0;
z-index: 100;
}
.search ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 55px;
}
.search li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
height: 55px;
text-align: center;
}
.search ul li a {
text-align: center;
font-family: Arial;
text-decoration: none;
height: 55px;
width: 150px;
display: block;
background: #333;
color: #fff;
transition: all .3s linear 0;
}
.search a:hover {
color: #fff;
background: #0099FF;
}
#body {
position: absolute; top: 160px; left: 0px;
background: #fcfcfc;
width: 100%;
height: 848px;
}
.contactform {
position: absolute; top: 10px; left: 150px;
font-family: Arial;
text-decoration: bold;
font-size: 20;
}
label {
display: block;
margin-top: 20px;
letter-spacing: 2px;
}
form {
margin: 0 auto;
width: 459px;
}
input, textarea {
width: 439px;
height: 27px;
background: #efefef;
border: 1px solid #dedede;
padding: 10px;
margin-top: 3px;
font-size: 0.9em;
color: #3a3a3a;
moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
textarea {
height: 213px;
max-width: 439px;
}
#submit {
width: 127px;
height: 38px;
font-family: Arial;
color: #000;
background: #999;
font-size: 16px;
text-shadow: 1px 1px 1px #999;
margin-top: 20px;
opacity: 0.8;
}
#submit:hover {
opacity: .5;
}
.cloud a {
position: absolute; top: -65px; left: 150px;
font-family: Arial;
font-size: 20;
text-decoration: none;
color: #000;
}
.cloud a:visited {
color: #000;
}
.box1 {
position: absolute; top: -10px; left: 155px;
background: #ecf2f6;
width: 300px;
height: 334px;
border: 1px solid #d9dee1;
}
.button {
position: absolute; top: 250px; left: 50px;
width: 200px;
height: 40px;
border: 1px solid #000;
}
.button ul {
margin: 0;
padding: 0;
list-style: none;
line-height: 30px;
}
.button li {
margin: 0;
padding: 0;
float: left;
position: relative;
list-style: none;
}
.button ul li a {
text-align: center;
font-family: Arial;
font-size: 20;
text-decoration: none;
height: 40px;
width: 200px;
display: block;
background: #0099FF;
color: #fff;
}
.button p {
position: absolute; top: -16px; left: 76px;
font-family: Arial;
font-size: 20;
color: #fff;
text-decoration: none;
}
.button p:hover {
text-decoration: underline;
}
.box11 {
position: absolute; top: 15px; left: 40px;
font-size: 55;
font-family: Arial;
color: #0099FF;
}
.box12 {
position: absolute; top: 180px; left: 30px;
font-size: 18;
font-family: Arial;
color: #000;
}
.box13 {
position: absolute; top: 180px; left: 50px;
font-size: 18;
font-family: Arial;
color: #000;
}
.box14 {
position: absolute; top: 180px; left: 20px;
font-size: 18;
font-family: Arial;
color: #000;
}
.box2 {
position: absolute; top: -10px; left: 505px;
background: #ecf2f6;
width: 300px;
height: 334px;
border: 1px solid #d9dee1;
}
.box3 {
position: absolute; top: -10px; left: 855px;
background: #ecf2f6;
width: 300px;
height: 334px;
border: 1px solid #d9dee1;
}
.box4 {
position: absolute; top: 374px; left: 155px;
background: #ecf2f6;
width: 300px;
height: 334px;
border: 1px solid #d9dee1;
}
#footer {
position: absolute; top: 920px; left: 0px;
width: 100%;
height: 250px;
background: #333;
}
h2 {
position: absolute; top: 40px; left: 150px;
font-family: Arial;
font-size: 13;
color: #fff;
}
.contact {
position: absolute; top: -13px; left: 180px;
font-family: Arial;
font-size: 13;
}
#footer a {
position: absolute; top: 80px; left: 150px;
font-family: Arial;
font-size: 13;
color: #fff;
text-decoration: none;
}
#footer a:hover {
text-decoration: underline;
}
.footer1 {
position: absolute; top: 125px; left: 630px;
font-family: Arial;
font-size: 13;
color: #fff;
}
.footer2 {
position: absolute; top: 150px; left: 597px;
font-family: Arial;
font-size: 13;
color: #fff;
}
Dit is een HTML en een CSS bestand.
Weet iemand waarom je de tekst in #waarschuwing niet ziet?
met al je posts werken er denk ik 10 man aan je site. Inderdaad is het tijdrovend om mee te denken als je telkens je hele pagina code in elke post kopieert.
