Meine Menüleiste Links funktionieren nicht auf meiner Indexseite

Der Code, den ich hier verlinkt funktioniert, aber nicht auf meinem Computer innerhalb von Atom. Liegt es daran, dass ich es lokal an Stelle eines Servers verbinde?Meine Menüleiste Links funktionieren nicht auf meiner Indexseite

Ich habe zwei getrennte Seiten und Links oben hinzugefügt, um zwischen ihnen zu wechseln. Auf beiden Seiten verwende ich das gleiche CSS, das ich kopiert und eingefügt habe, aber auf der Indexseite funktionieren die Links nicht, während die Serviceseiten gut funktionieren.

.header{ 
 
    display: block; 
 
    background-image: url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg); 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    -webkit-filter: brightness(130%); 
 
    min-height: 70vh; 
 
    overflow: hidden; 
 
} 
 

 
.menu{ 
 
    width: 100%; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
.header ul li a:hover{ 
 
    background: white; 
 
    color: gray; 
 
} 
 

 

 
.header ul li{ 
 
    float: left; 
 
    list-style: none; 
 
    padding: 10px 10px; 
 
} 
 

 
.menu ul li a{ 
 
    text-decoration: none; 
 
    padding: 10px 10px; 
 
    margin: 0; 
 
    text-align: center; 
 
    font-size: 50px; 
 
    display: flex; 
 
    transition: all .5s ease; 
 
    border-radius: 4px; 
 
    color: Blue; 
 
} 
 

 
.title{ 
 
    clear: both; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: auto; 
 
} 
 

 
.title h1{ 
 
    background: -webkit-linear-gradient(left, #0d78f7,navy); 
 
    font-size: 40px; 
 
background: -webkit-linear-gradient(left, #0d78f7, navy); 
 
background: -o-linear-gradient(left, #0d78f7, navy); 
 
background: -moz-linear-gradient(left, #0d78f7, navy); 
 
background: linear-gradient(left, #0d78f7, navy); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
display:flex; 
 
justify-content: center; 
 

 
}

<div class="header"> 
 
     <ul class="menu"> 
 
     <li><a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/index.html">Home</a></li> 
 
     <li><a href="file:///C:/Users/Work/AppData/Local/atom/app-1.18.0/Code/My%20Site/services.html">Services</a></li> 
 
     <li>Contact</li> 
 
     </ul> 
 
     <div class="title"> 
 
     <h1>ONLOOKER DESIGNS</h1> 
 
     </div> 
 
    </div>

Quelle

2017-08-03 Ryan

Was genau Ihr Problem ist, ich verstehe es nicht ... Und Sie sollten kopieren und die gleichen CSS-Code nicht auf jeder Seite. Suchen Sie, wie man eine .css-Stil-Datei mit Ihrer HTML-Seite verbindet, erlaubt es Ihnen, eine statische style.css-Seite zu verknüpfen, die Ihren ganzen css-Code an einer Stelle enthält, anstatt ihn auf jeder Seite zu kopieren –

Nicht wirklich sicher was Du fragst genau. Also funktionieren die Links auf dem Server, aber nicht lokal? Es sollte umgekehrt sein. – Brxxn

Verwenden Sie das Dateisystem nicht mehr, um auf irgendetwas hinzuweisen - verwenden Sie relative URLs. – CBroe

Ihr href Attribut enthält einen Link, der „Datei“ Protokoll und insbesondere verwendet, es zeigt auf einen eigenen lokalen Festplatte.

Andere Personen können nicht auf Ihre lokalen Dateien zugreifen.

Jetzt würde ich Ihnen empfehlen, einen relativen Dateipfad anstelle eines absoluten zu verwenden, wenn Sie möchten, dass die Dateien auf jedem Computer funktionieren, der lokal auf Ihre Dateien zugreift.

Dies würde im Idealfall wie folgt aussehen:

<a href="index.html">

Quelle

2017-08-03 14:03:53

Try this:

<div class="header"> 
     <ul class="menu"> 
     <li><a href="index.html">Home</a></li> 
     <li><a href="services.html">Services</a></li> 
     <li>Contact</li> 
     </ul> 
     <div class="title"> 
     <h1>ONLOOKER DESIGNS</h1> 
     </div> 
</div>

, wenn Sie alle drei Dateien im selben Verzeichnis.

Quelle

2017-08-03 14:00:54

Sie sollte so versuchen:

.header{ 
 
    display: block; 
 
    background-image: url(https://static.pexels.com/photos/204495/pexels-photo-204495.jpeg); 
 
    background-size: 100% auto; 
 
    background-repeat: no-repeat; 
 
    background-position: center center; 
 
    -webkit-filter: brightness(130%); 
 
    min-height: 70vh; 
 
    overflow: hidden; 
 
} 
 

 
.menu{ 
 
    width: 100%; 
 
    text-align: center; 
 
    display: flex; 
 
    justify-content: center; 
 
    margin: 0 auto; 
 
    padding: 0; 
 
} 
 

 
.header ul li a:hover{ 
 
    background: white; 
 
    color: gray; 
 
} 
 

 

 
.header ul li{ 
 
    float: left; 
 
    list-style: none; 
 
    padding: 10px 10px; 
 
} 
 

 
.menu ul li a{ 
 
    text-decoration: none; 
 
    padding: 10px 10px; 
 
    margin: 0; 
 
    text-align: center; 
 
    font-size: 50px; 
 
    display: flex; 
 
    transition: all .5s ease; 
 
    border-radius: 4px; 
 
    color: Blue; 
 
} 
 

 
.title{ 
 
    clear: both; 
 
    display: flex; 
 
    justify-content: center; 
 
    text-align: center; 
 
    padding: 0; 
 
    margin: auto; 
 
} 
 

 
.title h1{ 
 
    background: -webkit-linear-gradient(left, #0d78f7,navy); 
 
    font-size: 40px; 
 
background: -webkit-linear-gradient(left, #0d78f7, navy); 
 
background: -o-linear-gradient(left, #0d78f7, navy); 
 
background: -moz-linear-gradient(left, #0d78f7, navy); 
 
background: linear-gradient(left, #0d78f7, navy); 
 
-webkit-background-clip: text; 
 
-webkit-text-fill-color: transparent; 
 
display:flex; 
 
justify-content: center; 
 

 
}

<div class="header"> 
 
     <ul class="menu"> 
 
     <li><a href="index.html">Home</a></li> 
 
     <li><a href="services.html">Services</a></li> 
 
     <li>Contact</li> 
 
     </ul> 
 
     <div class="title"> 
 
     <h1>ONLOOKER DESIGNS</h1> 
 
     </div> 
 
    </div>

Quelle

2017-08-03 14:00:54

Meine Menüleiste Links funktionieren nicht auf meiner Indexseite

Antwort

Verwandte Themen