krijg het drop down menu niet te pakken......

Status
Niet open voor verdere reacties.
S

stresskipje

Gebruiker
Lid geworden
12 jun 2011
Berichten
23
drop down menu werkt niet op IE 8 en Safari

Ik heb een nieuwe site gemaakt met een dropdown menu, maar na het uploaden bleek al snel dat het menu niet werkte op Internet Explorer 11 en op de Ipad (Safari). Op Internet Explorer 10 en op Android werkt het wel.

Kan iemand mij helpen om de code aan te passen zodat hij het wel doet op Internet Explorer 11 en Safari?

Heel erg bedankt!!


Dit is mijn code:
HTML: 
<head>
<style>

/*---- CROSS BROWSER DROPDOWN MENU ----*/

ul#nav {margin: 0 0 0 0;}

ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}

ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; background: #17375e; color: #fff;}

ul.drop { position: relative; z-index: 597; float: left; }

ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }

ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #5086cc; }

ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 300px; background: #17375e;}

ul.drop ul li { float: none; }

ul.drop ul ul { top: -2px; left: 100%; }

ul.drop li:hover > ul { visibility: visible }

#nav li a {
	font-family: Verdana, Geneva, sans-serif;
}
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
}
body {
	background-color: #d6eaf4;
	margin-left: 2%;
	margin-top: 2%;
	margin-right: 2%;
	margin-bottom: 2%;
}
a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
}
a:visited {
	color: #666;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}
</style> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>PBC Boomgaardshoek</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body text="#000000" link="#000000" vlink="#666666" alink="#000000">
<table width="100%" border="0">
  <tr>
    <td><img src="../plaatjes/banner smal.gif" width="1349" height="240"></td>
  </tr>
</table>

<ul id="nav" class="drop">
  <li><a href="../index.html">Home</a></li>
  <li>Algemeen
    <ul>
      <li><a href="../algemeen - nieuws.html">Nieuws</a></li>
      <li><a href="../algemeen - vereniging.html">Vereniging</a></li>
      <li><a href="../algemeen - lid worden.html">Lid worden</a></li>
      <li><a href="../algemeen - bestuur.html">Bestuur</a></li>
      <li><a href="../algemeen - sponsoren.html">Sponsoren</a></li>
      <li><a href="../algemeen - pbctje.html">PBC'tje</a></li>
      <li><a href="../algemeen - weetjes.html">Weetjes</a></li>
    </ul>
  </li>
  <li>Kalender
    <ul>
      <li><a href="../kalender - speeltijden.html">Speeltijden</a></li>
      <li><a href="../kalender - activiteiten.html">Activiteiten</a></li>
      <li><a href="../kalender - kalender.html">Kalender</a></li>
    </ul>
  </li>
  <li>Competitie
    <ul>
     <li><a href="../competitie - nieuws.html">nieuws</a></li>
     <li><a href="../competitie - indeling.html">Indeling</a></li>
      <li><a href="../competitie - training.html">Training</a></li>
      <li><a href="../competitie - speelschema.html">Speelschema</a></li>
    </ul>
  </li>
  <li>Jeugd
    <ul>
     <li><a href="../jeugd - nieuws.html">Nieuws</a></li>
      <li><a href="../jeugd - activiteiten.html">Activiteiten</a></li>
      <li><a href="../jeugd - competitie.html">Competitie</a></li>
      <li><a href="../jeugd - training.html">Training</a></li>
      <li><a href="../jeugd - speelschema.html">Speelschema</a></li>
    </ul>
  </li>
  <li><a href="../foto's.html">Foto's</a></li>
  <li>Contact
    <ul>
     <li><a href="../contact - contact.html">Contact</a></li>
      <li><a href="../contact - downloads.html">Downloads</a></li>
      <li><a href="../contact - links.html">Links</a></li>
    </ul>
  <li>Deze maand
    <ul>
     <li><a href="../jeugd - speelschema.html">Jeugdcompetitie</a></li>
      <li><a href="../activiteiten senioren.html">Open toernooi</a></li>
    </ul>
  </li>
</ul>
<p>&nbsp;</p>
<!-- TemplateBeginEditable name="Inhoud" -->Inhoud<!-- TemplateEndEditable -->
<p>&nbsp;</p>
</body>
</html>
 
Laatst bewerkt door een moderator:
Je gebruikt een verouderde versie van deze cross-browser code
Probeer deze eens

Code: 
/* menu framework niet wijzigen */

.drop, .drop li, .drop ul, .drop a, .drop span {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	list-style:none;
}
.drop {
	position:relative;
	z-index:597;
	float:left;
}
.drop li {
	float:left;
	min-height:1px;
	line-height:1;
	vertical-align:middle;
}
.drop li:hover {
	position:relative;
	z-index:599;
	cursor:pointer;
}
.drop a, .drop span {
	display:block;
	text-decoration:none;
}
.drop ul {
	visibility:hidden;
	position:absolute;
	top:100%;
	left:0;
	z-index:598;
}
.drop ul li {
	float:none;
}
.drop ul ul {
	top:0;
	left:100%;
}
.drop li:hover > ul {
	visibility:visible;
}

/* hieronder geef je het menu de vormgeving */

.drop, .drop li, .drop ul {
	background: #17375e;
	color: #fff;
}
.drop a {
	padding: 5px 10px;
	color: #fff;
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
	line-height: 1.3;
}
.drop li:hover {
	background: #5086cc;
}
.drop ul {
	width: 300px;
	background: #17375e;
}
.drop ul ul {
	top: -2px; /* nodig? */
}
 
Ik heb het geprobeerd, maar nu heb ik een ander probleem........ Als ik het bovenste gedeelte van de code aanpas met de nieuwe code wil mijn sjabloon niet aanpassen naar de gekoppelde pagina's toe. Als ik een nieuw sjabloon maak, zet hij het lettertype van de hele website om naar het standaardlettertype. Terwijl overal in de code staat dat het naar verdana, geneva, sans serief. Ik begrijp echt niet wat ik verkeerd doe.......

Ik hoop dat je me nog een keer kan helpen.....

Voor de volledigheid, nog een keer de nieuwe code:
Code: 
/*---- CROSS BROWSER DROPDOWN MENU ----*/
.drop, .drop li, .drop ul, .drop a, .drop span {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	list-style:none;
}
.drop {
	position:relative;
	z-index:597;
	float:left;
}
.drop li {
	float:left;
	min-height:1px;
	line-height:1;
	vertical-align:middle;
}
.drop li:hover {
	position:relative;
	z-index:599;
	cursor:pointer;
}
.drop a, .drop span {
	display:block;
	text-decoration:none;
}
.drop ul {
	visibility:hidden;
	position:absolute;
	top:100%;
	left:0;
	z-index:598;
}
.drop ul li {
	float:none;
}
.drop ul ul {
	top:0;
	left:100%;
}
.drop li:hover > ul {
	visibility:visible;
}

/* hieronder geef je het menu de vormgeving */

.drop, .drop li, .drop ul {
	background: #17375e;
	color: #fff;
}
.drop a {
	padding: 5px 10px;
	color: #fff;
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
	line-height: 1.3;
}
.drop li:hover {
	background: #5086cc;
}
.drop ul {
	width: 300px;
	background: #17375e;
}
.drop ul ul {
	top: -2px; /* nodig? */


body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
}
body {
	background-color: #d6eaf4;
	margin-left: 2%;
	margin-top: 2%;
	margin-right: 2%;
	margin-bottom: 2%;
}
a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
}
a:visited {
	color: #666;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
}
 
