Also ich bin seit über einer Woche in diesem Thema stecken und es macht mich verrückt. Ich möchte meine Fußzeile am Ende meiner Webseite positionieren. Aus irgendeinem Grund möchte es einfach in der Mitte der Seite schweben, direkt unter meinem letzten div. Ich habe viel geforscht und eine Million verschiedener Dinge ausprobiert, und keiner von ihnen hat mir die Ergebnisse geliefert, die ich brauche.Warum wird meine Fußzeile nicht zum Ende der Seite verschoben?
Hier sind einige der Lösungen, die ich versucht habe:
ich mit der Position Eigenschaft rumgespielt, es ‚absolute‘, ‚relativ‘ und ‚fest eingestellt '. 'Relativ' schob die Fußzeile nach unten, aber schob auch den Inhalt darunter. 'Absolute' funktionierte in der Positionierung ganz unten, aber aus irgendeinem Grund schnitt es die Breite der Fußzeile ab. (Ich habe versucht, die Breite manuell einzustellen, aber kein Glück). Dasselbe gilt für "fest".
stelle ich die Ränder und Polsterung der Körper und html Gehalt auf 0.
I die Höhe des Körpers auf 100% gesetzt.
Ich überprüft, um sicherzustellen, dass alle Tags geschlossen waren.
Ich habe versucht, die Fußzeile außerhalb des Körpers zu platzieren.
Ich habe versucht, neue divs vor und um die Fußzeile zu erstellen.
An diesem Punkt bin ich mir nicht sicher, was das Problem ist. Kann mir jemand helfen?
body {
background-color: white;
background-image: url(http://michellewalling.com/wp-content/uploads/2015/10/purple-planet.jpg);
background-size: cover;
max-height: 100%;
}
ul {
list-style-type: none;
font-family: "Lucida Console";
}
li {
font-size: 150%;
font-family: Abel;
display: inline;
width: 390px;
margin: 18px;
position: relative;
bottom: -21px;
}
div.well {
background-color: black;
height: 55px;
width: 1609px;
position: relative;
left: -17px;
top: -20px; \t
}
.container {
\t min-height: 100%; \t
}
div.main {
background-image: url();
text-align: center;
position: relative;
padding-top: 20px;
position: relative;
bottom: -40px;
min-height: 100%;
}
p {
color: white;
text-align: center;
position: relative;
bottom: -50px;
padding-bottom: 200px;
}
h1 {
text-align: center;
font-family: "Londrina Shadow";
font-size: 600%;
color: black;
letter-spacing: 0.2em;
}
h2 {
font-family: Chewy;
font-size: 300%;
color: black;
padding-bottom: 20px;
position: relative;
top: -60px;
}
li a:hover {
\t background-color: gainsboro;
\t color: black;
}
.links {
text-align: center;
letter-spacing: 15px;
}
.youtube {
position: relative;
bottom: -3px;
}
.dailymotion {
position: relative;
top: -1px;
}
/* html, body {
\t height: 100%;
\t padding: 0;
\t margin: 0; \t
} */
.footer {
\t background-color: black;
\t height: 100px;
\t padding: 0;
\t margin: 0; \t
}<!DOCTYPE html>
<html>
<head>
<title>iHeartFandomz.net</title>
</head>
<body>
<!-- Google fonts -->
<link href="https://fonts.googleapis.com/css?family=Londrina Shadow" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Kavivanar" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo Bhaijaan" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Acme" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Chewy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Luckiest Guy" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Abel" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">
<link rel = "stylesheet" type = "text/css" href = "iheartfandomz.css"/>
<div class="container">
<div class="col-xs-6">
<div class="well">
<ul>
<li class="active"><a href="#Home" data-toggle="tab" style="text-decoration:none">Home</a></li>
<li><a href="#Videos" data-toggle="tab" style="text-decoration:none">Videos</a></li>
<li><a href="#Fanart" data-toggle="tab" style="text-decoration:none">Fanart</a></li>
</ul>
</div>
</div>
<div class="main">
\t \t <h1>iHeartFandomz</h1>
\t \t <h2>Fandoms Collection</h2>
\t </div>
<div class="links">
<a href="https://www.youtube.com/user/HeartzHugzKissez" target="_blank"><img class="youtube" src="https://cdn1.iconfinder.com/data/icons/logotypes/32/youtube-512.png" style="width: 55px;"></a>
<a href="https://twitter.com/i_Heart_fandomz" target="_blank"><img class="twitter" src="http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/social-twitter-icon.png" style="width: 50px;"></a>
<a href="https://gabbykun555.deviantart.com/" target="_blank"><img class="deviantart" src="https://static.wixstatic.com/media/816933_9cc6964ab1b6426d818e3ea9859995f3~mv2.png" style="width: 50px;"></a>
<a href="https://www.dailymotion.com/iHeartFandomz" target="_blank"><img class="dailymotion" src="https://www.drupal.org/files/project-images/dailymotion.png" style="width: 45px;"></a>
</div>
</div>
<footer class="footer">
\t <p>Here's the footer</p>
</footer>
</body>
</html>
Zusätzlich hier einige weitere Informationen über CSS Tricks: [Sticky Footer, Five Ways] (https: // css -tricks.com/couple-takes-sticky-footer/). – insertusernamehere