Navigation Funktioniert nicht mehr

  • 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>

    <meta charset="UTF-8">

    <link href="style.css" rel="stylesheet">

    </head>

    <body>


    <header>


    <div class="row">


    <div class="logo"><img src="logo.png"></div>





    <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>

    </div>




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




    <div 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>

    </div>


    </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;



    }

  • 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.

  • 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  

    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:

    Und das passende CSS:

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

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