HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Silverworx Nederland | Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-style.css">
<![endif]-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="header">
<div id="logo">
<a href="http://www.silverworx.nl"><img src="images/logoNEW.png" width="100%" height="45px"></img></a>
</div>
<div id="navmenu">
<ul>
<li class="webdesign"><a href="/design/index.html">Webdesign</a></li>
<li class="webhosting"><a href="/hosting/index.html">Webhosting</a></li>
<li class="webservice"><a href="/webservice/index.html">Webservice</a></li>
<li class="overons"><a href="about.php">Over ons</a></li>
<li class="contact"><a href="contact.php">Contact</a></li>
</ul>
</h1>
</div>
</div>
<div id="body">
<div id="contact">
Naam<br>
<input type="text" name="name" placeholder="Naam"><br><br>
E-mail<br>
<input type="email" name="email" placeholder="voorbeeld123@voorbeeld.com"><br><br>
Reden van contact<br>
<input name="reden" list="reden">
<datalist id="reden" placeholder="Webdesign">
<option value="Webdesign">
<option value="Webhosting">
<option value="Webservice">
<option value="Klacht">
</datalist><br><br>
<textarea rows="15" cols="100" placeholder="Hier uw vraag/ klacht"></textarea><br><br>
<input type="submit" placeholder="Verzenden">
</div>
</div>
<div id="footer">
<div id="links">
© Silverworx 2014 <a href="#">Home</a> | <a href="#">Webdesign</a> | <a href="#">Webhosting</a> | <a href="#">Webservice</a> | <a href="#">Over ons</a> | <a href="#">Contact</a>
</div>
<div id="logo2">
</div>
</div>
</body>
</html>
HTML:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
#header {
margin: 0;
height: 60px;
width: 100%;
background: #fff;
color: #fff;
float: left;
border-bottom: 1px solid #000;
}
#logo {
margin-top: 5px;
margin-left: 15px;
height: 45px;
width: 32%;
float: left;
}
#navmenu {
margin-left: 47%;
margin-top: 5px;
padding: 0;
width: 53%;
height: 45px;
}
#navmenu ul {
padding: 0;
margin-top: 17px;
list-style: none;
}
#navmenu ul li a {
color: #909090;
text-decoration: none;
display: block;
font-family: Verdana;
}
#navmenu a:hover {
border-bottom: 1px solid #000;
padding-bottom: 2px;
color: #000;
}
#navmenu .webdesign {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: .1%;
width: 18%;
text-align: center;
float: left;
padding: 5px;
}
#navmenu .webhosting {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: .1%;
width: 20%;
text-align: center;
float: left;
padding: 5px;
}
#navmenu .webservice {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: .1%;
width: 19.5%;
text-align: center;
float: left;
padding: 5px;
}
#navmenu .overons {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: .7%;
width: 15%;
text-align: center;
float: left;
padding: 5px;
}
#navmenu .contact {
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
margin-left: 1.3%;
width: 13.5%;
text-align: center;
float: left;
padding-top: 5px;
}
#body {
margin: 0;
width: 100%;
float: left;
height: 600px;
}
#footer {
margin-top: 10px;
height: 100px;
width: 100%;
color: #fff;
background: #353535;
float: left;
font-family: Verdana;
}
#links {
margin-top: 50px;
margin-left: 5%;
height: 30px;
width: 60%;
float: left;
}
#links a {
color: #fff;
text-decoration: none;
}
#links a:hover {
text-decoration: underline;
}
#logo2 {
margin-top: 48px;
margin-left: 77%;
border: 1px solid #fff;
height: 50px;
width: 22%;
}
Dit is een HTML en een CSS bestand.
Ik heb alleen een vraagje:
Hoe zorg ik bij de <datalist> dat er al iets staat als je de webpagina laadt? Want als ik de webpagina nu laadt staat er nog niks....
Zeg maar er moet een placeholder staan, alleen die staat er niet en met placeholder lukt dat ook niet...