Laatst bewerkt door een moderator:
Hoe ziet de html eruit van dit menu?

*** edit:
Ik mis een } bij
Code: 
.drop ul ul {
  top: -2px; /* nodig? */
[B][COLOR="#0000CD"]}[/COLOR][/B]
 
Laatst bewerkt:
Super bedankt!! Het missende } was de oorzaak dat hij het niet deed....... Hij heeft nu heel de site aangepast.

Maar als ik hem nu upload, werkt het nog steeds niet op mijn ipad en op internet explorer 8. Heb ik dan toch iets verkeerd gedaan?

HTML: 
/*---- CROSS BROWSER DROPDOWN MENU ----*/
.drop, .drop li, .drop ul, .drop a, .drop span {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	list-style:none;
}
.drop {
	position:relative;
	z-index:597;
	float:left;
}
.drop li {
	float:left;
	min-height:1px;
	line-height:1;
	vertical-align:middle;
}
.drop li:hover {
	position:relative;
	z-index:599;
	cursor:pointer;
}
.drop a, .drop span {
	display:block;
	text-decoration:none;
}
.drop ul {
	visibility:hidden;
	position:absolute;
	top:100%;
	left:0;
	z-index:598;
}
.drop ul li {
	float:none;
}
.drop ul ul {
	top:0;
	left:100%;
}
.drop li:hover > ul {
	visibility:visible;
}

