Navigation Funktioniert nicht mehr

Luca123 · 19. August 2018

so nochmal Gude, ich bin Grade dabei mit HTML und css du basteln. Ich habe ein Navigation Menü oben rechts in die Ecke gesetzt und da ging alles. Dann habe ich ein h1 Text in die Mitte der page gemacht und jetzt kann ich die ersten 3 punkte des Navigation Menü nicht mehr anklicken.

HTML code

<html>

<head>

<title>CSS Bilder animation</title>

</head>

<body>

<li><a href="Info.html">ABOUT</a></li>

<li><a href="Bilder.html">GALLERY</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</div>

<div class="Hero"><h1>Herzlich Willkommen!</h1>

<ul>

<li><a href="Info.html" class="btn btn-one">About us!</a></li>

<li><a href="contact.html" class="btn btn-two">Contact us !</a></li>

</ul>

</div>

</header>

</body>

</html>

CSS Code

*

{

margin: 0;

padding: 0;

}

header {

background-image: url(wallpaper.jpg);

height: 100vh;

background-position: center;

background-size: cover;

}

.main-nav {

float: right !important;

list-style: none;

margin-top: 30px;

}

.main-nav li {

display: inline-block;

}

.main-nav li a

{

color: white;

text-decoration: none;

padding: 5px 20px;

font-family: sans-serif;

font-size: 15px;

}

.main-nav li.aktiv a

{

border: 1px solid white;

}

.main-nav li a:hover

{

border: 1px solid white;

}

.logo img

{

width: 120;

height: auto;

float: left;

}

.Welcome {

}

body

{

font-family: monospace;

}

.row

{

max-width: 1200px;

margin: auto;

}

.Hero {

position: absolute;

width: 1200px;

margin-left: 0;

margin-top: 20px;

}

h1 {

color: white;

text-transform: uppercase;

font-size: 55px;

text-align: center;

margin-top: 310px;

margin-left: 169px;

font-family: sans-serif;

}

.button {

margin-left: 550px;

list-style: none;

margin-top: 30px;

}

.button li {

display: inline-block;

z-index: 1;

}

.button li a

{

border: 1px solid white;

color: white;

text-decoration: none;

padding: 5px 20px;

font-family: sans-serif;

font-size: 15px;

}

.btn-one {

background-color: rgba(10,20,30,50%);

font-family: sans-serif;

}

.btn-two {

font-family: sans-serif;

}

.btn-two:hover {

background-color: sienna;

transition: all 0.5s ease-in;

}

.btn-one:hover {

background-color: sienna;

transition: all 0.2s ease-in;

}

Sailor · 19. August 2018

Bitte nutze zum Einfügen von Code den 'Code_einfüge_Button oben rechts in der Editorkopfzeile (</>), macht es uns einfacher das zu untersuchen.

Dein <div class="Hero"> ist mit 'position: absolute;' und 'z-index: 1;' der Störenfried. Dieses div überdeckt einen Teil deiner Navigation - diese 'absolute' und 'fixed' positionierten Elemente machen oft solche Probleme, weil sie sich einfach 'breit' machen und den Rest der Seite einfach überdecken... sie sind ja aus dem Textfluss herausgenommen.

Abhilfe schafft hier ein 'z-index: -1;', damit es hinter allem anderen liegt.

Ansonsten kann ich nur empfehlen, wo immer es geht, auf absolute und fixed zu verzichten! Gibt oft andere, bessere Methoden im CSS.

Luca123 · 19. August 2018

danke , Allerdings bei z-index -1 ist das jetzt hinter dem hintergrund bild . Ich teste es jetzt mal wie ich das ohne Fixed Positionen hin bekomme .

Luca123 · 19. August 2018

ok das ist echt doof irgendwie ... jetzt habe ich den Hintergrund einfach als Body gemacht . Jetzt gehen zwar die Nav links aber jetzt gehen unten die 2 anderen butten nicht mehr ...

Sailor · 19. August 2018

