1
Ich benutze Free Code Camp um zu lernen, und vor ein paar Tagen habe ich die Portfolio Project. Ich habe große Fortschritte gemacht und einiges gelernt, aber ich stecke auf einem ziemlich wichtigen Punkt fest. Meine Hintergrundbilder verschwinden immer weiter. Sie verschwinden zu zufälligen Zeiten. Ich kann es vorübergehend reparieren, indem ich den Code umschreibe (nicht nur den Code kopiere/einfüge), aber es kommt immer wieder vor.Hintergrundbild verschwindet immer wieder
Wenn Sie Leute nichts dagegen hätten, sehen Sie sich bitte meinen Code an. Um schnell zu suchen, suchen Sie nach aboutpage und portfoliopage (in HTML und CSS), um die spezifischen Instanzen zu sehen, über die ich spreche. Natürlich, vielleicht einige andere Aspekte des Codes borking es. Dies passiert seit ich vorher JavaScript hinzugefügt habe.
HTML
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!--<script>
$(document).ready(function(){
// Add smooth scrolling to all links
$("a").on('click', function(event) {
// Make sure this.hash has a value before overriding default behavior
if (this.hash !== "") {
// Prevent default anchor click behavior
event.preventDefault();
// Store hash
var hash = this.hash;
// Using jQuery's animate() method to add smooth page scroll
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({
scrollTop: $(hash).offset().top
}, 800, function(){
// Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash;
});
} // End if
});
});
</script> -->
<title>David Clark | Portfolio</title>
</head>
<!--<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">David Clark</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#">About</a>
</li>
<li>
<a href="#">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>-->
<body data-spy="scroll" data-target=".navbar" data-offset="0">
<nav id="mainnavbar" class="navbar navbar-default navbar-fixed-top" roll="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="aboutpage">David Clark</a>
</div>
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a href="#aboutpage">About</a>
</li>
<li>
<a href="#portfoliopage">Portfolio</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>
</nav>
<div id="aboutpage">
<article>
<div class="block text-center">
<img class="portrait" src="https://avatars0.githubusercontent.com/u/15970036?v=3&s=460">
<h1>david clark</h1>
<div class="btnList">
<a class="btn btn-social-icon btn-bootstrap" href="https://twitter.com/daviddoes___">
<span class="fa fa-twitter"></span>
</a>
<a class="btn btn-social-icon btn-bootstrap" href="https://github.com/SlouchingToast">
<span class="fa fa-github"></span>
</a>
<a class="btn btn-social-icon btn-bootstrap" href="https://www.linkedin.com/in/creativedavid">
<span class="fa fa-linkedin"></span>
</a>
</div>
</article>
</div>
</div>
<div id="portfoliopage">
<article>
<div class="portblock">
<h1>Hello!</h1>
</article>
</div>
</div>
</body>
</html>
CSS
.navbar-nav{
font-family:'Open Sans Condensed', sans-serif;
font-size: 2.0em;
}
.navbar-brand{
font-family:'Open Sans Condensed', sans-serif;
font-size:2.0em;
}
body{
font-family:'Open Sans Condensed', sans-serif;
color:white;
margin:0;
padding:0;
}
h1{
padding: 0;
margin-top: -1%;
text-align: center;
color:rgb(54,54,54);
font-size: 80px;
text-decoration: underline;
}
.btn:hover{
color:#FEEE8B;
}
.btn{
align-text: center;
margin-bottom:3%;
margin-right:5px;
margin-left:5px;
border-radius: 0 !important;
font-size:20px;
color:rgb(54,54,54);
}
article{
padding-bottom:10px;
}
.block{
background-color:rgba(157,178,197,.6);
opacity:1;
width:50%;
height:12%;
margin-right:auto;
margin-left:auto;
margin-top:10%;
object-border:10px;
}
.portblock{
text-align:right;
background-color:rgba(157,178,197,.6);
opacity:1;
width:50%;
height:12%;
margin-top:10%;
object-border:10px;
margin-left:auto;
}
.portrait{
width:40%;
height:auto;
border-radius:50%;
margin-bottom:3%;
margin-top:3%;
opacity:.9;
}
#aboutpage{
background-image:url(https://crossorigin.me/http://i.imgur.com/Qt3kOoF.jpg);
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
#portfoliopage{
background-image:url(https://crossorigin.me/http://i.imgur.com/IYXAg7k.jpg);
no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:800px;
padding: 1px;
}
JavaScript
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
Thanks so much!
Ja, so habe ich es ursprünglich geschrieben, aber jemand im Free Code Camp hat das Zimmer nicht gesagt. Es hat keinen Unterschied gemacht. Ich habe das "" eingefügt und es im Code gelassen. – David