/* hieronder geef je het menu de vormgeving */

.drop, .drop li, .drop ul {
	background: #17375e;
	color: #fff;
}
.drop a {
	padding: 5px 10px;
	color: #fff;
	font-family: verdana, geneva, sans-serif;
	font-size: 14px;
	line-height: 1.3;
}
.drop li:hover {
	background: #5086cc;
}
.drop ul {
	width: 400px;
	background: #17375e;
}
.drop ul ul {
	top: -2px; /* nodig? */
}

body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
}
body {
	background-color: #d6eaf4;
	margin-left: 2%;
	margin-top: 2%;
	margin-right: 2%;
	margin-bottom: 2%;
}
a {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
}
a:visited {
	color: #666;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
}
</style> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>PBC Boomgaardshoek</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>

<body bgcolor="#d6eaf4" text="#000000" link="#000000" vlink="#666666" alink="#000000">
<table width="100%" border="0">
  <tr>
    <td><img src="../plaatjes/banner smal.gif" width="1349" height="240"></td>
  </tr>
</table>

<ul id="nav" class="drop">
  <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/index.html">Home</a></li>
  <li>Algemeen
    <ul>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/algemeen - nieuws.html">Nieuws</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/algemeen - vereniging.html">Vereniging</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/algemeen - lid worden.html">Lid worden</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/algemeen - bestuur.html">Bestuur</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/algemeen - sponsoren.html">Sponsoren</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/algemeen - pbctje.html">PBC'tje</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/algemeen - weetjes.html">Weetjes</a></li>
    </ul>
  </li>
  <li>Kalender
    <ul>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/kalender - speeltijden.html">Speeltijden</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/kalender - activiteiten.html">Activiteiten</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/kalender - kalender.html">Kalender</a></li>
    </ul>
  </li>
  <li>Competitie
    <ul>
     <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/competitie - nieuws.html">nieuws</a></li>
     <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/competitie - indeling.html">Indeling</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/competitie - training.html">Training</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/competitie - speelschema.html">Speelschema</a></li>
    </ul>
  </li>
  <li>Jeugd
    <ul>
     <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/jeugd - nieuws.html">Nieuws</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/jeugd - activiteiten.html">Activiteiten</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/jeugd - competitie.html">Competitie</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/jeugd - training.html">Training</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/jeugd - speelschema.html">Speelschema</a></li>
    </ul>
  </li>
  <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/foto's.html">Foto's</a></li>
  <li>Contact
    <ul>
     <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/contact - contact.html">Contact</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/contact - downloads.html">Downloads</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/contact - links.html">Links</a></li>
    </ul>
  <li>Deze maand
    <ul>
     <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/jeugd - speelschema.html">Jeugdcompetitie</a></li>
      <li><a href="file:///C|/Users/mir-mar/Documents/Mijn websites/activiteiten senioren.html">Open toernooi</a></li>
    </ul>
  </li>
</ul>
<p>&nbsp;</p>
<!-- TemplateBeginEditable name="Inhoud" -->Inhoud<!-- TemplateEndEditable -->
</body>
</html>
 
Laatst bewerkt door een moderator:
Er mist ergens een </li>
Elke <li> zonder <a> wordt <li><span>tekst</span>
html
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>PBC Boomgaardshoek</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<ul id="nav" class="drop">
<li><a href="/users/mir-mar/documents/mijn-websites/index.html">Home</a></li>
<li><span>Algemeen</span>
  <ul>
  <li><a href="/users/mir-mar/documents/mijn-websites/algemeen-nieuws.html">Nieuws</a></li>
  <li><a href="/users/mir-mar/documents/mijn-websites/algemeen-vereniging.html">Vereniging</a></li>
  <li><a href="/users/mir-mar/documents/mijn-websites/algemeen-lid worden.html">Lid worden</a></li>
  <li><a href="/users/mir-mar/documents/mijn-websites/algemeen-bestuur.html">Bestuur</a></li>
  <li><a href="/users/mir-mar/documents/mijn-websites/algemeen-sponsoren.html">Sponsoren</a></li>
  <li><a href="/users/mir-mar/documents/mijn-websites/algemeen-pbctje.html">PBC'tje</a></li>
  <li><a href="/users/mir-mar/documents/mijn-websites/algemeen-weetjes.html">Weetjes</a></li>
  </ul>