Ja.. die selbe Ursache :(! Mit diesen absolute positionierten div's hat man mehr Probleme, als dass die für irgendwas gut sind. Jetzt hast du wegen der Navigation oben das div mit -1 in Hintergrund gerückt... damit liegen aber auch die Inhalte von 'Hero' im Hintergrund - blöde Sache.

Hast du überhaupt einen Plan, wie mal die Gesamtheit der Seite aussehen soll? Header... Main... Footer... ?

Dann könnte man auch besser sagen, wie du es besser machen kannst.

Nach deinem Code zu urteilen machst du ja den typischen Fehler, dass du versuchst irgendwie mit festen Größen das Layout so hinzubiegen, dass es auf deinem Bildschirm passt... aber das ist in aller Regel nicht gut! 90% der Betrachter deiner Seite haben nun mal nicht deinen Monitor - von Handynutzern mal ganz abgesehen. ... und dass diese Positionierung mit absolute und fixed in diesem Zusammenhang kontraproduktiv ist, habe ich ja schon erwähnt

Luca123 · 19. August 2018

Hi Sailor,

Also ich habe vor 1 2 Jahren mich mal mit HTML auseinander gesetzt. Und wollte jetzt einfach mal mich an css und danach an java wagen . sprich ich bin Blutiger anfänger weswegen ich über jede Hilfe dankbar bin .

Arne Drews · 19. August 2018

Mit Java meinst Du sicher JavaScript, das ist ein nicht ganz kleiner Unterschied.

Abgesehen davon solltest Du erstmal HTML und CSS sicher einsetzen können, bevor Du mit JavaScript loslegst.

Sailor · 19. August 2018

Luca123

Da muss ich Arne Drews Recht geben - erst laufen lernen bevor man sich aufs Fahrrad setzt.

Aber zu deinem Problem... ich habe da mal deinen Code etwas angepasst und auf 'Flexbox' (https://css-tricks.com/snippets/css/a-guide-to-flexbox/) umgestellt.

Damit umschifft man ganz elegant die Probleme, die du mit deinem starren Layout hast. Außerdem ist so ein Flexbox Layout (beinahe) zu 100% responsiv, passt sich also vom Desktop bis zum Handy automatisch an.

Der HTML Code dazu:

HTML

<!DOCTYPE html>
<html lang="de">
<head>
<title>CSS Bilder animation</title>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet">
</head>
<body>

<div id="wrapper">

<header>
   <div class="logo"><img src="logo.png" alt=""></div>
   <nav>
      <ul class="main-nav">
         <li class="aktiv">
            <a href="index.html">HOME</a>
         </li>
         <li>
            <a href="Info.html">ABOUT</a>
         </li>
         <li>
            <a href="Bilder.html">GALLERY</a>
         </li>
         <li>
            <a href="contact.html">CONTACT</a>
         </li>
      </ul>
   </nav>
</header>

<main class="Hero">
   <h1>Herzlich Willkommen!</h1>
</main>

<footer class="button">
   <ul>
      <li>
         <a href="Info.html" class="btn btn-one">About us!</a>
      </li>
      <li>
         <a href="contact.html" class="btn btn-two">Contact us!</a>
      </li>
   </ul>
</footer>

</div>

</body>
</html>

Alles anzeigen

Und das passende CSS:

Code

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body {
   background-color: #ccc;
   background-image: url(wallpaper.jpg);
   background-position: center;
   background-size: cover;
}
#wrapper {
   display: flex;
   flex-direction: column;
   align-content: space-between;
   font-family: monospace;
   background-color: rgba(150, 150, 150, 0.8);
   width: 100%;
   max-width: 1200px;
   height: 100vh;
   margin: 0px auto;
}
header {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   background-color: rgba(150, 200, 150, 0.8);
}

.main-nav {
   list-style: none;
   margin-top: 30px;
}

.main-nav li {
   display: inline-block;
}

.main-nav li a {
   color: white;
   text-decoration: none;
   padding: 5px 20px;
   font-family: sans-serif;
   font-size: 15px;
   border: 1px solid transparent;
}

.main-nav li.aktiv a {
   border: 1px solid white;
}

.main-nav li a:hover {
   border: 1px solid white;
}

.logo img {
   width: 120px;
   height: auto;
}

.Hero {
   width: 100%;
   margin: auto;
}

h1 {
   color: white;
   text-transform: uppercase;
   font-size: 55px;
   text-align: center;
   font-family: sans-serif;
}

footer {
   background-color: rgba(150, 150, 255, 0.8);
   text-align: center;
   padding: 6px;
}
.button {
   width: 100%;
   height: auto;
   list-style: none;
}

.button li {
   display: inline-block;
}

.button li a {
   border: 1px solid white;
   color: white;
   text-decoration: none;
   padding: 5px 20px;
   font-family: sans-serif;
   font-size: 15px;
}

.btn-one {
   background-color: rgba(10,20,30,0.5);
   font-family: sans-serif;
}

.btn-two {
   font-family: sans-serif;
}

.btn-two:hover {
   background-color: sienna;
   transition: all 0.5s ease-in;
}

.btn-one:hover {
   background-color: sienna;
   transition: all 0.2s ease-in;
}

Alles anzeigen

Zur besseren Übersicht habe ich hier die unterschiedlichen Elemente (#wrapper, header, footer) etwas farblich hinterlegt.

Viel Spaß... ach ja... HTML5 ist der aktuelle Standard.

Navigation Funktioniert nicht mehr

Jetzt mitmachen!

Teilen

Tags