Beste/Geachte medeTweakers,
Ik ben een website aan het maken en ik kom nu een CSS probleem tegen wat ik niet opgelost krijg na 2 dagen Googlen zelfs niet. Helaas ben ik wel redelijk bekend met CSS maar niet zodanig dat ik dit probleem opgelost krijg.
Het gaat om het volgende.
Ik gebruik 1 CSS3.0 Script om het menu te maken (dat gebruik ik voor alle pagina's). Dat script is als volgt (wel geanonimiseerd op persoonsinformatie maar verder exact dit script)
menu.css
#Menu *{
padding:0;
margin:0;
border:0;
list-style-type:none;
word-spacing:0px;
}
#Menu{
display : inline-table;
width : 100%;
background-size : 100% 100%;
margin : 0px auto;
height : 32px;
text-align : center;
background-color : rgba(255,255,255,1);
box-shadow : inset 0px 0px 1px 1px rgba(0,0,0,1);
border-radius : 0px;
font-size : 0px;
}
#Menu > li{
display : inherit;
position : relative;
margin-top : 0px;
margin-left : 0px;
}
#Menu > li > a{
display : block;
text-decoration : none;
background-size : 100% 100%;
width : auto;
height : 32px;
font-size : 12px;
letter-spacing : 1px;
min-width : 140px;
margin : 0px;
color : rgba(0,0,0,1);
background-color : rgba(0,0,0,0);
text-align : center;
border-radius : 1px;
line-height : 35px;
font-family : Arial, Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : rgba(0,0,0,1);
text-shadow : 0px 0px 0px rgba(0,0,0,0);
box-shadow : 0px 0px 0px 0px rgba(0,0,0,0);
}
#Menu > li > ul > li > a{
display : block;
text-decoration : none;
background-size : 100% 100%;
width : auto;
height : 32px;
font-size : 12px;
letter-spacing : 1px;
min-width : 140px;
margin : 0px;
color : rgba(0,0,0,1);
background-color : rgba(255,255,255,0);
text-align : center;
border-radius : 1px;
line-height : 17px;
font-family : Arial, Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : rgba(0,0,0,1);
text-shadow : 0px 0px 0px rgba(0,0,0,0);
box-shadow : 0px 0px 0px 0px rgba(0,0,0,0);
}
#Menu > li > ul > li > ul a{
display : block;
text-decoration : none;
background-size : 100% 100%;
width : auto;
height : 32px;
font-size : 12px;
letter-spacing : 1px;
min-width : 140px;
margin : 0px;
color : rgba(0,0,0,1);
background-color : rgba(255,255,255,0);
text-align : center;
border-radius : 1px;
line-height : 35px;
font-family : Arial, Arial, Helvetica, sans-serif;
border-width : 1px;
border-style : solid;
border-color : rgba(0,0,0,1);
text-shadow : 0px 0px 0px rgba(0,0,0,0);
box-shadow : 0px 0px 0px 0px rgba(0,0,0,0);
}
#Menu > li > ul{
display : block;
position : absolute;
background-color : rgba(255,255,255,1);
z-index : 10;
visibility : hidden;
opacity : 0.1;
box-shadow : 0px 2px 2px 2px rgba(0,0,0,1);
border-radius : 0px;
left : 0px;
-webkit-transition : all 0.4s;
transition : all 0.4s;
}
#Menu > li > ul > li > ul{
display : block;
position : absolute;
background-color : rgba(255,255,255,1);
z-index : 10;
visibility : hidden;
left : 120px;
opacity : 0.1;
box-shadow : 2px 0px 2px 2px rgba(0,0,0,1);
border-radius : 0px;
margin-top : -32px;
-webkit-transition : all 0.4s;
transition : all 0.4s;
}
#Menu li:hover > a{
color : rgba(255,255,255,1);
background-color : rgba(0,0,0,1);
}
#Menu .active > a{
color : rgba(0,0,0,1);
background-color : rgba(120,120,120,1);
}
#Menu > li > ul > li:hover > ul{
visibility : visible;
opacity : 1;
left : 142px;
}
#Menu > li:hover > ul{
visibility : visible;
opacity : 1;
}
eind menu.css
De bijbehorende HTML is als volgt (wederom geanonimiseerd maar wel exact zo;
index.html
<div class="menu_horizontal">
<ul id="Menu">
<li><a href="index.html">Categorie 1
</a>
</li>
<li><a href="#">Categorie 2
</a>
<ul>
<li><a href="Pagina1.html">Categorie 21.
</a>
</li>
<li><a href="Pagina2.html">Categorie 2.2.
</a>
</li>
<li><a href="Pagina3.html">Categorie 2.3.
</a>
</li>
<li><a href="Pagina4.html">Categorie 2.4.
</a>
</li>
<li><a href="Pagina5.html">Categorie 2.5.
</a>
</li>
<li><a href="Pagina6.html">Categorie 2.6.
</a>
</li>
<li><a href="Pagina7.html">Categorie 2.7
</a>
</li>
</ul>
</li>
<li><a href="#">Categorie 3
</a>
<ul>
<li><a href="Pagina8.html">Categorie 3.1.
</a>
</li>
<li><a href="Pagina9">Categorie 3.2.
</a>
</li>
<li><a href="Pagina10.html">Categorie 3.3.
</a>
</li>
<li><a href="Pagina11.html">Categorie 3.4.
</a>
</li>
</ul>
</li>
<li><a href="Pagina12.html">Categorie 4.
</a>
</li>
</ul></div>
</div>
Einde HTML
Als je deze 2 combineert en op 1 pagina laat lopen dan werkt dat goed. De CSS staat in 1 bestand en wordt door alle pagina's gebruikt.
Dit is voor alle pagina's verder dus geen probleem, maar nu heb ik een probleem met de homepage (index.html)
Ik gebruik een soort blokken schema met afbeeldingen die inzoomen bij een mouse-over event en waarna er ook op geklikt kan worden om naar de betreffende pagina te gaan.
Nu is het probleem dat dit script wat ik hiervoor gebruik schijnbaar conflicteert met het menu, want het menu op de homepage (index.html) werkt namelijk niet zoals het hoort, alle categorieën vallen op de homepagina onder 1 knop i.p.v. verdeeld over 4 knoppen in het midden.
Het script wat hier zorg voor draagt is als volgt (uiteraard weer geanonimiseerd. maar verder exact hetzelfde):
style.css
/* Global Styling */
nav {
background-color: #34495e;
height: 80px;
position: fixed;
width: 100;
top: 0;
z-index: 999;
}
.wrapper {
padding: 10px 10px;
max-width: 1000px;
text-align: center;
margin-left: auto;
margin-right: auto;
margin-top: 80px;
}
.right {float: left !important;}
/* Image zoom on hover + Overlay colour */
.parent {
width: 25%;
margin: 20px;
height: 250px;
border: 1px solid blue;
overflow: hidden;
position: relative;
float: left;
display: inline-block;
cursor: pointer;
}
.child {
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
/* Several different images */
.bg-one {background-image: url(Images/Tile1.jpg);}
.bg-two {background-image: url(Images/Tile2.jpg);}
.bg-three {background-image: url(Images/Tile3.jpg);}
.bg-four {background-image: url(Images/Tile4.jpg);}
.bg-five {background-image: url(Images/Til5.jpg);}
.bg-six {background-image: url(Images/Tile6.jpg);}
.bg-seven {background-image: url(Images/Tile7.jpg);}
.bg-eight {background-image: url(Images/Tile8.jpg);}
.bg-nine {background-image: url(Images/Tile9.jpg);}
.bg-ten {background-image: url(Images/Tile10.jpg);}
.bg-eleven {background-image: url(Images/Tile11.jpg);}
.bg-twelve {background-image: url(Images/Tile12.jpg);}
.bg-thirtheen {background-image: url(Images/LinksTile.jpg);}
a {
display: none;
font-size: 20px;
color: #ffffff !important;
font-family: sans-serif;
text-align: center;
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 50px;
cursor: pointer;
/*text-decoration: none;*/
}
.parent:hover .child, .parent:focus .child {
-ms-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.parent:hover .child:before, .parent:focus .child:before {
display: block;
}
.parent:hover a, .parent:focus a {
display: block;
}
.child:before {
content: "";
display: none;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(52,73,94,0.75);
}
/* Media Queries */
@media screen and (max-width: 960px) {
.parent {width: 100%; margin: 20px 0px}
.wrapper {padding: 20px 0px;}
}
.hello {display: none}
einde style.css
De hierbij behorende HTML is dan als volgt (ook weer geanonimiseerd maar verder exact hetzelfdfe)
index.html
<div class="content">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="wrapper">
<div class="parent" onclick="">
<div class="child bg-one">
<a href="Pagina1.html">Pagina1</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-two">
<a href="Pagina2.html">Pagina 2</a>
</div>
</div>
<div class="parent" onclick="">
<div class="child bg-three">
<a href="Pagina3.html">Pagina 3</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-four">
<a href="Pagina4.html">Pagina 4</a>
</div>
</div>
<div class="parent" onclick="">
<div class="child bg-five">
<a href="Pagina5.html">Pagina 5</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-six">
<a href="Pagina6.html">Pagina 6</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-seven">
<a href="Pagina7.html">Pagina 7</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-eight">
<a href="Pagina8.html">Pagina 8</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-nine">
<a href="Pagina9.html">Pagina 9</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-ten">
<a href="Pagina10.html">Pagina 10</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-eleven">
<a href="Pagina11.html">Pagina 11</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-twelve">
<a href="Pagina12.html" target="_self">Pagina 12</a>
</div>
</div>
<div class="parent right" onclick="">
<div class="child bg-thirtheen">
<a href="Pagina13.html">Pagina 13</a>
</div>
</div>
einde index.html
Voer je deze 2 CSS script op 1 HTML pagina tegelijk uit, dan werkt het menu script niet zoals het hoort.
Relevante software en hardware die ik gebruik
Deze categorie lijkt me niet van toepassing
Wat ik al gevonden of geprobeerd heb
Ik heb de beide CSS scripts gecheckt en gevalideerd, ze zijn niet 100% accuraat, maar de fouten zijn echt iets alleen ten opzichte van de CSS3 standaard. Verder van alles anders nog geprobeerd.
- Ik heb beide CSS bestanden in een extern bestand gezet en deze gelinkt aan de index.html
- Ik heb 1 CSS extern gehouden en de ander (het menu èn ook de style) in de head van de index.html gezet, resultaat is en blijft hetzelfde, het menu werkt niet op de index.html. Ik zelf zie nu geen opties meer om zelf te proberen.
Kan een van jullie mij misschien helpen of me verder op weg helpen?
/u/144779/3D_logo3_mini.JPG?f=community){kind=logo}
/u/142011/crop65b383c6c6c2f_cropped.png?f=community)
/u/293532/crop602d26dcd0ef0_cropped.png?f=community)
/u/34186/crop62e07d174532d_cropped.png?f=community)
no disrespect 
