-1
So ist es eine Weile her, seit ich HTML/CSS geschrieben habe. Ich habe vor einiger Zeit eine Website geschrieben und muss den Code von einem Registrar zu einem anderen verschieben (Schulserver zu Google). Aber die eine Sache, die ich bemerkte, ist, dass die Navigationsleiste (Navbar), die von JQuery gezogen wurde, nicht angezeigt wird.Navbar zeigt nicht
Die Struktur des Dateisystems der Schule ließ mich Dateien unorthodox hinzufügen, vielleicht wird deshalb die Navbar einfach nicht geladen. Hier ist im Wesentlichen, wie das Dateisystem eingerichtet ist.
Die Navigationsleiste ist eine Komponente der Kopfzeile, in der die Vorlage enthalten ist und die auf der Indexseite platziert wird. So können Sie über die header.html als ein Element denken, das in index.html lebt. Die Indexseite sollte in der Lage sein, die Navigationsleiste in die index Seite aufzurufen, aber das scheint überhaupt nicht zu passieren.
Index.HTML
<!DOCTYPE html>
<html lang="en">
<!-- TODO: replace ../ with root folder path-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="My Site" content="">
<meta name="Max Gittelman" content="">
<title>Max Gittelman</title>
<link rel="shortcut icon" href="images/index.ico" />
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Font -->
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic' rel='stylesheet' type='text/css'>
<!-- Custom CSS -->
<link href="css/styles.css" rel="stylesheet">
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div id="header"></div>
<div id="footer"></div>
<script>
$("#header").load("templates/header.html #header-template");
$("#footer").load("templates/footer.html #footer-template");
</script>
<!-- Page Content -->
<div class="container">
<img src="images/me.jpg" alt="" class="my-pic center-block" />
<h3 class="text-center mich">University of Michigan '17</h3>
<hr width="50%">
<div class="text-center index-text">
<p>Computer Science Engineering<br>
Machine Learning<br>
Artificial Intelligence</p>
</div>
</div>
</body>
</html>
Styles.css
body {
margin-top: 70px; /* Required padding for .navbar-fixed-top. Remove if using .navbar-static-top. Change if height of navigation changes. */
font-family: 'Lato',serif;
color: black;
margin-bottom: 40px;
}
footer {
/*margin: 50px 0;*/
position:fixed;
height: 35px;
background-color: #41b5f3;
bottom:0px; left:0px; right:0px;
padding-top: 8px;
color: white;
z-index: 4;
border-top: 1px solid black;
}
footer a {
color: white;
}
footer a:hover {
text-decoration: none;
color: gray;
}
.mich {
font-family: Arial;
font-weight: 800;
}
.divider {
width: 40%;
}
.index-text p {
font-family: Arial;
font-size: 120%;
}
.footer-text {
font-family: Arial;
font-size: 95%;
}
.my-pic {
width: 240px;
height: auto;
margin-top: 50px;
}
.navbar {
background-color: #41b5f3;
}
.navbar a {
font-size: 95%;
}
@media (min-width: 768px) {
.navbar-brand {
position: absolute;
width: 100%;
left: 0;
text-align: center;
margin:0 auto;
}
.navbar-brand a {
padding-left: 35px;
}
}
.navbar-inverse .navbar-nav li a {
color: white;
text-align: center;
}
.navbar-inverse .navbar-brand a {
color: white;
text-align: center;
}
.navbar-inverse .navbar-brand a:hover {
color: #f0f341;
text-decoration: none;
}
.navbar-inverse .navbar-nav li:hover {
background-color: #415cf3;
border-radius: 4px;
}
.navbar-inverse .navbar-nav li a:hover {
color: #f0f341;
}
.dropdown-menu {
background-color: #41b5f3;
}
.dropdown-menu a:hover {
color: #41b5f3;
}
.about {
width: 70%;
margin: auto;
max-width: 700px;
}
.about_pic {
margin: 0px auto 30px auto;
text-align: center;
}
.about_pic img {
width: 25%;
min-width: 250px;
max-width: 400px;
height: auto;
border: 10px solid black;
}
@media (max-width: 550px) {
.about p {
font-size: 13px;
}
}
@media (min-width: 551px) {
.about p {
font-size: 15px;
}
}
.contact-top-text {
text-align: center;
margin-top: 100px;
}
.contact-top-text p {
font-size: 20px;
}
.submit-btn {
background-color: #41b5f3;
}
.submit-btn:hover {
background-color: #415cf3;
color: #f0f341;
border-color: #415cf3;
}
form {
text-align: center;
}
.cap {
margin: auto;
}
.g-recaptcha {
margin: 10px;
display: inline-block;
}
.recaptcha-form .btn {
background-color: #41b5f3;
}
input#email {
border-width: 0.25px;
border-color: #eeeeee;
}
input#name {
border-width: 0.25px;
border-color: #eeeeee;
}
input {
border-width: 0.25px;
border-color: #eeeeee;
}
.mtn_div {
border: 1px dashed red;
}
.mtn_div a {
padding-right: 0px;
}
.navbar-nav li a:nth-child(4) {
padding: 0px;
text-align: center;
}
.mtn {
border: 1px solid red;
height: 40px;
width: auto;
}
h1, h2, h3, h4, h5, h6, p {
font-family: Arial;
}
.col-md-5 {
vertical-align: center;
}
.img-responsive {
margin: auto;
height: 250px;
width: auto;
margin-top: 25px;
display: inline-block;
}
.portfolio-container .col-md-7 {
text-align: center;
}
.portfolio-container .row {
width: 100%;
}
.review-one {
height: 100px;
width: auto;
border: 1px dotted black;
}
.review-two {
margin-top: 25px;
}
.gif {
display: inline-block;
margin: 15px;
height: 102px;
width: auto;
text-align: center;
}
.bellman-container {
text-align: center;
}
.bellman {
vertical-align: center;
width: 80%;
height: auto;
}
.tsp img {
margin-top: 0px;
height: 250px;
width: auto;
z-index: 1;
}
.anon {
height: 160px;
width: auto;
display: inline;
}
.ship-text {
margin-top: 10px;
}
.log-text {
margin-top: 25px;
}
.fsm-text {
margin-top: 20px;
}
.pipeline-text {
margin-top: 20px;
}
.kili-body {
background-color: #8daadc;
}
.kili-container {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 100%;
max-height: 100%;
margin: 52px auto 35px auto;
}
.kili-container img {
position: absolute;
max-height: 100%;
max-width: 100%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
z-index: -1;
}
.kili-words {
color: white;
position: absolute;
margin: 0px auto 0px auto;
min-height: 8em;
width: 60%;
left: 0;
right: 0;
bottom: 0;
}
.kili-words p {
font-family: Arial;
font-size: 14px;
}
.form-control {
margin: auto;
width: 30%;
max-width: 400px;
min-width: 300px;
}
.success-container {
text-align: center;
}
.success-container h1 {
color: #00274c;
}
.success-pic {
margin-top: 20px;
width: 75%;
height: auto;
}
Header (Wo navbar Leben)
<nav class="navbar navbar-inverse navbar-fixed-top" id="header-template">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand"><a href="index.html">Max Gittelman</a></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="about.html">About</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="kili.html">Kilimanjaro</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
Es kann mehr deutlich, wenn man einen Blick auf die repository nehmen basierend auf dem Layout.
Sie müssen hier ein minimales Beispiel Ihres Codes posten, nicht ein github, der ändern oder verschwinden kann, um niemandem morgen zu helfen: [mcve] – Rob
Suchen Sie in der * Network * -Konsole Ihres Browsers. Wenn es eine 404-Antwort für Ihre CSS-Datei gibt, dann verwenden Sie tatsächlich den falschen Ort – Phil
@Max Erhalten Sie einen Fehler in der Browser-Konsole? – Shiladitya