0
私はトピックやその他何かを書いているサイトを掘り下げています。そのうちのいくつかは写真を表示しているアルバムやギャラリーから始まりますが、推移し、私の選択は私のアルバムによって隠されている、私はJavaScriptを使用してスライド画像の効果を取ってきました、私は私のメニューの位置や表示を変更しようとしましたが、それは私の水平メニューは私自身の画像で隠されています
/*
* \t generated by WOW Slider 4.7
* \t template Book
*/
@import url(http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext,cyrillic);
#wowslider-container6 {
zoom: 1;
position: relative;
max-width: 1024px;
margin: 19px auto 17px;
z-index: 90;
border: none;
text-align: left;
/* reset align=center */
}
* html #wowslider-container6 {
width: 1024px
}
#wowslider-container6 .ws_images ul {
position: relative;
width: 10000%;
height: auto;
left: 0;
list-style: none;
margin: 0;
padding: 0;
border-spacing: 0;
overflow: visible;
/*table-layout:fixed;*/
}
#wowslider-container6 .ws_images ul li {
width: 1%;
line-height: 0;
/*opera*/
float: left;
font-size: 0;
padding: 0 0 0 0 !important;
margin: 0 0 0 0 !important;
}
#wowslider-container6 .ws_images {
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#wowslider-container6 .ws_images a {
width: 100%;
display: block;
color: transparent;
}
#wowslider-container6 img {
max-width: none !important;
}
#wowslider-container6 .ws_images img {
width: 100%;
border: none 0;
max-width: none;
padding: 0;
}
#wowslider-container6 a {
text-decoration: none;
outline: none;
border: none;
}
#wowslider-container6 .ws_bullets {
font-size: 0px;
float: left;
position: absolute;
z-index: 70;
}
#wowslider-container6 .ws_bullets div {
position: relative;
float: left;
}
#wowslider-container6 .wsl {
display: none;
}
#wowslider-container6 sound,
#wowslider-container6 object {
position: absolute;
}
#wowslider-container6 .ws_bullets {
padding: 5px;
}
#wowslider-container6 .ws_bullets a {
width: 20px;
height: 21px;
background: url(./bullet.png) left top;
float: left;
text-indent: -4000px;
position: relative;
margin-left: 7px;
color: transparent;
}
#wowslider-container6 .ws_bullets a.ws_selbull,
#wowslider-container6 .ws_bullets a:hover {
background-position: 0 100%;
}
#wowslider-container6 a.ws_next,
#wowslider-container6 a.ws_prev {
position: absolute;
display: none;
top: 50%;
margin-top: -20px;
z-index: 60;
height: 39px;
width: 70px;
background-image: url(./arrows.png);
}
#wowslider-container6 a.ws_next {
background-position: 100% 0;
right: 5px;
}
#wowslider-container6 a.ws_prev {
left: 5px;
background-position: 0 0;
}
* html #wowslider-container6 a.ws_next,
* html #wowslider-container6 a.ws_prev {
display: block
}
#wowslider-container6:hover a.ws_next,
#wowslider-container6:hover a.ws_prev {
display: block
}
/*playpause*/
#wowslider-container6 .ws_playpause {
display: none;
width: 58px;
height: 58px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -19px;
margin-top: -29px;
z-index: 59;
}
#wowslider-container6:hover .ws_playpause {
display: block;
}
#wowslider-container6 .ws_pause {
background-image: url(./pause.png);
}
#wowslider-container6 .ws_play {
background-image: url(./play.png);
}
/* bottom right */
#wowslider-container6 .ws_bullets {
bottom: 5px;
right: 5px;
}
#wowslider-container6 .ws-title {
position: absolute;
display: block;
bottom: 33px;
left: 0px;
z-index: 50;
margin-right: 15px;
padding: 8px;
color: #664b2b;
background: #e7d7c3;
font-family: 'Lobster', Comic Sans MS, cursive;
font-size: 30px;
line-height: 32px;
border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
-webkit-border-radius: 0px 5px 5px 0px;
box-shadow: 2px 0px 3px rgba(114, 82, 45, 0.6);
-moz-box-shadow: 2px 0px 3px rgba(114, 82, 45, 0.6);
-webkit-box-shadow: 2px 0px 3px rgba(114, 82, 45, 0.6);
}
#wowslider-container6 .ws-title div {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
color: #473520;
font-size: 20px;
line-height: 22px;
margin-top: 6px;
}
#wowslider-container6 .ws_images ul {
animation: wsBasic 196.8s infinite;
-moz-animation: wsBasic 196.8s infinite;
-webkit-animation: wsBasic 196.8s infinite;
}
#wowslider-container6 .ws_shadow {
background-image: url(./bg.png);
background-repeat: no-repeat;
background-size: 100%;
position: absolute;
z-index: -1;
left: -3.22%;
top: -2.47%;
width: 106.44%;
height: 104.68%;
}
* html #wowslider-container6 .ws_shadow {
/*ie6*/
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine6/bg.png', sizingMethod='scale');
}
*+html #wowslider-container6 .ws_shadow {
/*ie7*/
background: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='engine6/bg.png', sizingMethod='scale');
}
#wowslider-container6 .ws_bullets a img {
text-indent: 0;
display: block;
bottom: 20px;
left: -32px;
visibility: hidden;
position: absolute;
box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
-webkit-box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
border: 3px solid #edd8a3;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
max-width: none;
}
#wowslider-container6 .ws_bullets a:hover img {
visibility: visible;
}
#wowslider-container6 .ws_bulframe div div {
height: 48px;
overflow: visible;
position: relative;
}
#wowslider-container6 .ws_bulframe div {
left: 0;
overflow: hidden;
position: relative;
width: 64px;
background-color: #edd8a3;
}
#wowslider-container6 .ws_bullets .ws_bulframe {
display: none;
bottom: 24px;
overflow: visible;
position: absolute;
cursor: pointer;
box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
-webkit-box-shadow: 0 1px 3px rgba(46, 15, 0, 0.4);
border: 3px solid #edd8a3;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#wowslider-container6 .ws_bulframe span {
display: block;
position: absolute;
bottom: -8px;
margin-left: -1px;
left: 32px;
background: url(./triangle.png);
width: 15px;
height: 6px;
}
body {
background-color: rgba(170, 200, 228, 0.3);
}
section {
word-wrap: break-word;
max-width: 400px;
max-height: 100%;
overflow: auto;
float: left;
max-height: 1000px;
}
#contenue h1 {
background-repeat: no-repeat;
}
#contenue {
color: #000;
text-align: left;
margin: 0 10px 20px 405px;
padding: 0 0 10px 0;
border-left: 1px solid #37b;
font: 12px/20px verdana, arial, geneva, sans-serif;
}
#contenu {
color: #000;
text-align: left;
margin: 0 10px 20px 405px;
padding: 0 0 10px 0;
border-left: 1px solid #37b;
font: 12px/20px verdana, arial, geneva, sans-serif;
}
#vieID {
color: #000;
text-align: left;
margin: 0 10px 20px 405px;
padding: 0 0 10px 0;
border-left: 1px solid #f90;
font: 12px/20px verdana, arial, geneva, sans-serif;
}
#tempsfortsID {
color: #000;
text-align: left;
margin: 0 10px 20px 405px;
padding: 0 0 10px 0;
border-left: 1px solid #45aa44;
font: 12px/20px verdana, arial, geneva, sans-serif;
}
#visiteID {
color: #000;
text-align: left;
margin: 0 10px 20px 405px;
padding: 0 0 10px 0;
border-left: 1px solid #f90;
font: 12px/20px verdana, arial, geneva, sans-serif;
}
#formationID {
color: #000;
text-align: left;
margin: 0 10px 20px 405px;
padding: 0 0 10px 0;
border-left: 1px solid #e43;
font: 12px/20px verdana, arial, geneva, sans-serif;
}
#anciensID {
color: #000;
text-align: left;
margin: 0 10px 20px 405px;
padding: 0 0 10px 0;
border-left: 1px solid #FECEA8;
font: 12px/20px verdana, arial, geneva, sans-serif;
}
.texte h3 {
float: center;
padding: 15px, 15px;
position: static;
color: #666666;
font-size: 18px;
background-image: url(image/H4gris.jpg);
background-repeat: no-repeat;
}
h4 {
color: #666666;
margin-top: 30px;
background-image: url(image/H4gris.jpg);
background-repeat: no-repeat;
background-position: 0 0 0 -20px;
}
#contenue h2 {
color: #000000;
margin: 0;
background-image: url(IMAGE/H2violet.jpg);
background-repeat: no-repeat;
background-position: 0 0 0 -20px;
}
#formationID h2 {
color: #000000;
margin: 0;
background-image: url(IMAGE/H2rouge.jpg);
background-repeat: no-repeat;
background-position: 0 0 0 -20px;
}
#visiteID h2 {
color: #000000;
margin: 0;
background-image: url(IMAGE/H2orange.jpg);
background-repeat: no-repeat;
background-position: 0 0 0 -20px;
}
#vieID h2 {
color: #000000;
margin: 0;
background-image: url(IMAGE/H2jaune.jpg);
background-repeat: no-repeat;
background-position: 0 0 0 -20px;
}
#tempsfortsID h2 {
color: #000000;
margin: 0;
background-image: url(IMAGE/H2vert.jpg);
background-repeat: no-repeat;
background-position: 0 0 0 -20px;
}
#anciensID h2 {
color: #000000;
margin: 0;
background-image: url(IMAGE/H2belge.jpg);
background-repeat: no-repeat;
background-position: 0 0 0 -20px;
}
#contenu {
background-image: url(image/fondbleu.jpg);
min-height: 800px;
}
#contenue {
background-image: url(image/fondviolet.jpg);
min-height: 800px;
}
#formationID {
background-image: url(image/fondrouge.jpg);
min-height: 800px;
}
#visiteID {
background-image: url(image/fondorange.jpg);
min-height: 800px;
}
#vieID {
background-image: url(image/fondjaune.jpg);
min-height: 800px;
}
#tempsfortsID {
background-image: url(image/fondjaune.jpg);
min-height: 800px;
}
#contenu img {
display: block;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: -1px;
-webkit-margin-end: 0px;
}
#vieID img {
display: block;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: -1px;
-webkit-margin-end: 0px;
}
#visiteID img {
display: block;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: -1px;
-webkit-margin-end: 0px;
}
#anciensID img {
display: block;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: -1px;
-webkit-margin-end: 0px;
}
#tempsfortsID img {
display: block;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: -1px;
-webkit-margin-end: 0px;
}
#contenue img {
display: block;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: -1px;
-webkit-margin-end: 0px;
font-weight: bold;
}
#formationID img {
display: block;
-webkit-margin-before: 0px;
-webkit-margin-after: 0px;
-webkit-margin-start: -1px;
-webkit-margin-end: 0px;
}
.début {
font-size: 15px;
padding-left: 45px;
margin: 0 50px 50px 0;
}
#contenu h2 {
padding-left: 20px;
color: #000000;
margin: 0;
background-image: url(image/H2bleu.jpg);
background-repeat: no-repeat;
background-position: 0 0 0 -20px;
}
#contenue .histoire {
height: 1000px;
width: 1100px;
background-repeat: no-repeat;
}
header {
font-size: 1px;
border: 7px ridge #1173AF;
}
header img {
display: block;
margin-left: auto;
margin-right: auto;
height: 200px;
width: 500px;
overflow: hidden;
}
.menu {
overflow: hidden;
background-color: #3CA9DF;
font-family: Arial, Serif, Sans-Serif;
min-width: 150px;
z-index: 1000
}
.menu a {
float: left;
font-size: 12px;
color: white;
text-align: center;
padding: 12px 15px;
text-decoration: none;
}
.VAE {
float: left;
overflow: hidden;
font-size: 15px;
}
.on-parle-de-nous {
float: left;
overflow: hidden;
font-size: 15px;
}
.formulaire-de-contacts {
float: left;
overflow: hidden;
font-size: 15px;
}
.accueil {
float: left;
overflow: hidden;
font-size: 15px;
}
.accueil .accueilbtn {
border: none;
outline: none;
color: white;
background-color: inherit;
}
.VAE .VAEbtn {
border: none;
outline: none;
color: white;
background-color: inherit;
}
.on-parle-de-nous .on-parle-de-nousbtn {
border: none;
outline: none;
color: white;
background-color: inherit;
}
.formulaire-de-contacts .formulaire-de-contactsbtn {
border: none;
outline: none;
color: white;
background-color: inherit;
}
.accueil .accueilbtn a {
padding: 14px 16px;
margin-bottom: 6px;
font-size: 16px;
}
.VAE .VAEbtn a {
padding: 14px 16px;
margin-bottom: 6px;
font-size: 16px;
}
.on-parle-de-nous .on-parle-de-nousbtn a {
padding: 14px 16px;
margin-bottom: 6px;
font-size: 16px;
}
.formulaire-de-contacts .formulaire-de-contactsbtn a {
padding: 14px 16px;
margin-bottom: 6px;
font-size: 16px;
}
.menu a:hover,
.VAE:hover .VAEbtn {
background-color: #7FB8D5;
}
.menu a:hover,
.on-parle-de-nous:hover .on-parle-de-nousbtn {
background-color: #7FB8D5;
}
.menu a:hover,
.formulaire-de-contacts:hover .formulaire-de-contactsbtn {
background-color: #7FB8D5;
}
.menu a:hover,
.accueil:hover .accueilbtn {
background-color: #7FB8D5;
}
.accueil-content a:hover {
background: linear-gradient(to right, #7FB8D5, #333);
background-color: #333;
}
.accueil:hover .accueil-content {
display: block;
}
.lycee {
float: left;
overflow: hidden;
}
.lycee .lyceebtn {
font-size: 15px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
min-width: 150px;
}
.menu a:hover,
.lycee:hover .lyceebtn {
background-color: #7FB8D5;
}
.lycee-content {
display: none;
position: absolute;
background-color: #7FB8D5;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.lycee-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
min-width: 150px;
}
.lycee-content a:hover {
background: linear-gradient(to right, #7FB8D5, #333);
background-color: #333;
}
.lycee:hover .lycee-content {
display: block;
}
.formations {
float: left;
overflow: hidden;
}
.formations .formationsbtn {
font-size: 15px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
min-width: 150px;
}
.menu a:hover,
.formations:hover .formationsbtn {
background-color: #7FB8D5;
}
.formations-content {
display: none;
position: absolute;
background-color: #7FB8D5;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.formations-content a {
float: none;
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
min-width: 150px;
}
.formations-content a:hover {
background: linear-gradient(to right, #7FB8D5, #333);
background-color: #333;
}
.formations:hover .formations-content {
display: block;
}<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lyceecss.css" />
<title>Forum de l'orientation</title>
</head>
<body>
<header>
<img src="image/lyceelogo.jpg"></a>
</header>
<nav>
<div class="menu">
<div class="accueil">
<button class="accueilbtn"><a href="../premierepage.html">accueil</a></button>
</div>
<div class="lycee">
<button class="lyceebtn">Le Lycée</button>
<div class="lycee-content">
<a href="#">Le mot du chef d'établissement</a>
<a href="#">Plan d'accès</a>
<a href="#">Historique</a>
<a href="#">Horaires secrétariat</a>
<a href="#">Organigramme du personnel</a>
<a href="#">Date des vancances scolaires</a>
<a href="#">La taxe d'apprentissage</a>
</div>
</div>
<div class="formations">
<button class="formationsbtn">Formations</button>
<div class="formations-content">
<a href="#">3° PREPA PRO</a>
<a href="#">CAP Employé(e) de commerce Multi-Spécialités</a>
<a href="#">BAC Pro vente 3 ans</a>
<a href="#">BAC Pro commerce 3 ans</a>
<a href="#">BAC Pro Acceuil Relation Client Usager 3 ans</a>
<a href="#">Bac Pro COMMUNICATION VISUELLE PLURI-MEDIA 3 ans</a>
<a href="#">BAC Pro PHOTOGRAPHE 3 ans</a>
<a href="#">Modalités d'inscription</a>
<a href="#">Résultats</a>
<a href="#">Stages</a>
</div>
</div>
<div class="visite">
<button class="visitebtn">visite du lycée</button>
<div class="visite-content">
<a href="#">Les lieux de rencontre</a>
<a href="#">Les ateliers</a>
<a href="#">Les laboratoires</a>
<a href="#">Le CDI</a>
<a href="#">Le gymnase</a>
<a href="#">Le self</a>
<a href="#">L'internat</a>
</div>
</div>
<div class="vielycee">
<button class="vielyceebtn">La vie au Lycée</button>
<div class="vielycee-content">
<a href="#">Les Journées Portes Ouvertes</a>
<a href="#">Voyages</a>
<a href="#">Les projets/Les expositions</a>
<a href="#">Les Activités de classe</a>
</div>
</div>
<div class="tempsforts">
<button class="tempsfortsbtn">Les Temps Forts au Lycée</button>
<div class="tempsforts-content">
<a href="#">Le Forum de l'orientation</a>
<a href="#">OFF 2017</a>
<a href="#">Design Culinaire 2016</a>
<a href="#">Les nuits du Design</a>
<a href="#">La veillé de noël</a>
<a href="#">Journée rencontre et connaissance</a>
<a href="#">La Journée St Joseph</a>
<a href="#">Formation des délégués</a>
<a href="#">Les Workshops et les Projets</a>
<a href="#">Soirée Partenaires Entreprises</a>
</div>
</div>
<div class="anciens">
<button class="anciensbtn">Les anciens élèvess</button>
<div class="anciens-content">
<a href="#">Que devenez-vous ?</a>
<a href="#">Remise des diplômes</a>
<a href="#">Les 20 ans du Bac Pro Vente</a>
</div>
</div>
<div class="VAE">
<div class="VAE"><button class="VAEbtn"><a href="#">V.A.E.</a></div></button></div>
<div class="on-parle-de-nous"><button class="on-parle-de-nousbtn"><a href="#">On parle de nous...</a></button></div>
<div class="formulaire-de-contacts"><button class="formulaire-de-contactsbtn"><a href="#">Formulaire de contacts"</a></button></div>
</div>
<section></section>
<div id="tempsfortsID">
<h2>FORUM DE L'ORIENTATION</h2>
<h3>FORUM DE L'ORIENTATION 14 ET 15 FÉVRIER 2014</h3>
<br />
<!-- Start WOWSlider.com HEAD section -->
<link rel="stylesheet" type="text/css" href="forum-et-orientation/engine6/style.css" />
<script type="text/javascript" src="forum-et-orientation/engine6/jquery.js"></script>
<!-- End WOWSlider.com HEAD section -->
<!-- Start WOWSlider.com BODY section -->
<div id="wowslider-container6">
<div class="ws_images">
<ul>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
<li><img src="http://via.placeholder.com/350x150" alt="forum_2014" title="forum_2014" id="wows6_0" /></li>
</ul>
</div>
<span class="wsl"><a href="http://wowslider.com">Slideshow Bootstrap</a> by WOWSlider.com v4.7</span>
<div class="ws_shadow"></div>
</div>
<script type="text/javascript" src="forum-et-orientation/engine6/wowslider.js"></script>
<script type="text/javascript" src="forum-et-orientation/engine6/script.js"></script>
<!-- End WOWSlider.com BODY section -->
<br />
<br />
<br />
</body>
</html>私は両方のCSSを見てきましたが、私はこの問題に関連するものを見つけられなかったかもしれませんが、私はそれを見逃しているかもしれません。
あなたのコードでは、スクリーンショットや問題を複製しません。 –
[mcve]を作成する方法を参照してください。コードがたくさんあります...メニューのZ-インデックスがイメージよりも高いかどうかを確認することができますか？ – sol
メニューのz-インデックスを他の要素より高く設定してください –