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

carlos · za 26 mrt 2016

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

ReneV · za 26 mrt 2016

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"

carlos · za 26 mrt 2016

Beste Rene,

Bedankt man, Zojuist aangepast... maar hij blijft het in de war gooien op de contact.html page?
Hoe kan dit eigenlijk?

nuet · zo 27 mrt 2016

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.

nuet · zo 27 mrt 2016

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.

carlos · zo 27 mrt 2016

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

Bedankt en een vrolijk pasen al te saam

vinTage · zo 27 mrt 2016

Op mijn samsung is het overal verkeerd zoals je ziet, de oplossing ligt gewoon bij het responsive maken

nuet · zo 27 mrt 2016

Zowel op tablet en phone (beiden Android) zie ik het menu gewoon normaal zonder verschuivingen. Geen idee waarom jij het anders ziet

carlos · zo 27 mrt 2016

@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...

en wat jij zegt ligt het volgens mij niet aan...eerder ergens de CSS?

De site is niet responsive, en wil ik ook niet

Wie weet de oplossing? graag...

of wat het kan zijn?

nuet · zo 27 mrt 2016

ja ik weet niet hoe ik een snapshot moet maken van tablet en phone anders stuur ik je beelden hoe ik het zie

carlos · zo 27 mrt 2016

Even op google screenshot en dan jou merk en type telefoon, dan komt het tevoorschijn

@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

nuet · zo 27 mrt 2016

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

carlos · zo 27 mrt 2016

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?

nuet · zo 27 mrt 2016

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

carlos · zo 27 mrt 2016

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....

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...

nuet · zo 27 mrt 2016

Oke dan zet bij beiden eens helemaal geen width; width gewoon weglaten en kijk eens wat ie nu doet

carlos · zo 27 mrt 2016

Gaat steeds beter

Zo zie je het nu:

nuet · zo 27 mrt 2016

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

carlos · zo 27 mrt 2016

Er gebeurde wel iets, maar heel minimaal. Het schoof wel in zijn geheel dichterbij.
Nu ziet het er zo uit...

carlos · zo 27 mrt 2016

Nog flink lopen uitproberen, maar niets schijnt nog echt te werken....ik blijf het raar vinden @nuet

wat jij/jullie?

nuet · zo 27 mrt 2016

ja ik vind het raar omdat het op mijn phone wel goed staat.

carlos · zo 27 mrt 2016

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

ReneV · ma 28 mrt 2016

Waarom werken met % als je de site niet responsive maakt?
Heb je nog een url waar de site staat ?

admin · ma 28 mrt 2016

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?

carlos · di 29 mrt 2016

@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

ReneV · wo 30 mrt 2016

Ik bedoel de url waar het gedeelte staat wat fout gaat.
test1/contact.php geeft error 404

ReneV · do 31 mrt 2016

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

nuet · do 31 mrt 2016

@ReneV Daar heb je vlg mij wel ff op zitten kniezen; gaaf!

ReneV · do 31 mrt 2016

@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 · do 31 mrt 2016

Onwijs bedankt luitjes! Respect!

carlos · zo 3 apr 2016

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!


Mozilla:
Crome:
Opera:
IE:
Safari:

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

Reacties