Hallo,
Ik ben bezig met een website voor een bakkerij, deze website ga ik ook inleveren als informatica opdracht op mijn school. Deze moet hiervoor door de validator van w3 goedgekeurd worden. Echter is dit niet het geval aangezien alles gewoon correct is, aangezien ik regelmatig websites maak. Kan iemand mij helpen? De site staat op mijn hoofddomein nu (http://www.yuri-online.nl/) en hier is de html, css en error.
P.s. ik heb ook een mobiele site ervan gemaakt. Zouden jullie die alstublieft kunnen testen op uw telefoon zodat ik weet dat hij werkt op zoveel mogelijk apparaten.
Groetjes,
Yuri
Ik ben bezig met een website voor een bakkerij, deze website ga ik ook inleveren als informatica opdracht op mijn school. Deze moet hiervoor door de validator van w3 goedgekeurd worden. Echter is dit niet het geval aangezien alles gewoon correct is, aangezien ik regelmatig websites maak. Kan iemand mij helpen? De site staat op mijn hoofddomein nu (http://www.yuri-online.nl/) en hier is de html, css en error.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="target-destinydpi=device-dpi; width=device-width;
initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<meta charset="UTF-8" />
<title>Bakkerij Paul Claassen | Home</title>
<link href="ui/default.css" rel="stylesheet" type="text/css" />
<link href="ui/images/favicon.ico" rel="shortcut icon" />
</head>
<body>
<!-- Seperate bg-statement for scaling -->
<div id="background"></div>
<!-- Menu seperate because different width of wrapper -->
<nav></nav>
<div id="wrapper">
<!-- Start header -->
<header>
<a href="index.html"><img src="ui/images/logo.jpg" id="logo" alt="Logo" /></a>
</header>
<!-- End header -->
<!-- Start menu -->
<ul id="menu">
<li class="horizontalmenu"><a href="index.html" class="menubutton" id="mainpage">Home</a></li>
<ul class="popoutcontainer">
<li class="horizontalmenu"><a class="menubuttonpo">Over de bakkerij</a></li>
<li class="popoutmenu">
<a href="overdebakkerij/fotos/index.html" class="popoutlinks">Foto's</a>
<a href="overdebakkerij/video/index.html" class="popoutlinks">Video</a>
</li>
</ul>
<ul class="popoutcontainer">
<li class="horizontalmenu"><a class="menubuttonpo">Aanbiedingen</a></li>
<li class="popoutmenu">
<a href="#popout" class="popoutlinks">Vandaag</a>
<a href="#popout" class="popoutlinks">Deze week</a>
<a href="#popout" class="popoutlinks">Speciale acties</a>
</li>
</ul>
<li class="horizontalmenu"><a href="bestellen/index.html" class="menubutton">Bestellen</a></li>
<li class="horizontalmenu"><a href="contact/index.html" class="menubutton">Contact</a></li>
</ul>
<div id="searchcontainer">
<img src="ui/images/searchmenu.png" id="searchbuttonmenu" alt="Zoeken" />
<form id="searchform" method="get" action="http://www.google.com/search" target="_blank">
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<input type="text" id="searchbar" name="q" maxlength="255" placeholder="Google zoeken" />
<input type="submit" id="searchbutton" value="" />
</form>
</div>
<input id="mobilemenutoggle" type="checkbox" />
<div id="mobilemenumove">
<div id="mobilenav">
Home
<label id="menubuttonmobile" for="mobilemenutoggle"></label>
</div>
<div id="content">
<!-- End menu -->
<!-- Start page -->
<img id="mobilelogo" src="ui/images/mobilelogo.png" alt="Logo" />
<section>
<h2>Welkom op de site van Bakkerij Paul Claassen!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus gravida nisi non molestie. Donec vel velit at arcu euismod eleifend. Quisque quis eleifend quam. Aenean ullamcorper mauris id ipsum tincidunt, bibendum porttitor lectus consequat. Proin non justo non diam laoreet gravida et sed ligula. In malesuada odio vitae nulla commodo, id rutrum ipsum sagittis. Sed rutrum urna odio, eget placerat magna egestas vel. Aenean venenatis lorem purus.</p>
<p>Fusce accumsan eleifend commodo. Sed consequat massa sit amet mi pharetra, in mattis leo ultrices. Quisque quis turpis gravida nulla varius tincidunt non vitae ligula. Ut gravida mauris erat, et consequat dolor laoreet at. Aenean dapibus ultricies porttitor. Sed sed porttitor ante, eu iaculis massa. Donec mauris dui, luctus at magna in, condimentum faucibus odio. Etiam purus orci, consectetur a pulvinar quis, viverra at urna.</p>
<p>Nulla dictum auctor aliquet. Donec eu fringilla enim. Sed placerat lectus malesuada, ornare elit vitae, laoreet libero. Aenean eu accumsan leo. Ut aliquam mollis ipsum ac volutpat. Suspendisse elementum sapien id velit aliquam, sed euismod mi fringilla. Curabitur tempor semper dolor ut ultricies. Nunc a mauris nec metus tincidunt laoreet.</p>
<p>Sed eget blandit dolor. Sed egestas, magna sit amet faucibus lobortis, arcu lacus tristique ipsum, sit amet porttitor erat mauris sit amet urna. Donec blandit fringilla justo, vel mattis arcu lobortis quis. Mauris a mattis purus. Curabitur ac laoreet sem, vitae elementum risus. Nulla malesuada, nibh vel porttitor pulvinar, justo nisl elementum arcu, sed porta tellus est eget tortor. Suspendisse a neque et nibh consectetur fermentum vitae aliquam felis. Aenean ut consectetur quam, id malesuada risus. Pellentesque volutpat, dui sit amet imperdiet aliquet, felis lacus mollis elit, vel sagittis sapien urna vel dui. Duis euismod congue velit, et pellentesque sapien gravida et.</p>
<p>Nullam molestie magna et turpis aliquam malesuada. Vestibulum sagittis mollis lectus. Aliquam ut semper purus. Pellentesque at cursus eros. Morbi eget nisi sem. Nulla vulputate neque massa, eget consequat lacus mollis quis. Vestibulum vel porta eros. Integer vulputate euismod sagittis. Integer varius tortor sed tortor convallis, et hendrerit magna imperdiet. Nulla non tincidunt odio, sed varius nisi. Fusce lobortis rutrum sem vel porttitor. Donec ultricies lacus tortor, at ullamcorper leo tristique eu. Aenean gravida fermentum tempor. Quisque sed lacus eleifend, consectetur diam sit amet, ultricies turpis. Pellentesque felis justo, bibendum id mollis ac, varius ac nunc. Vivamus cursus vel arcu in auctor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed cursus gravida nisi non molestie. Donec vel velit at arcu euismod eleifend. Quisque quis eleifend quam. Aenean ullamcorper mauris id ipsum tincidunt, bibendum porttitor lectus consequat. Proin non justo non diam laoreet gravida et sed ligula. In malesuada odio vitae nulla commodo, id rutrum ipsum sagittis. Sed rutrum urna odio, eget placerat magna egestas vel. Aenean venenatis lorem purus.</p>
<p>Fusce accumsan eleifend commodo. Sed consequat massa sit amet mi pharetra, in mattis leo ultrices. Quisque quis turpis gravida nulla varius tincidunt non vitae ligula. Ut gravida mauris erat, et consequat dolor laoreet at. Aenean dapibus ultricies porttitor. Sed sed porttitor ante, eu iaculis massa. Donec mauris dui, luctus at magna in, condimentum faucibus odio. Etiam purus orci, consectetur a pulvinar quis, viverra at urna.</p>
<p>Nulla dictum auctor aliquet. Donec eu fringilla enim. Sed placerat lectus malesuada, ornare elit vitae, laoreet libero. Aenean eu accumsan leo. Ut aliquam mollis ipsum ac volutpat. Suspendisse elementum sapien id velit aliquam, sed euismod mi fringilla. Curabitur tempor semper dolor ut ultricies. Nunc a mauris nec metus tincidunt laoreet.</p>
<p>Sed eget blandit dolor. Sed egestas, magna sit amet faucibus lobortis, arcu lacus tristique ipsum, sit amet porttitor erat mauris sit amet urna. Donec blandit fringilla justo, vel mattis arcu lobortis quis. Mauris a mattis purus. Curabitur ac laoreet sem, vitae elementum risus. Nulla malesuada, nibh vel porttitor pulvinar, justo nisl elementum arcu, sed porta tellus est eget tortor. Suspendisse a neque et nibh consectetur fermentum vitae aliquam felis. Aenean ut consectetur quam, id malesuada risus. Pellentesque volutpat, dui sit amet imperdiet aliquet, felis lacus mollis elit, vel sagittis sapien urna vel dui. Duis euismod congue velit, et pellentesque sapien gravida et.</p>
<p>Nullam molestie magna et turpis aliquam malesuada. Vestibulum sagittis mollis lectus. Aliquam ut semper purus. Pellentesque at cursus eros. Morbi eget nisi sem. Nulla vulputate neque massa, eget consequat lacus mollis quis. Vestibulum vel porta eros. Integer vulputate euismod sagittis. Integer varius tortor sed tortor convallis, et hendrerit magna imperdiet. Nulla non tincidunt odio, sed varius nisi. Fusce lobortis rutrum sem vel porttitor. Donec ultricies lacus tortor, at ullamcorper leo tristique eu. Aenean gravida fermentum tempor. Quisque sed lacus eleifend, consectetur diam sit amet, ultricies turpis. Pellentesque felis justo, bibendum id mollis ac, varius ac nunc. Vivamus cursus vel arcu in auctor.</p>
</section>
<footer>
<div id="footertext">© Bakkerij Paul Claassen 2013</div>
</footer>
<!-- End page -->
</div>
</div>
</div>
</body>
</html>
HTML:
@media only screen and (min-device-width:1081px) {
body {
font-family: Calibri, sans-serif;
font-size: 16px;
padding: 0px;
margin: 0px;
}
div#background {
background-image: url("images/background.jpg");
background-size: cover;
min-height: 100%;
min-width: 1300px;
width: 100%;
height: auto;
position: fixed;
}
div#wrapper, div#wrapperbottom {
background-color: #FFF;
margin: 0px auto;
padding: 10px;
min-width: 550px;
max-width: 800px;
min-height: 500px;
position: absolute;
top: 0px;
left: 250px;
right: 250px;
box-shadow: 0px 0px 8px #000;
}
div#wrapperbottom {
bottom: 0;
}
header {
margin: 0px 5px 55px 0px;
}
img#logo {
height:100px;
margin: 0px;
}
nav {
background-color: #000;
height: 35px;
margin: 0px;
padding: 0px 300px;
position: absolute;
top: 125px;
left: 0px;
right: 0px;
z-index: 1;
}
label#menubuttonmobile, div#mobilenav,
input#mobilemenutoggle, img#mobilelogo {
display: none;
}
ul#menu {
list-style-type: none;
padding: 0px;
position: absolute;
top: 109px;
left: 0px;
right: 0px;
z-index: 2;
}
a.menubutton, a.menubuttonpo {
display: block;
height: 28px;
padding: 7px 5px 0px 5px;
margin: 0px;
text-decoration: none;
color: #FFF;
}
a.menubutton:hover, a#mainpage,
img#searchbuttonmenu:hover,
a.menubuttonpo:hover,
div#searchcontainer:hover img#searchbuttonmenu,
ul.popoutcontainer:hover a.menubuttonpo {
background-color: #FA8E07;
}
li.popoutmenu #mainpage {
color: #000;
}
li.horizontalmenu, ul.popoutcontainer {
display: inline-block;
margin-right: 10px;
}
ul.popoutcontainer {
list-style-type: none;
margin: 0px;
padding: 0px;
}
li.popoutmenu {
background-color: #FA8E07;
height: 0px;
padding-left: 10px;
position: absolute;
top: 35px;
left: 0px;
right: 0px;
visibility: hidden;
overflow: hidden;
transition: height, 500ms;
-webkit-transition: height, 500ms;
z-index: 2;
}
a.popoutlinks {
color: #FFF;
margin-right: 15px;
text-decoration: none;
}
a.popoutlinks:hover, #mainpagepo {
color: #000;
}
li.horizontalmenu:hover + li.popoutmenu,
li.popoutmenu:hover {
padding-top: 7px;
height: 28px;
visibility: visible;
}
img#searchbuttonmenu {
display: block;
height: 25px;
margin: 0px;
padding: 10px 5px 0px 5px;
position: absolute;
top: 125px;
right: 0px;
z-index: 3;
}
img#searchbuttonmenu:hover + form#searchform,
form#searchform:hover {
height: 30px;
visibility: visible;
}
form#searchform {
background-color: #FA8E07;
padding-left: 5px;
height: 0px;
width: 182px;
position: absolute;
top: 160px;
right: 0px;
z-index: 2;
visibility: hidden;
overflow: hidden;
transition: height, 400ms;
-webkit-transition: height, 400ms;
}
input#searchbar {
border: none;
padding: 0px 22px 0px 5px;
height: 21px;
width: 150px;
position: absolute;
top: 5px;
right: 5px;
}
input#searchbutton {
background: none;
background-image: url("images/searchbutton.png");
background-size: 17px 17px;
background-repeat: no-repeat;
background-position: center;
border: none;
height: 21px;
width: 21px;
position: absolute;
top: 6px;
right: 4px;
}
section {
margin-bottom: 30px;
}
img {
margin: 5px;
}
h1 {
}
h2 {
font-size: 18px;
font-weight: bold;
}
aside {
}
footer {
font-size: 11px;
width: 200px;
position: absolute;
left: 50%;
bottom: 7px;
}
div#footertext {
margin-left: -70px;
}
}
@media only screen and (max-device-width:1080px) {
body {
font-family: sans-serif;
font-size: 16px;
background-color: #E5E5E5;
margin: 0px;
overflow-x: hidden;
}
div#mobilenav {
font-size: 20px;
font-weight: bold;
color: #FFF;
padding: 10px;
background-color: #000;
height: 24px;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 2;
transition: transform 200ms;
-webkit-transition: -webkit-transform 200ms;
}
label#menubuttonmobile {
background-image: url("images/mobilemenubutton.png");
background-position: center;
background-size: 35px;
background-repeat: no-repeat;
height: 44px;
width: 44px;
position: absolute;
top: 0px;
right: 0px;
}
img#logo, div#searchcontainer,
input#mobilemenutoggle {
display: none;
}
input#mobilemenutoggle:checked + div#mobilemenumove
div#mobilenav label#menubuttonmobile {
background-color: #FA8E07;
}
ul#menu {
font-weight: 900;
list-style-type: none;
text-align: center;
background-color: grey;
margin: 0px;
padding: 0px;
width: 220px;
position: fixed;
top: -1px;
right: 0px;
bottom: -100px;
}
a#mainpage {
background-color: #FA8E07;
}
ul.popoutcontainer, li.popoutmenu {
list-style-type: none;
margin: 0px;
padding: 0px;
}
a.menubutton, a.menubuttonpo {
background-color: #5C5C5C;
display: block;
width: 220px;
padding: 10px 0px;
margin: 0px;
color: #FFF;
text-decoration: none;
border-top-style: solid;
border-top-width: 1px;
border-top-color: #C2C2C2;
}
a.menubutton:hover, a.popoutlinks:hover {
background-color: #FA8E07;
}
li.popoutmenu {
text-align: left;
list-style-type: none;
}
a.popoutlinks {
background-color: #6B6B6B;
font-weight: normal;
text-decoration: none;
color: #FFF;
display: block;
width: 220px;
padding: 5px 0px 5px 20px;
}
img#mobilelogo {
margin-top: 44px;
width: 100%;
}
div#content {
background-color: #FFF;
position: absolute;
box-shadow: 0px 0px 8px #000;
transition: transform 200ms;
-webkit-transition: -webkit-transform 200ms;
}
input#mobilemenutoggle:checked + div#mobilemenumove div#content,
input#mobilemenutoggle:checked + div#mobilemenumove div#mobilenav {
transform: translate3d(-220px,0,0);
-webkit-transform: translate3d(-220px,0,0);
}
h2 {
margin-top: 0px;
font-size: 18px;
}
section {
padding: 10px;
}
footer {
font-size: 12px;
text-align: center;
padding-bottom: 10px;
}
}
Code:
Error Line 25, Column 29: Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
<ul class="popoutcontainer">
Contexts in which element ul may be used:
Where flow content is expected.
Content model for element ul:
Zero or more li and script-supporting elements.
Error Line 32, Column 29: Element ul not allowed as child of element ul in this context. (Suppressing further errors from this subtree.)
<ul class="popoutcontainer">
Contexts in which element ul may be used:
Where flow content is expected.
Content model for element ul:
Zero or more li and script-supporting elements.P.s. ik heb ook een mobiele site ervan gemaakt. Zouden jullie die alstublieft kunnen testen op uw telefoon zodat ik weet dat hij werkt op zoveel mogelijk apparaten.
Groetjes,
Yuri
