Ben er achter gekomen dat mijn website dus niet goed wordt vertoond in IE8.
Via een omleiding naar IE8 ziet het er al iets beter uit.
Maar ik krijg mijn menu niet fatsoenlijk
html code:
<div class="menuhor"><nav>
<ul><li><a href="index.html">Home</a></li>
<li><a href="html/aanbod.html">Aanbod</a></li>
<li><a href="html/merken.html">Merken</a></li>
<li><a href="html/referenties.html">Referenties</a></li>
<li><a href="html/contact.html">Contact </a></li></ul></nav>
</div>
opmaak css:
nav ul {
list-style-type: none;
background-color: #2D2D2D;
width: 100%;
}
nav li {
float: left;
background-color: #DBDBDB;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #DBDBDB 0%, #2D2D2D 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #DBDBDB 0%, #2D2D2D 100%);
/* Opera */
background-image: -o-linear-gradient(top, #DBDBDB 0%, #2D2D2D 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DBDBDB), color-stop(1, #2D2D2D));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #DBDBDB 0%, #2D2D2D 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #DBDBDB 0%, #2D2D2D 100%);
;
width: 16%;
text-align: center;
border-radius: 5px;
margin-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
nav li:hover {
background-color: #F29400;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #F29400 0%, #F2CF1F 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #F29400 0%, #F2CF1F 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #F29400 0%, #F2CF1F 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F29400), color-stop(1, #F2CF1F));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #F29400 0%, #F2CF1F 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #F29400 0%, #F2CF1F 100%);
}
nav li a:link {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
nav li a:hover {
text-decoration: none;
color: #333333;
font-weight: bold;
}
nav li a:visited {
font-weight: bold;
color: #333333;
text-decoration: none;
}
Via een omleiding naar IE8 ziet het er al iets beter uit.
Maar ik krijg mijn menu niet fatsoenlijk
html code:
<div class="menuhor"><nav>
<ul><li><a href="index.html">Home</a></li>
<li><a href="html/aanbod.html">Aanbod</a></li>
<li><a href="html/merken.html">Merken</a></li>
<li><a href="html/referenties.html">Referenties</a></li>
<li><a href="html/contact.html">Contact </a></li></ul></nav>
</div>
opmaak css:
nav ul {
list-style-type: none;
background-color: #2D2D2D;
width: 100%;
}
nav li {
float: left;
background-color: #DBDBDB;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(top, #DBDBDB 0%, #2D2D2D 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(top, #DBDBDB 0%, #2D2D2D 100%);
/* Opera */
background-image: -o-linear-gradient(top, #DBDBDB 0%, #2D2D2D 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #DBDBDB), color-stop(1, #2D2D2D));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(top, #DBDBDB 0%, #2D2D2D 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to bottom, #DBDBDB 0%, #2D2D2D 100%);
;
width: 16%;
text-align: center;
border-radius: 5px;
margin-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
}
nav li:hover {
background-color: #F29400;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(bottom, #F29400 0%, #F2CF1F 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(bottom, #F29400 0%, #F2CF1F 100%);
/* Opera */
background-image: -o-linear-gradient(bottom, #F29400 0%, #F2CF1F 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F29400), color-stop(1, #F2CF1F));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(bottom, #F29400 0%, #F2CF1F 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to top, #F29400 0%, #F2CF1F 100%);
}
nav li a:link {
text-decoration: none;
color: #FFFFFF;
font-weight: bold;
}
nav li a:hover {
text-decoration: none;
color: #333333;
font-weight: bold;
}
nav li a:visited {
font-weight: bold;
color: #333333;
text-decoration: none;
}