2017-11-01 1 views
0

Hier zu öffnen ist mein Code:Warum kann ich nicht überall drücken auf meine navbar Tasten, um die navbar

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<meta charset="UTF-8"> 
 
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet"> 
 
<link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet"> 
 

 
<style> 
 
.header { 
 
    color: white; 
 
    font-family: 'Inconsolata', monospace; 
 
\t font-size: 32px; 
 
\t text-align: center; 
 
\t margin: 2px; 
 
\t font-weight: bold; 
 
} 
 
.header2 { 
 
    color: white; 
 
\t font-family: 'Dancing Script', cursive; 
 
\t font-size:16px; 
 
\t top:-35%; 
 
\t left:-42%; 
 
\t position:relative; 
 

 
} 
 

 
body { 
 
    background-image:url('bk.jpg'); 
 
    font-family: helvetica, arial, serif; 
 
    background-size: cover; 
 
    font-size: 13px; 
 
    text-transform: uppercase; 
 
    text-align: center; 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
html { 
 
    width:100%; 
 
    height:100%; 
 
} 
 

 
.wrap { 
 
    display: inline-block; 
 
    -webkit-box-shadow: 0 0 70px #fff; 
 
    -moz-box-shadow: 0 0 70px #fff; 
 
    box-shadow: 0 0 70px #fff; 
 
    margin-top: 40px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
    display: block; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
    position: relative; 
 
    text-align: left; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
ul:after { 
 
    clear: both; 
 
} 
 

 
ul:before, 
 
ul:after { 
 
    content: " "; 
 
    display: table; 
 
} 
 

 
nav { 
 
    position: relative; 
 
    background: #2B2B2B; 
 
    background-image: -webkit-linear-gradient(bottom, #2B2B2B 7%, #333333 100%); 
 
    background-image: -moz-linear-gradient(bottom, #2B2B2B 7%, #333333 100%); 
 
    background-image: -o-linear-gradient(bottom, #2B2B2B 7%, #333333 100%); 
 
    background-image: linear-gradient(bottom, #2B2B2B 7%, #333333 100%); 
 
    letter-spacing: 2px; 
 
    text-shadow: 1px 1px 1px #0E0E0E; 
 
    -webkit-box-shadow: 2px 2px 3px #888; 
 
    -moz-box-shadow: 2px 2px 3px #888; 
 
    box-shadow: 2px 2px 3px #888; 
 
    border-bottom-right-radius: 80px; 
 
    border-bottom-left-radius: 80px; 
 
    left:-8px; 
 
    display:inline-block; 
 
} 
 

 
ul.primary li a { 
 
    display: block; 
 
    padding: 20px 20px; 
 
    border-right: 1px solid #3D3D3D; 
 
} 
 

 
ul.primary li:last-child a { 
 
    border-right:none; 
 
} 
 

 
ul.primary li a:hover { 
 
    
 
    color: #000; 
 
} 
 

 
ul.sub { 
 
    position: absolute; 
 
    z-index: 200; 
 
    box-shadow: 2px 2px 0 #BEBEBE; 
 
    width: 15%; 
 
    display:none; 
 
} 
 

 
ul.sub li { 
 
    float: none; 
 
    margin: 0; 
 
} 
 

 
ul.sub li a { 
 
    border-bottom: 1px dotted #ccc; 
 
    border-right: none; 
 
    color: #000; 
 
    padding: 20px 20px; 
 
} 
 

 
ul.sub li:last-child a { 
 
    border-bottom: none; 
 
} 
 

 
ul.sub li a:hover { 
 
    color: #000; 
 
    background: #eeeeee; 
 
} 
 

 
ul.sub2 { 
 
    position: absolute; 
 
    z-index: 200; 
 
    box-shadow: 2px 2px 0 #BEBEBE; 
 
    width: 15%; 
 
    display:none; 
 
} 
 

 
ul.sub2 li { 
 
    float: none; 
 
    margin: 0; 
 
} 
 

 
ul.sub2 li a { 
 
    border-bottom: 1px dotted #ccc; 
 
    border-right: none; 
 
    color: #000; 
 
    padding: 15px 15px; 
 
} 
 

 
ul.sub2 li:last-child a { 
 
    border-bottom: none; 
 
} 
 

 
ul.sub2 li a:hover { 
 
    color: #000; 
 
    background: #eeeeee; 
 
} 
 
ul.primary li:hover ul { 
 
    display: block; 
 
    background: #fff; 
 
} 
 

 
ul.primary li:hover a { 
 
    background: #fff; 
 
    color: #666; 
 
    text-shadow: none; 
 
} 
 

 
ul.primary li:hover > a{ 
 
    color: #000; 
 
} 
 

 
@media only screen and (max-width: 600px) { 
 
    .decor { 
 
    padding: 3px; 
 
    } 
 
    
 
    .wrap { 
 
    width: 100%; 
 
    margin-top: 0px; 
 
    } 
 
    
 
    li { 
 
    float: none; 
 
    } 
 
    
 
    ul.primary li:hover a { 
 
    background: none; 
 
    color: #8B8B8B; 
 
    text-shadow: 1px 1px #000; 
 
    text-decoration: underline; 
 

 
    } 
 

 
    ul.primary li:hover ul { 
 
    display: block; 
 
    background: #272727; 
 
    color: #fff; 
 
    text-decoration: underline; 
 

 
    } 
 
    
 
    ul.sub { 
 
    display: block; 
 
    position: static; 
 
    box-shadow: none; 
 
    width: 100%; 
 
    text-decoration: underline; 
 

 
    } 
 
    
 
    ul.sub li a { 
 
    background: #272727; 
 
    \t border: none; 
 
    color: #8B8B8B; 
 
    text-decoration: underline; 
 
    } 
 
    
 
    ul.sub li a:hover { 
 
    color: #ccc; 
 
    background: none; 
 
    text-decoration: underline; 
 
    } 
 
    ul.sub2 { 
 
    display: block; 
 
    position: static; 
 
    box-shadow: none; 
 
    width: 100%; 
 
    text-decoration: underline; 
 

 
    } 
 
    
 
    ul.sub2 li a { 
 
    background: #272727; 
 
    \t border: none; 
 
    color: #8B8B8B; 
 
    text-decoration: underline; 
 
    } 
 
    
 
    ul.sub2 li a:hover { 
 
    color: #ccc; 
 
    background: none; 
 
    text-decoration: underline; 
 
    } 
 
.button { 
 
    \t border: 3px solid #FF4A00; 
 
    \t padding: 7px 16px; 
 
    \t cursor: pointer; 
 
    \t color:white; 
 
    \t font-weight: bold; 
 
\t border-radius: 1em; 
 
\t background-color: transparent; 
 
\t transition: 0.2s; 
 
} 
 
.button:hover { 
 
\t background-color: #FF4A00; 
 
} 
 
.LeftFloatAds{ 
 
left:-80%; 
 
position: fixed; 
 
text-align: left; 
 
top: 0px; 
 
} 
 

 
.RightFloatAds{ 
 
right: 0px; 
 
position: fixed; 
 
text-align: center; 
 
top: 0px; 
 
} 
 
.adBottom { 
 
left: 0px; 
 
position: fixed; 
 
text-align:center; 
 
bottom: 0px; 
 
width:100%; 
 
z-index:999; 
 
} 
 
</head> 
 
</style> 
 
<body> 
 
<nav> 
 
    <ul class="primary"> 
 
    <li> 
 
     <a href="index.html">Hjem</a> 
 
     <ul class="sub2"> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="">Om meg</a> 
 
     <ul class="sub2"> 
 
     <li><a href="">Min Biografi</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="">Mine interesser</a> 
 
     <ul class="sub2"> 
 
     <li><a href="">Gaming</a></li> 
 
     <li><a href="">Anime</a></li> 
 
     <li><a href="">Dank memes</a></li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="">Min fremtid</a> 
 
     <ul class="sub2"> 
 
     <li><a href="">Juss</a> 
 
     </ul> 
 
    <li> 
 
    \t <a href="mineoppgaver.html">Mine Oppgaver</a> 
 
    \t <ul class="sub"> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="">Kontakt meg</a> 
 
     <ul class="sub2"> 
 
     <li><a href="https://www.facebook.com/ridallah.halabi" target="_blank"> 
 
     <input type="image" src="./fb.png" value="submit" width="50" height="50"> 
 
    </a> 
 
\t </li> 
 
     <li><a href="http://steamcommunity.com/id/GlowsyJR" target="_blank"> 
 
     \t <input type="image" src="./steam.png" value="submit" width="48" height="48"> 
 
    </a> 
 
\t </li> 
 
     <li><a href="https://www.snapchat.com/add/rida-00" target="_blank"> 
 
     \t <input type="image" src="./snap.png" value="submit" width="70" height="70"> 
 
    </a> 
 
\t </li> 
 
\t   <li><a href="https://twitter.com/GlowsyJr" target="_blank"> 
 
     \t <input type="image" src="./twitter.png" value="submit" width="50" height="50"> 
 
    </a> 
 
\t </li> 
 
\t \t   <li><a href="index.html"> 
 
     \t <input type="image" src="./ring.png" value="submit" width="120" height="70"> 
 
    </a> 
 
\t </li> 
 
    </ul> 
 
    </li> 
 
    </ul> 
 
</nav> 
 
<div class="header"> 
 
<h1><b>Velkommen til min side!</b></h1> 
 
</div> 
 
<audio autoplay="true" src="skrra.mp3" hidden="true"> 
 
</audio> 
 
<div class="header2"> 
 
<h1><b>Rida Halabi</b></h1> 
 
</div> 
 
<div id=".adBottom" style="bottom:150px;position: fixed; text-align: center; top: 100px;"> <script type="text/javascript"> 
 
<script type="text/javascript"> 
 
    atOptions = { 
 
    'key' : 'e0e18baa700c8ab07e64e121d8070fce', 
 
    'format' : 'iframe', 
 
    'height' : 90, 
 
    'width' : 728, 
 
    'params' : {} 
 
    }; 
 
    document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.bnserving.com/e0e18baa700c8ab07e64e121d8070fce/invoke.js"></scr' + 'ipt>'); 
 
</script> 
 
</div> 
 
<div id="RightFloatAds" style="right: 0px; position: fixed; text-align: center; top: 100px;"> <script type="text/javascript"> 
 
\t atOptions = { 
 
\t \t 'key' : 'b9f9e2b2af5e4716138c8fe4f97c0905', 
 
\t \t 'format' : 'iframe', 
 
\t \t 'height' : 600, 
 
\t \t 'width' : 160, 
 
\t \t 'params' : {} 
 
\t }; 
 
\t document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.bnserving.com/b9f9e2b2af5e4716138c8fe4f97c0905/invoke.js"></scr' + 'ipt>'); 
 
</script> 
 
</div> 
 

 
<div id="LeftFloatAds" style="left: 0px; position: fixed; text-align: center; top: 100px;"> <script type="text/javascript"> 
 
\t atOptions = { 
 
\t \t 'key' : 'b9f9e2b2af5e4716138c8fe4f97c0905', 
 
\t \t 'format' : 'iframe', 
 
\t \t 'height' : 600, 
 
\t \t 'width' : 160, 
 
\t \t 'params' : {} 
 
\t }; 
 
\t document.write('<scr' + 'ipt type="text/javascript" src="http' + (location.protocol === 'https:' ? 's' : '') + '://www.bnserving.com/b9f9e2b2af5e4716138c8fe4f97c0905/invoke.js"></scr' + 'ipt>'); 
 
</script> 
 
</div> 
 
</body> 
 
</html>

Meine Website: http://ridallah.informatikk5.net/

Das Problem, das ich habe ist, dass um Knöpfe wie "Hjem" (Zuhause) zu drücken, müsste ich entweder einen kleinen Platz oben oder unten drücken. Während die letzten Knöpfe auf der rechten Seite gut funktionieren, warum ist das so? Wenn Sie irgendwelche anderen Fehler finden, würde ich gerne wissen.

+0

so ... Sie werden auf eine ungültige Seite ab sofort umgeleitet..korrekt? –

+0

Welcher Browser ist es? Funktioniert hier in Chrome – Morpheus

+0

Wo ist Ihr Code? – kwoxer

Antwort

1

Ihr <div class="header2"> Block mit der h1 Innenseite überlagert Ihr Navigationsgerät teilweise. Fügen Sie jedem einen Z-Index hinzu und Sie sollten Ihr Problem lösen:

.header2 { 
    z-index: 1; 
} 
nav { 
    z-index: 2; 
} 
Verwandte Themen