Webprofis is een Forum waarin je vragen kunt stellen die webgerelateerd zijn. Heb je vragen over of problemen met je Webpagina, HTML, CSS, Javascript, PHP of andere client of serverside scriptingtalen? Stel ze dan gerust op dit forum.
Op dit forum zijn een aantal vrijwilligers actief die u graag met uw vragen willen helpen en u waar mogelijk een passend antwoord aanbieden.
Hebt u zelf veel ervaring en kennis met betrekking tot het bovenstaande? U bent van harte welkom om uw kennis met anderen te delen!
We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.
Team Webprofis
We hopen dat eenieder op dit Forum een leerzame ervaring mag opdoen.
Team Webprofis
ReneV
Info Algemeen
- Naam
- ReneV
- Aangemeld
- Bezoeken
- 820
- Laatst Actief
- Rollen
- Administrator
- Punten
- 137
- Badges
- 6
- Posts
- 732
Reactiepunten
-
Contact pagina menu wordt niet goed weergegeven op telefoon, alle andere pagina's werken wel gewoon
Responsive en uptodate:
HTML:
CSS:
<!DOCTYPE html>
<html lang="nl-NL">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>HAKA Workshop | Contact</title>
<meta name="description" content="Jouw HAKA workshop!">
<meta name="keywords" content="Haka, workshop, teambuilding, groepen, nieuw zeeland, haka workshop, Den Haag">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<header>
<div class="four col">
<h1><span>HAKA</span> WORKSHOP!</h1>
</div>
<nav class="eight col">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="welkom.html">Welkom</a></li>
<li><a href="watishaka.html">Wat is Haka</a></li>
<li><a href="hakaworkshop.html">Workshop</a></li>
<li class="current"><a href="contact.php">Contact</a></li>
</ul>
</nav>
</header>
<section>
<div class="six col">
<img src="contact.jpg" alt="contact">
</div>
<div class="six col">
<h2>Contact</h2>
<p>Hieronder kunt u vrijblijvend informatie of een offerte aanvragen:</p>
<form id="contactformulier" action="" method="post">
<input id="spam_email" name="spam_email" value="" type="hidden">
<label>Name</label>
<input name="your_name" type="text">
<label >Email</label>
<input name="your_email" type="text">
<label>Message</label>
<textarea rows="5" cols="80" name="your_message"></textarea>
<input class="submit" name="contact_submitted" value="Versturen" type="submit">
</form>
</div>
</section>
<footer>
<div class="four col">
<h4>HAKA</h4>
<p>Ook HAKA ervaren? Neemt u hier vrijblijvend contact met ons op. Het kan bijvoorbeeld in Den Haag, Rotterdam, Amsterdam, Utrecht.</p>
</div>
<div class="four col">
<h4>Workshop</h4>
<p>Het is een HAKA workshop, een bijzondere belevenis! die u niet snel vergeet.</p>
</div>
<div class="four col">
<h4>Contact/Offerte</h4>
<p>Wilt u graag een offerte? Download <a href="http://www.firstchoicesecurity.nl/haka/images/hakaworkshop.doc"><u>hier</u></a> het word-formulier, vul het in, en mail het naar: <a href="mailto:info@firstchoicesecurity.nl?subject=HAKAworkshop%20Informatie/Offerte">info@firstchoicesecurity.nl</a></p>
</div>
<div class="twelve col">
<hr>
<p>website powered by <a href="http://www.firstchoicesecurity.nl">firstchoicesecurity.nl</a></p>
</div>
</footer>
</div>
</body>
</html>
html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, em, img, small, strong, b, u, i, ul, li, form, label, footer, header, nav, section {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
footer, header, nav, section {
display: block;
}
body {
line-height: 1;
}
ul {
list-style: none;
}
html {
height: 100%;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: normal;
background: #e6bcff;
color: #1d1d1d;
}
.container {
position: relative;
width: 100%;
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
.container:after,
header:after,
section:after,
footer:after {
content: "";
display: table;
clear: both;
}
.col {
width: 100%;
float: left;
box-sizing: border-box;
}
p {
line-height: 18px;
margin-bottom: 10px;
}
hr {
margin: 20px 0;
border-width: 0;
border-top: 1px solid rgba(255,255,255,.2);
}
header {
padding: 10px 0;
}
h1 {
color: #FFF;
font-size: 30px;
font-weight: 300;
letter-spacing: -3px;
text-align: center;
text-shadow: 1px 1px #535353;
}
h1 span {
color: #098EFF;
text-shadow: 1px 1px #FFF;
}
nav ul {
float: left;
margin-top: 20px;
width: 100%;
}
nav li {
list-style: none;
float: left;
clear: left;
width: 100%;
}
nav li a {
background: rgba(255,255,255,.2);
border-radius: 4px;
letter-spacing: -1px;
font-size: 18px;
font-weight: 400;
padding: 6px 15px;
margin: 1px;
text-align: center;
color: #1D1D1D;
display: block;
text-shadow: 1px 1px #FFF;
text-decoration: none;
}
nav li.current a {
background: rgba(255,255,255,.5);
color: #098EFF;
}
nav li a:hover,
nav li.current a:hover {
background: rgba(255,255,255,.7);
color: #1D1D1D;
}
section {
padding: 15px;
margin: 20px 0;
background: rgba(255,255,255,.5);
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border: 15px;
}
section img {
width: 100%;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border: 10px;
}
section h2 {
font-size: 26px;
margin: 10px 0 20px 0;
text-shadow: 1px 1px #FFF;
}
form {
margin-top: 20px;
}
label {
display: block;
margin: 15px 0 5px 0;
font-weight: 600;
text-shadow: 1px 1px #FFF;
}
input[type="text"],
textarea {
padding: 6px 10px;
background-color: rgba(255,255,255,.6);
border: 1px solid #777;
border-radius: 4px;
width: 100%;
box-shadow: none;
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
textarea {
min-height: 85px;
max-width: 100%;
}
input[type="submit"] {
background-color: transparent;
display: inline-block;
float: right;
margin-top: 15px;
padding: 6px 30px;
color: #555;
text-align: center;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
border-radius: 4px;
border: 1px solid #999;
cursor: pointer;
box-sizing: border-box;
width: 100%;
}
input[type="text"]:focus,
textarea:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
background-color: #fff;
border: 1px solid #555;
outline: 0;
}
footer {
text-align: center;
margin-bottom: 20px;
}
footer h4 {
font-size: 26px;
margin: 20px 0;
text-shadow: 1px 1px #FFF;
}
footer a {
color: #111;
text-decoration: none;
}
footer a:hover {
color: #444;
}
/* gooter als 400px */
@media (min-width: 400px) {
.container {
width: 85%;
padding: 0;
}
}
/* grooter als 750px */
@media (min-width: 750px) {
.container {
width: 80%;
}
.col {
margin-left: 4%;
}
.col:first-child {
margin-left: 0;
}
.four {
width: 30.6666666667%;
}
.six {
width: 48%;
}
.eight {
width: 65.3333333333%;
}
.twelve {
width: 100%;
margin-left: 0;
}
header {
padding: 60px 15px 0 15px;
}
h1 {
text-align: left;
}
nav ul {
float: right;
margin-top: 0px;
width: auto;
}
nav li {
clear: none;
float: left;
margin: 1px;
width: auto;
}
nav li a {
width: auto;
}
input[type="submit"] {
width: auto;
}
} -
Links checken in afrolmenu
Waarom een menu met JS ? Zoiets kun je makkelijk in CSS maken, waardoor je linkcheckers denk ik geen conflict krijgen met je JS.
Dorpdown menu css only
-
simple filemanagement systeempje
-
Contact pagina menu wordt niet goed weergegeven op telefoon, alle andere pagina's werken wel gewoon