Auf Thema antworten

Beitrag

[QUOTE="newhtmluser, post: 12510, member: 4233"]
Hallo! 😊

Ich bin totaler Anfänger was HTML und CSS angeht. Ich bin grade dabei eine Webseite für mein Portfolio zu erstellen und bin nun auf das Problem gestoßen, dass mein Menü nicht "klickbar" ist. Das heißt, die einzelnen Menü Punkte sind nicht anklickbar und es erscheint auch keine Zeigefinger-Maus anstelle des Pfeils. Wo liegen die Fehler?
Danke im Voraus.

das ist der HTML:
[CODE=html]<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>LAGUNA AZUR design studio</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="slicknav.css">  
<meta name="viewport" content="width=1200px">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;300;400;600;700&display=swap" rel="stylesheet">
 
</head>

<body>
 
 
    <header>
 
        <img src="img/Logo2022.png" alt="Laguna Azur Logo" class="Logo">
     
        <ul id="menu">
    <li><a href="aboutme.html">about me</a></li>
    <li><a href="#">portfolio</a></li>
    <li><a href="#">inquiries</a></li>
    <li><a href="#">contact</a></li>
 </ul>
 
    </header>
 
    <main>
 
 
    <div class="row">
        <div class="col"></div>
         
             
                <h1>LAGUNA AZUR</h1>
                <p class="heading-body-copy">premium web design and branding for personal brands, creatives and small businesses</p>
             
        </div>
        </div>
     
        <div class="row">
            <div class="col col-lrg col-md col-sm"><img src="img/Canopee_opener.png" id="gray" alt="canopee"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/Noemi.png" id="gray1" alt="sonnenschirme"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/glitzerndes wasser.jpg" id="gray2" alt="single palm tree"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/zitatalt.png" id="gray3" alt="zitat"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/Sonnenliege.jpg" id="gray4" alt="palm trees on road"></div>
            <div class="col col-lrg col-md col-sm"><img src="img/punkte.png" id="gray5" alt="palm trees  in sky"></div>
         
        </div>
 
    </main>
 
 
 
 
    <script src="jquery-1.11.3.min.js"></script>
    <script src="jquery.slicknav.js"></script>
    <script>
    $(function(){
        $('#menu').slicknav();
    });
</script>
</body>
</html>[/CODE]

und das CSS:

[CODE=css]@charset "UTF-8";
/* CSS Document */

#gray {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray1 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray1:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray2 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray2:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray3 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray3:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray4 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray4:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

#gray5 {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

#gray5:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

/*Desktop / Global View*/

body {
     font-family: 'Josefin Sans', sans-serif;
    max-width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFFFFF;
}

.col {
    float: left;
    padding: 1%;
}

.col-lrg {
    width: 31.3%;
}

.col-lrg img {
    width: 100%;
    height: auto;
    display: block;
}

.Logo {
    width: 12%;
    height: 12%;
}
.slicknav_menu {
  display: none;
}
#menu {
  float: right;
}
#menu li {
  display: inline-block;
}
#menu li a {
  text-decoration: none;
  color: #5f9ea0;
  padding: 8px;
  font-size: 18px;
font-weight: 200;
}
header {
  padding: 10px 20px 20px 20px;
}

.hero {
    background-image: url(img/hero.jpg);
    padding: 52px 0px 52px 0px;
    background-size: cover;

}

.subheading {
    color: #91aaaa;
    font-weight: 400px;
    font-size: 25px;
    padding-left: 0px;
    padding-top: 10px;
    margin-bottom: -40px;
}

h1 {
    color: #91AAAA;
    font-weight: 300;
    font-size: 45px;
    padding-left: 9px;
    padding-top: 25px;
    margin-bottom: -30px;
 
}

.heading-body-copy {
    color: #91aaaa;
    font-weight: 100px;
    font-size: 20px;
    padding-left: 10px;
    padding-top: 20px;
    margin-right: 20%;

}

.inquiries {
    color: #FFFFFF;
    background-color: #91aaaa;
    padding: 10px 25px;
    margin-left: 50px;
    margin-bottom: 50px;
    text-decoration: none;
}

/*Tablet View*/

@media (max-width: 768px) {

#menu li {
    display: block;
    text-align: right;
}

.col-md {
        width: 48%;
    }

}

/*Mobile View*/

@media (max-width: 400px) {

.slicknav_menu {
        display: block;
    }

#menu {
        display: none;
    }
 
    .col-sm {
        width: 100%;
    }

.col {
        padding: 0%;
    }
}[/CODE]
[/QUOTE]

Authentifizierung