</li>
<li><span>Kalender</span>
  <ul>
  <li><a href="/users/mir-mar/documents/Mijn websites/kalender - speeltijden.html">Speeltijden</a></li>
  <li><a href="/users/mir-mar/documents/Mijn websites/kalender - activiteiten.html">Activiteiten</a></li>
  <li><a href="/users/mir-mar/documents/Mijn websites/kalender - kalender.html">Kalender</a></li>
  </ul>
</li>
</ul>
css
Code: 
/*---- minimale reset ----*/
* {
margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent;
}
html, body {
font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
table {border-collapse: collapse; border-spacing: 0; font-size: inherit;}
th {vertical-align: bottom;}
td {vertical-align: top;}
* {font-weight: inherit; font-style: inherit; font-family: inherit;}
a {text-decoration: none; text-align: left; cursor: pointer;}
a:hover, a:focus {text-decoration: underline;}
a:active, :focus, *:focus {outline: 0; outline-style: none; outline-width: 0;}

/*---- nav framework (niet wijzigen) ----*/
.drop, .drop li, .drop ul, .drop a, .drop span {
margin: 0; padding: 0; border: 0; outline: 0; list-style: none;}
.drop {
position: relative; z-index: 597; float: left;}
.drop li {
float: left; min-height: 1px; line-height: 1; vertical-align: middle;}
.drop li:hover {
position: relative; z-index: 599; cursor: pointer;}
.drop a, .drop span {
display: block; text-decoration: none;}
.drop ul {
visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
.drop ul li {
float: none;}
.drop ul ul {
top: 0; left: 100%;}
.drop li:hover > ul {
visibility: visible;}

/*---- defaults ----*/
body, td, th {
font-family: verdana, geneva, sans-serif;
font-size: 14px;
}
body {
margin: 2%;
background-color: #d6eaf4;
color: #000;
}
a {color: #000; font-size: 14px;}
a:visited {color: #666;}
a:hover {color: #000;}
a:active {color: #000;}

/*---- nav opmaak ----*/
.drop li {
padding: 8px 6px 0 6px;
background: #17375e;
}
.drop li:hover {
background: #5086cc;
}
.drop a, .drop span {
height: 30px;
line-height: 30px;
font: normal 14px verdana, geneva, sans-serif;
color: #fff;
background: transparent;
}
.drop ul li {
width: auto;
}
.drop ul a {
padding-right: 20px;
}

*** edit
met deze css kun je
<body bgcolor="#d6eaf4" text="#000000" link="#000000" vlink="#666666" alink="#000000">
<table width="100%" border="0">
wijzigen in
<body>
<table>
 
Laatst bewerkt:
Sorry, ben ik weer...... Ik heb alles netjes aangepast en nu krijg ik een error, nl error at line 97, column 7 (absolute position 2401) Geneste werkbare gebieden. Rij 97 is <head> in de html code. Door de code is de rest van de site ook niet bijgewerkt........

Ik hoop dat u me nog een keer kunt helpen......

HTML: 
<head>
<style>
/*---- minimale reset ----*/
* {
margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent;
}
html, body {
font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
table {border-collapse: collapse; border-spacing: 0; font-size: inherit;}
th {vertical-align: bottom;}
td {vertical-align: top;}
* {font-weight: inherit; font-style: inherit; font-family: inherit;}
a {text-decoration: none; text-align: left; cursor: pointer;}
a:hover, a:focus {text-decoration: underline;}
a:active, :focus, *:focus {outline: 0; outline-style: none; outline-width: 0;}

/*---- nav framework (niet wijzigen) ----*/
.drop, .drop li, .drop ul, .drop a, .drop span {
margin: 0; padding: 0; border: 0; outline: 0; list-style: none;}
.drop {
position: relative; z-index: 597; float: left;}
.drop li {
float: left; min-height: 1px; line-height: 1; vertical-align: middle;}
.drop li:hover {
position: relative; z-index: 599; cursor: pointer;}
.drop a, .drop span {
display: block; text-decoration: none;}
.drop ul {
visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
.drop ul li {
float: none;}
.drop ul ul {
top: 0; left: 100%;}
.drop li:hover > ul {
visibility: visible;}

/*---- defaults ----*/
body, td, th {
font-family: verdana, geneva, sans-serif;
font-size: 14px;
}
body {
margin: 2%;
background-color: #d6eaf4;
color: #000;
}
a {
	color: #000;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}
a:visited {color: #666;}
a:hover {color: #000;}
a:active {color: #000;}

/*---- nav opmaak ----*/
.drop li {
padding: 8px 6px 0 6px;
background: #17375e;
}
.drop li:hover {
background: #5086cc;
}
.drop a, .drop span {
height: 30px;
line-height: 30px;
font: normal 14px verdana, geneva, sans-serif;
color: #fff;
background: transparent;
}
.drop ul li {
width: auto;
}
.drop ul a {
padding-right: 20px;
}
</style> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <!-- TemplateBeginEditable name="doctitle" -->
 <title>PBC Boomgaardshoek</title>
 <!-- TemplateEndEditable -->
 <!-- TemplateBeginEditable name="head" -->
 <!-- TemplateEndEditable -->
 </head>

<body>
 <table> 
 <tr>
 <td><img src="../plaatjes/banner smal.gif" width="1349" height="240"></td>
 </tr>
 </table>
  
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="style.css" />
<body>

<ul id="nav" class="drop">
<li><a href="/index.html">Home</a></li>
<li><span>Algemeen</span>
  <ul>
  <li><a href="/algemeen - nieuws.html">Nieuws</a></li>
  <li><a href="/algemeen - vereniging.html">Vereniging</a></li>
  <li><a href="/algemeen - lid worden.html">Lid worden</a></li>
  <li><a href="/algemeen - bestuur.html">Bestuur</a></li>
  <li><a href="/algemeen - sponsoren.html">Sponsoren</a></li>
  <li><a href="/algemeen - pbctje.html">PBC'tje</a></li>
  <li><a href="/algemeen - weetjes.html">Weetjes</a></li>
  </ul>
</li>
<li><span>Kalender</span>
  <ul>
  <li><a href="/kalender - speeltijden.html">Speeltijden</a></li>
  <li><a href="/kalender - activiteiten.html">Activiteiten</a></li>
  <li><a href="/kalender - kalender.html">Kalender</a></li>
  </ul>
</li>
<li><span>Competitie</span>
  <ul>
  <li><a href="/competitie - nieuws.html">nieuws</a></li>
  <li><a href="/competitie - indeling.html">indeling</a></li>
  <li><a href="/competitie - training.html">training</a></li>
  <li><a href="/competitie - speelschema.html">speelschema</a></li>
  </ul>
  <li><span>Jeugd</span>
  <ul>
  <li><a href="/jeugd - nieuws.html">Nieuws</a></li>
  <li><a href="/jeugd - activiteiten.html">Activiteiten</a></li>
  <li><a href="/jeugd - training.html">Training</a></li>
  <li><a href="/jeugd - competitie.html">Competitie</a></li>
  <li><a href="/jeugd - speelschema.html">Speelschema</a></li>
  </ul>
  <li><a href="/foto's.html">Foto's</a></li>
<li><span>Contact</span>
  <ul>
  <li><a href="/contact - contact.html">Contact</a></li>
  <li><a href="/contact - downloads.html">Downloads</a></li>
  <li><a href="/contact - links.html">Links</a></li>
  </ul>
  <li><span>Deze maand</span>
  <ul>
  <li><a href="/jeugd - speelschema.html">Jeugdcompetitie</a></li>
  </ul>
</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- TemplateBeginEditable name="Inhoud" -->Inhoud<!-- TemplateEndEditable -->
<p>&nbsp;</p>
</body>
</html>
 
Laatst bewerkt door een moderator:
Verwijder <body> op regel 102.
Verwijder <meta http-equiv....> op regel 80.
Verwijder <head> op regel 1.
Dan regel 93-99 helemaal bovenaan in je code zetten (de regels hieronder bedoel ik)
Code: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="style.css" />
En in je menu moet er overal direct onder een </ul> een </li> komen. Je mist er een paar.
 
Sorry, ben ik weer..... Ik heb nu geen errors meer!! Dank je wel voor de aanwijzingen!! Maar nu wil hij niet doorschakelen naar de pagina. Ik kan wel op de link drukken, maar hij wil de pagina niet openen....... Ik wordt er echt een beetje moe van....... Ik stop de code er maar weer bij. Bedankt!

HTML: 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
/*---- minimale reset ----*/
* {
margin: 0; padding: 0; border: 0; vertical-align: baseline; background: transparent;
}
html, body {
font-size: 100%; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
}
table {border-collapse: collapse; border-spacing: 0; font-size: inherit;}
th {vertical-align: bottom;}
td {vertical-align: top;}
* {font-weight: inherit; font-style: inherit; font-family: inherit;}
a {text-decoration: none; text-align: left; cursor: pointer;}
a:hover, a:focus {text-decoration: underline;}
a:active, :focus, *:focus {outline: 0; outline-style: none; outline-width: 0;}

/*---- nav framework (niet wijzigen) ----*/
.drop, .drop li, .drop ul, .drop a, .drop span {
margin: 0; padding: 0; border: 0; outline: 0; list-style: none;}
.drop {
position: relative; z-index: 597; float: left;}
.drop li {
float: left; min-height: 1px; line-height: 1; vertical-align: middle;}
.drop li:hover {
position: relative; z-index: 599; cursor: pointer;}
.drop a, .drop span {
display: block; text-decoration: none;}
.drop ul {
visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598;}
.drop ul li {
float: none;}
.drop ul ul {
top: 0; left: 100%;}
.drop li:hover > ul {
visibility: visible;}

/*---- defaults ----*/
body, td, th {
font-family: verdana, geneva, sans-serif;
font-size: 14px;
}
body {
margin: 2%;
background-color: #d6eaf4;
color: #000;
}
a {
	color: #000;
	font-size: 14px;
	font-family: Verdana, Geneva, sans-serif;
}
a:visited {color: #666;}
a:hover {color: #000;}
a:active {color: #000;}

/*---- nav opmaak ----*/
.drop li {
padding: 8px 6px 0 6px;
background: #17375e;
}
.drop li:hover {
background: #5086cc;
}
.drop a, .drop span {
height: 30px;
line-height: 30px;
font: normal 14px verdana, geneva, sans-serif;
color: #fff;
background: transparent;
}
.drop ul li {
width: auto;
}
.drop ul a {
padding-right: 20px;
}
</style> 

 <!-- TemplateBeginEditable name="doctitle" -->
 <title>PBC Boomgaardshoek</title>
 <!-- TemplateEndEditable -->
 <!-- TemplateBeginEditable name="head" -->
 <!-- TemplateEndEditable -->
 </head>
<table width="90%" border="0">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<body>
<table width="90%" border="0">
  <tr>
    <td><img src="../plaatjes/banner smal.gif" width="1349" height="240"></td>
  </tr>
</table>
   
<ul id="nav" class="drop">
<li><a href="/index.html">Home</a></li>
<li><span>Algemeen</span>
  <ul>
  <li><a href="/algemeen - nieuws.html">Nieuws</a></li>
  <li><a href="/algemeen - vereniging.html">Vereniging</a></li>
  <li><a href="/algemeen - lid worden.html">Lid worden</a></li>
  <li><a href="/algemeen - bestuur.html">Bestuur</a></li>
  <li><a href="/algemeen - sponsoren.html">Sponsoren</a></li>
  <li><a href="/algemeen - pbctje.html">PBC'tje</a></li>
  <li><a href="/algemeen - weetjes.html">Weetjes</a></li>
  </ul>
</li>
<li><span>Kalender</span>
  <ul>
  <li><a href="/kalender - speeltijden.html">Speeltijden</a></li>
  <li><a href="/kalender - activiteiten.html">Activiteiten</a></li>
  <li><a href="/kalender - kalender.html">Kalender</a></li>
  </ul>
</li>
<li><span>Competitie</span>
  <ul>
  <li><a href="/competitie - nieuws.html">nieuws</a></li>
  <li><a href="/competitie - indeling.html">indeling</a></li>
  <li><a href="/competitie - training.html">training</a></li>
  <li><a href="/competitie - speelschema.html">speelschema</a></li>
  </ul>
  </li>
  <li><span>Jeugd</span>
  <ul>
  <li><a href="/jeugd - nieuws.html">Nieuws</a></li>
  <li><a href="/jeugd - activiteiten.html">Activiteiten</a></li>
  <li><a href="/jeugd - training.html">Training</a></li>
  <li><a href="/jeugd - competitie.html">Competitie</a></li>
  <li><a href="/jeugd - speelschema.html">Speelschema</a></li>
  </ul>
  </li>
  <li><a href="/foto's.html">Foto's</a></li>
<li><span>Contact</span>
  <ul>
  <li><a href="/contact - contact.html">Contact</a></li>
  <li><a href="/contact - downloads.html">Downloads</a></li>
  <li><a href="/contact - links.html">Links</a></li>
  </ul>
  </li>
  <li><span>Deze maand</span>
  <ul>
  <li><a href="/jeugd - speelschema.html">Jeugdcompetitie</a></li>
  </ul>
</li>
</ul>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<!-- TemplateBeginEditable name="Inhoud" -->Inhoud<!-- TemplateEndEditable -->
<p>&nbsp;</p>
</body>
</html>
 
Laatst bewerkt door een moderator:
1. Tussen </head> en <body> alle html weghalen! Hier mag niets tussen staan. Eventueel verplaatsen na de <body> tag.

2. In de href van een <a> geen spaties gebruiken. Maak van een spatie een "min-teken".
Voorbeeld: <a href="/algemeen - lid worden.html">
Dit wordt dus <a href="/algemeen-lid-worden.html">

Mogelijk werkt het bij jou niet goed door de / (begin bij de root).
 
Laatst bewerkt:
Ik heb de aanwijzingen weer precies opgevolgd. Nu doen "home" en "foto's" het wel maar, maar alle links in het drop down menu geven steeds aan dat ze de pagina niet kunnen vinden.....

HTML: 
</head>

<body>
<table width="90%" border="0">
  <tr>
    <td><img src="../plaatjes/banner smal.gif" width="1349" height="240"></td>
  </tr>
</table>
   
<ul id="nav" class="drop">
<li><a href="index.html">Home</a></li>
<li><span>Algemeen</span>
  <ul>
  <li><a href="algemeen-nieuws.html">Nieuws</a></li>
  <li><a href="algemeen-vereniging.html">Vereniging</a></li>
  <li><a href="algemeen-lid-worden.html">Lid worden</a></li>
  <li><a href="algemeen-bestuur.html">Bestuur</a></li>
  <li><a href="algemeen-sponsoren.html">Sponsoren</a></li>
  <li><a href="algemeen-pbctje.html">PBC'tje</a></li>
  <li><a href="algemeen-weetjes.html">Weetjes</a></li>
  </ul>
</li>
<li><span>Kalender</span>
  <ul>
  <li><a href="kalender-speeltijden.html">Speeltijden</a></li>
  <li><a href="kalender-activiteiten.html">Activiteiten</a></li>
  <li><a href="kalender-kalender.html">Kalender</a></li>
  </ul>
</li>
<li><span>Competitie</span>
  <ul>
  <li><a href="competitie-nieuws.html">nieuws</a></li>
  <li><a href="competitie-indeling.html">indeling</a></li>
  <li><a href="competitie-training.html">training</a></li>
  <li><a href="competitie-speelschema.html">speelschema</a></li>
  </ul>
  </li>
  <li><span>Jeugd</span>
  <ul>
  <li><a href="jeugd-nieuws.html">Nieuws</a></li>
  <li><a href="jeugd-activiteiten.html">Activiteiten</a></li>
  <li><a href="jeugd-training.html">Training</a></li>
  <li><a href="jeugd-competitie.html">Competitie</a></li>
  <li><a href="jeugd-speelschema.html">Speelschema</a></li>
  </ul>
  </li>
  <li><a href="foto's.html">Foto's</a></li>
<li><span>Contact</span>
  <ul>
  <li><a href="contact-contact.html">Contact</a></li>
  <li><a href="contact-downloads.html">Downloads</a></li>
  <li><a href="contact-links.html">Links</a></li>
  </ul>
  </li>
  <li><span>Deze maand</span>
  <ul>
  <li><a href="jeugd-speelschema.html">Jeugdcompetitie</a></li>
  </ul>
</li>
 
Laatst bewerkt door een moderator:
Voorbeeldje:
<li><a href="algemeen-lid-worden.html">Lid worden</a></li>
Dan moet er een bestand algemeen-lid-worden.html zijn in dezlefde map.

Check even of je aan het eind van het menu een /ul hebt staan
Code: 
<ul>
<li><a href="jeugd-speelschema.html">Jeugdcompetitie</a></li>
</ul>
</li> 
[COLOR="#B22222"]</ul>[/COLOR]
 
Laatst bewerkt:
Heel erg bedankt voor het helpen...... Ik ben nu bezig met een andere, hij werkt nog steeds niet op de ipad.........
 
Hallo,

Ik heb het nu voor elkaar om een drop down menu te maken die het ook op de ipad en in IE explorer doet. Nu ben ik er heel blij mee, hij doet het zelfs op internet explorer 11. Maar nu wil hij het drop down menu soms niet laten staan, zodat je erop kunt klikken. Soms moet je er 3x op gaan staan om hem te laten staan. Heeft iemand enig idee hoe ik dat kan oplossen?

Voor de volledigheid hierbij mijn css-code:
Code: 
#cssmenu {
  width: auto;
  border: 1px solid #17375e;
  background: #17375e;
}
#cssmenu > ul {
  padding: 1px 0;
  margin: 0px;
  list-style: none;
  width: 100%;
  height: 30px;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  font: normal 12pt Verdana, Geneva, sans-serif;
}
#cssmenu > ul li {
  margin: 0;
  padding: 0;
  display: block;
  float: left;
  position: relative;
  width: 148px;
}
#cssmenu > ul li a:link,
#cssmenu > ul li a:visited {
  padding: 4px 0;
  display: block;
  text-align: center;
  text-decoration: none;
  background: #17375e;
  color: #ffffff;
  width: 148px;
}
#cssmenu > ul li:hover a,
#cssmenu > ul li a:hover,
#cssmenu > ul li a:active {
  padding: 4px 0;
  display: block;
  text-align: center;
  text-decoration: none;
  background: #265b9b;
  color: #ffffff;
  width: 146px;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
}
#cssmenu > ul li ul {
  margin: 0;
  padding: 1px 1px 0;
  list-style: none;
  display: none;
  background: #ffffff;
  width: 146px;
  position: absolute;
  top: 30px;
  left: -1px;
  border: 1px solid #17375e;
  border-top: none;
}
#cssmenu > ul li:hover ul {
  display: block;
}
#cssmenu > ul li ul li {
  clear: left;
  width: 146px;
}
#cssmenu > ul li ul li a:link,
#cssmenu > ul li ul li a:visited {
  clear: left;
  background: #17375e;
  padding: 4px 0;
  width: 146px;
  border: none;
  border-bottom: 1px solid #ffffff;
  position: relative;
  z-index: 1000;
}
#cssmenu > ul li ul li:hover a,
#cssmenu > ul li ul li a:active,
#cssmenu > ul li ul li a:hover {
  clear: left;
  background: #265b9b;
  padding: 4px 0;
  width: 146px;
  border: none;
  border-bottom: 1px solid #ffffff;
  position: relative;
  z-index: 1000;
}
#cssmenu > ul li ul li ul.navigation-3 {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  left: 145px;
  top: -2px;
  padding: 1px 1px 0 1px;
  border: 1px solid #17375e;
  border-left: 1px solid #17375e;
  background: #ffffff;
  z-index: 900;
}
#cssmenu > ul li ul li:hover ul.navigation-3 {
  display: block;
}
#cssmenu > ul li ul li ul.navigation-3 li a:link,
#cssmenu > ul li ul li ul.navigation-3 li a:visited {
  background: #17375e;
}


 
body,td,th {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 14px;
	color: #000;
}
body {
	background-color: #d6eaf4;
	margin-left: 2%;
	margin-top: 2%;
	margin-right: 2%;
	margin-bottom: 2%;
}
a {
	font-family: Verdana, Geneva, sans-serif;
	color: #000;
}
a:visited {
	color: #666;
}
a:hover {
	color: #000;
}
a:active {
	color: #000;
}
h1,h2,h3,h4,h5,h6 {
	font-family: Verdana, Geneva, sans-serif;
}
</style> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 
Laatst bewerkt:
Sorry, ik wist dat dat ik het ook in code kon neerzetten..... Ik heb het even aangepast. De andere vraag is ook van mij....... Dit menu doet het wel met safari en IE...... Hij flikkert alleen soms...... Ik weet ook niet of het in de code zit, of in de computer......
 
Laatst bewerkt:
Het wordt er voor de website bouwer niet makkerlijker op. Je moet nu rekening houden met lage- tot hoge resoluties op zowel phones, tablets als desktops (en ook al internet tv). En bij phones ook nog of het portrait of landscape is. Dan praat ik nog niet over de Google bril en andere ontwikkelingen.
Het probleem is dat een website wel kan zien hoeveel pixels een scherm heeft, maar het is onmogelijk om te detecteren hoe groot het scherm is in inches. Er zijn wel scripts waarmee je dit kunt benaderen. Deze scripts kijken naar de tekst van de user-agent en proberen hier uit te halen wat het merk, model, os of browser is. Met deze gegevens kan het script aardig bepalen of het een desktop, tablet of phone is. Een voorbeeld is http://detectmobilebrowsers.com . Maar helaas lopen deze scripts altijd achter omdat er telkens nieuwe mobiles uitkomen.

Omdat phones, tablets en desktops tegenwoordig dezelfde resolutie hebben is een responsive website niet meer de beste oplossing :confused:

*** edit: er is dus geen 123 oplossing voor een iPhone, iPad, Android, of ......
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan