スライドショーのオーバーナビゲーションnav barとnav bar elementsの配置

-13

"Home"、 "news"などの要素のブロックを中央に移動しようとしています。私はulセクションで "left"を使ってみましたが、nav bar全体を動かしています。スライドショーのオーバーナビゲーションnav barとnav bar elementsの配置

CSS section 
<html> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> 
<head> 

<!-- nav section --> 
<style> 

body {margin:0;} 
body { 
    background-color: #393939; 
} 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: black; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    left:0px; 

} 

li { 
    float: left; 

} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 22px 22px; 
    text-decoration: none; 
} 

li a:hover:not(.active) { 
    background-color: #111; 
} 

.active { 
    background-color: #4CAF50; 
} 

#wrapper { 
width: 720px; 
margin: auto; 

} 

#slideshow { 
padding: 15px 40px; 

    } 

h1{ 
    font-size: 40px; 
    margin-top:35%; 
    margin-left:-27%; 
    font-style: italic; 
    font-size: 28px; 
    font-variant: small-caps; 
    overflow: hidden; 

} 
h1:after { 
background-color: gray; 
content: ""; 
display: inline-block; 
height: 1px; 
position: static; 
vertical-align: middle; 
width: 70%; 
    left: 0.5em; 
margin-right: -50%; 
} 

#images{ 
    float: left; 
    margin: 0px 0px 10px -150px;} 
    } 

</style> 
</head> 
<body> 

<div id="wrapper"> 
<ul> 
    <li><a class="active" href="#home">Home</a></li> 
    <li><a href="#news">News</a></li> 
    <li><a href="#contact">Trailers</a></li> 
    <li><a href="#about">Series</a></li> 
</ul> 

<!-- end of nav section --> 


HTML SECTION 
    <!-- slideshow --> 
    <div id="slideshow"> 
    <h2 class="w3-center">Manual Slideshow</h2> 

    <div class="w3-content" style="max-width:750px;position:relative;left:-200px;height:200px;"> 

    <img class="mySlides" src="images/1.jpg" style="width:100%;height:380px;"> 
    <img class="mySlides" src="images/2.jpg" style="width:100%"> 
    <img class="mySlides" src="images/3.jpg" style="width:100%"> 
    <img class="mySlides" src="images/8.jpg" style="width:100%"> 

    <a class="w3-btn-floating" style="position:absolute;top:45%;left:0" onclick="plusDivs(-1)">></a> 
    <a class="w3-btn-floating" style="position:absolute;top:45%;right:0" onclick="plusDivs(1)"><</a> 
    </div> 

    <script> 
    var slideIndex = 1; 
    showDivs(slideIndex); 

    function plusDivs(n) { 
     showDivs(slideIndex += n); 
    } 

    function showDivs(n) { 
     var i; 
     var x = document.getElementsByClassName("mySlides"); 
     if (n > x.length) {slideIndex = 1} 
     if (n < 1) {slideIndex = x.length} 
     for (i = 0; i < x.length; i++) { 
     x[i].style.display = "none"; 
     } 
     x[slideIndex-1].style.display = "block"; 
    } 

    </script> 
    <!-- end of slideshow --> 
    </div> 

    </body> 

    </html>

私のウェブサイト：あなたは、これはトリックを行う必要がありz-indexと上位層へのナビゲーションを設定する必要があるため、ナビゲーションはスライドショーを怒鳴る取得http://bcns2k16mt.net16.net/BCNS_16A_FT_160312/

出典

2016-09-25 Matthieu Topize

上

使用z-indexあなたは何をしようとしたのですか？ –

ようこそスタックオーバーフロー！あなたの質問の完全な内容は、リンクされているだけでなく**あなたの質問で**なければなりません。リンクが腐って、将来の質問やその回答が役に立たなくなり、人々はあなたを助けるためにオフサイトに行く必要はありません。スタックスニペット（ '<>'ツールバーボタン）を使用して理想的に[mcve] **を実行可能にします。その他：[*どのように良い質問をしますか*]（/ help/how-to-ask） –

ウェブサイトのリンクではなく、コードを教えてください。 –

理由があります。 ul

ul { 
    ... 
    z-index: 5; 
}

出典

2016-09-25 16:56:31

ulのZ-インデックスがスライドショーの問題を修正しました:)ありがとう –

スライドショーのオーバーナビゲーションnav barとnav bar elementsの配置

答えて

関連する問題