Hallo allemaal!
Ik heb een probleempje met mijn navigatie, want op dit moment komt de footer over de navigatie heen, daardoor is de tekst van de list items niet meer te zien (zie de afbeelding, voor de duidelijkheid).
De bijbehorende CSS:
Weet iemand hoe ik dit kan oplossen?
Groetjes,
Joren
Ik heb een probleempje met mijn navigatie, want op dit moment komt de footer over de navigatie heen, daardoor is de tekst van de list items niet meer te zien (zie de afbeelding, voor de duidelijkheid).
De bijbehorende CSS:
HTML:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
html, body {
margin: 0;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
div {
display: block;
}
img.alignright {float:right; margin:0 0 1em 1em}
img.alignleft {float:left; margin:0 1em 1em 0}
img.aligncenter {display: block; margin-left: auto; margin-right: auto}
.alignright {float:right; }
.alignleft {float:left; }
.aligncenter {display: block; margin-left: auto; margin-right: auto}
h1 {
font-size: 30px;
}
h2 {
font-size: 25px;
}
h3 {
font-size: 20px;
}
h4 {
font-size: 15px;
}
h5 {
font-size: 10px;
}
h6 {
font-size: 5px;
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
#header {
margin: 0;
width: 100%;
float: left;
height: 120px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
#shopmenu {
height: 25px;
width: 100%;
float: left;
background: #4e4e4e;
}
#shopmenu .menu {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
#shopmenu .menu li {
margin: 0;
padding-right: 20px;
float: left;
height: 25px;
line-height: 25px;
font-family: "Lato";
}
#shopmenu .menu li a {
text-decoration: none;
color: #FFF;
}
#contentheader {
margin: 0 auto;
width: 75%;
height: 95px;
}
#logo {
margin: 0;
width: 20%;
height: 95px;
line-height: 95px;
float: left;
text-align: center;
font-family: 'Paytone One', sans-serif;
font-size: 35px;
}
#navselector, #mobilemenu {
display: none;
}
#headmenu {
margin-left: 25%;
height: 95px;
width: 75%;
}
#headmenu .menu, #headmenu .menu li, #headmenu .menu ul, #headmenu .menu a, #headmenu .menu span {
margin:0;padding:0;border:0;outline:0;list-style:none;}
#headmenu .menu {
position:relative;z-index:597;float:right;}
#headmenu .menu li {
float:left;min-height:1px;line-height:1;vertical-align:middle;}
#headmenu .menu li:hover {
position:relative;z-index:599;cursor:pointer;}
#headmenu .menu a, #headmenu .menu span {
display:block;text-decoration:none;}
#headmenu .menu ul {
visibility:hidden;position:absolute;top:100%;left:0;z-index:598;}
#headmenu .menu ul li {
float:none;}
#headmenu .menu ul ul {
top:0;left:100%;
width: 150%; }
#headmenu .menu li:hover > ul {
visibility:visible;}
#headmenu .menu {
margin: 0;
list-style: none;
padding: 0;
}
#headmenu .menu li {
margin: 0;
height: 90px;
line-height: 95px;
padding: 0px 35px 0px 0px;
font-family: "Lato";
font-size: 17px;
}
#headmenu .menu li a {
color: #4e4e4e;
height: 90px;
}
#headmenu .menu li a:hover {
color: #116393;
border-bottom: 5px solid #116393;
}
#headmenu .menu ul {
margin-top: 5px;
padding: 0;
width: 200%;
border: 1px solid rgba(0, 0, 0, 0.15);
border-top: none;
}
#headmenu .menu ul li {
margin: 0;
padding-left: 20px;
height: 50px;
line-height: 50px;
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
#headmenu .menu ul li a {
height: 50px;
}
#headmenu .menu ul li a:hover {
color: #116393;
border: none;
}
#footer {
margin-top: 50px;
width: 100%;
float: left;
background: #4e4e4e;
height: 150px;
}
#contentfooter {
margin: 0 auto;
width: 75%;
height: 150px;
}Weet iemand hoe ik dit kan oplossen?
Groetjes,
Joren
