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

ReneV

Info Algemeen

Naam
ReneV
Aangemeld
Bezoeken
820
Laatst Actief
Rollen
Administrator
Punten
137
Badges
6

Posts
732
  • Contact pagina menu wordt niet goed weergegeven op telefoon, alle andere pagina's werken wel gewoon

    stylenew.css is er niet
    carlos
  • Contact pagina menu wordt niet goed weergegeven op telefoon, alle andere pagina's werken wel gewoon

    @neut valt mee hoor.

    Pagina had weinig inhoud,
    dus je zoekt een grid style bv. skeleton, dan haal je hier uit wat je nodig hebt en dan pas je de rest een beetje aan.
    uiteraard kun je ook de rest laten staan, maar ja wat je niet gebruikt is onnodig laden :)

    carlos
  • Contact pagina menu wordt niet goed weergegeven op telefoon, alle andere pagina's werken wel gewoon

    Responsive en uptodate:

    HTML:

    <!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>
    CSS:

    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;
    }

    }
    nuetcarlos
  • contactformulier met attachment

    Omtrent de validation:

    // Toegestaande bestand grote in KB
    $max_size = 100; // size in KB
    // Error grote
    $valid_size = 'Bestand is te groot, toegestaande grote: ' . $max_size;
    // Toegestaande bestand extensies
    $extensions = array("jpg", "jpeg", "gif", "bmp");
    // Error extensie
    $valid_extensie = 'Dit bestand is niet toegestaan, alleen: ' . implode( ',', $extensies );
    Check:

    if(empty($_POST['naam']) || empty($_POST['e-mail']) || empty($_POST['bericht']) || !filter_var($_POST['e-mail'], FILTER_VALIDATE_EMAIL)) {
    $results['message'] = $valid;
    } elseif(is_uploaded_file($_FILES['bijlage'])) {
    $file = basename($_FILES['bijlage']['name']);
    $type = substr($file, strrpos($file, '.') + 1);
    $size = $_FILES["bijlage"]["size"]/1024;
    if($size>$max_size) {
    $results['message'] = $valid_size;
    }
    $ext = false;
    for($i=0; $i<sizeof($extensions); $i++) {
    if(strcasecmp($extensions[i], $type) == 0) {
    $ext = true;
    }
    }
    if(!$ext) {
    $results['message'] = $valid_extensions;
    }
    } else {
    Tevens zou ik als er een file is geupload, andere headers gebruiken en andere body dan dat er geen file is geupload ;)
    nuetploegie
  • 2 features toegevoegd

    Een chat gebruiken terwijl niemand online is voor reactie (NOT DON).

    Tevens zal je forum er door leiden, er zullen minder vraagstellingen zijn (topics) die dan via chat worden beantwoord.
    nuet