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

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

bewerkt vr 1 apr 2016 in Stylesheets Posts: 117
Beste Leden,

Ik ga de vraag hier toch nog maar een keer neer zetten. Het andere topic over responsive menu maken mag weg.

firstchoicesecurity.nl/test1/contact.html

Als ik via de PC en/of laptop op elke pagina het menu bekijkt is het goed, als ik dat doe via mijn telefoon is het ook goed behalve het menu van de contact.html page. Dit staat dan ineens een beetje in de war. De site is geen responsive website, is gewoon normaal. Dus iets klopt er niet, ik kan alleen 123 niet vinden wat het kan zijn...vermoedelijk de CSS?

Vandaar de vraag hier. Dank alvast!

PS. Hoop dat het nu een beetje een duidelijk omschrijving is :smile:
Getagd:
«1

Reacties

  • PMPosts: 732
    De class current die actief is op de contact pagina overschrijft de class last !

    HOME

    <ul id="menu">
    <li class="current"><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">Haka Workshop</a></li>
    <li class="last"><a href="contact.html">Contact</a></li>
    </ul>
    CONTACT

    <ul id="menu">
    <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">Haka Workshop</a></li>
    <li class="current"><a href="contact.html">Contact</a></li>
    </ul>
    verander op de contact pagina class="current" in class="current last"
    If it's not fun, you're not doing it right!
  • Beste Rene,

    Bedankt man, Zojuist aangepast... maar hij blijft het in de war gooien op de contact.html page?
    Hoe kan dit eigenlijk? :smile:
  • bewerkt zo 27 mrt 2016
    PMPosts: 879
    offtopic: ik had het vorige topic verwijderd op verzoek van Carlos. FF niet bij nagedacht dat er een comment van vinTage in stond. Heb daar niet opgelet en die is helaas verloren gegaan. Mijn excuses @vinTage voor dat

    vinTage edit:
    Geen probleem, ik had al het idee dat dat per ongeluk ging.
  • PMPosts: 879
    Als ik op mijn phone kijk zie ik het menu gewoon zoals ook op de pc. Heb een 4 inch schermpje, misschien dat het daar aan ligt. Maar maak anders eens een snapshot hoe jij het menu op je phone ziet.
  • :smile: Op de iphone ziet het er inderdaad goed uit, op de laptop, pc ook. Maar hier op een android smartphone (Samsung) en tablet ziet het er zo uit...Kijk met name naar het menu. Staat ineens door de war. En dit is alleen bij de contact.html zo...

    Goede leerstof :smile: Bedankt en een vrolijk pasen al te saam :blush:
    Screenshot_2016-03-27-10-55-05.jpg
    1079 x 1459 - 478K
  • Op mijn samsung is het overal verkeerd zoals je ziet, de oplossing ligt gewoon bij het responsive maken ;)
    SC20160327-120033.png
    320 x 480 - 46K
    SC20160327-120009.png
    320 x 480 - 133K
  • PMPosts: 879
    Zowel op tablet en phone (beiden Android) zie ik het menu gewoon normaal zonder verschuivingen. Geen idee waarom jij het anders ziet
  • @nuet -> ook bij contact.html? Bij vintage ontbreekt ook het 1 en ander...zie?

    En dat het hier en daar een beetje verkeerd staat, weet ik inmiddels... :blush:
    en wat jij zegt ligt het volgens mij niet aan...eerder ergens de CSS?

    De site is niet responsive, en wil ik ook niet :smile: :smiley:

    Wie weet de oplossing? graag... :wink: of wat het kan zijn?
  • PMPosts: 879
    ja ik weet niet hoe ik een snapshot moet maken van tablet en phone anders stuur ik je beelden hoe ik het zie
  • Even op google screenshot en dan jou merk en type telefoon, dan komt het tevoorschijn :smiley:
    @nuet hoe kan het dan zijn dat het op sommige devices en dan met name android, samsung, huawei een beetje verkeerd staat? Kan jij niet vinden in de HTML en/of CSS wat verkeerd kan staan eventueel?

    Thank Joe :smiley:
  • bewerkt zo 27 mrt 2016
    PMPosts: 879
    aha, power button en volume vasthouden dus; hieronder hoe ik het zie en idd je hebt gelijk; ik zie de contactlink niet in het menu op tablet, maar phone lijkt alles in orde
    tablet.jpg
    1280 x 800 - 353K
    phone.png
    480 x 800 - 152K
    tablet.jpg 352.7K
    phone.png 152.2K
  • Ok dank je Nuet en leden!
    Maar op de contact.html staat wel degelijk "contact" erbij, alleen staat hij onder het plaatje denk ik...?
    Het menu opschuiven naar links? Wat is de oplossing? :smiley:
  • bewerkt zo 27 mrt 2016
    PMPosts: 879
    in style.css kijk even naar #welcome en #menubar:
    #welcome
    { /*width: 325px;*/ /* uitschakelen */
    width: 25%;

    ....... en

    #menubar
    { /*width: 635px;*/ /* uitschakelen */
    width: 70%;
    Schakel de absolute breedtes eens uit en maar er relative van zoals hierboven



  • Ik heb in de css bij #welcome de width op 25% gezet en bij #menubar de width op 70%

    Het enige wat dan gebeurd is dat de tekst van het logo onder elkaar komt en het menu ziet er dan wel iets beter uit.
    Maar niet zoals op de andere pagina's.... :neutral: :smiley:

    Je zou zeggen, we zijn er bijna... alleen vind ik het vreemd dat op alle pagina's het wel goed staat behalve op de contact.php...
  • PMPosts: 879
    Oke dan zet bij beiden eens helemaal geen width; width gewoon weglaten en kijk eens wat ie nu doet
  • Gaat steeds beter :) Zo zie je het nu:
    Screenshot_2016-03-27-14-21-05.jpeg
    1080 x 1920 - 574K
  • PMPosts: 879
    ul#menu li a
    { font: normal 120% Arial, Helvetica, sans-serif;
    float: left;
    letter-spacing: -1px;
    height: 30px;
    padding: 15px 15px 10px 15px;
    2 paddings staan op 25px; verander die eens naar 15px
  • Er gebeurde wel iets, maar heel minimaal. Het schoof wel in zijn geheel dichterbij.
    Nu ziet het er zo uit...
    Screenshot_2016-03-27-14-54-36.jpeg
    1080 x 1920 - 532K
  • Nog flink lopen uitproberen, maar niets schijnt nog echt te werken....ik blijf het raar vinden @nuet
    :smiley: wat jij/jullie?
  • PMPosts: 879
    ja ik vind het raar omdat het op mijn phone wel goed staat.
  • Ik vind t ook raar en met name bij samsung en huawei devices...
    Kan ik er dan vanuit gaan dat het goed is?
    Thanks @nuet :smiley:
  • PMPosts: 732
    Waarom werken met % als je de site niet responsive maakt?
    Heb je nog een url waar de site staat ?
    If it's not fun, you're not doing it right!
  • PMPosts: 162
    vlg mij is dit nog steeds de url: http://firstchoicesecurity.nl/test1/contact.php
    Ja ik heb er ook aan gesleuteld maar wat ik niet begrijp is dat het op mijn phone (LG, android, 4 inch)gewoon goed staat en dat op andere phones, (van vinTage en Carlos) het blijkbaar niet goed staat. En dat zijn ook android telefoons. Het kan toch niet zo zijn dat er ook nog verschil bestaat in weergave als je een bepaald merk hebt? of dat een 5 inch schrem het weer anders weergeeft?
    De meeste fouten ontstaan tussen de monitor en de rugleuning van je stoel!
  • @admin Ja dat vind ik ook vreemd, heel vreemd....

    @ReneV Bedoel je het echte voorbeeld? of de URL zoals de site er nu echt uit ziet?

    Dank
  • PMPosts: 732
    Ik bedoel de url waar het gedeelte staat wat fout gaat.
    test1/contact.php geeft error 404
    If it's not fun, you're not doing it right!
  • PMPosts: 732
    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
    If it's not fun, you're not doing it right!
  • PMPosts: 879
    @ReneV Daar heb je vlg mij wel ff op zitten kniezen; gaaf!
    ReneVcarlos
  • PMPosts: 732
    @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
    If it's not fun, you're not doing it right!
  • Onwijs bedankt luitjes! Respect!
    :smile:
    nuetReneV
  • PMPosts: 117
    Probeer hem nu te uploaden, maar krijg het niet te zien in de test pagina...
    CSS style heb ik vernoemt naar stylenew en de html contactpagina heb ik vernoemt naar contactnew.php
    Om het eerst even te testen, maar krijg niet het juiste te zien...?

    @ReneV en @nuet :)

    Te zien op: firstchoicesecurity.nl/haka/contactnew.php

    Thanks!
Login of Registreer om te reageren.