CSS Footer unten zentrieren

tobi.wld · 26. März 2021

Hallo zusammen, ich habe ein Problem. Und zwar möchte ich meine Navbar am unteren Rand zentrieren.
Nun habe ich allerdings das Problem dass wenn ich in meiner css-Datei "margin: "0px, auto" eingebe muss ich die Position relativ setzen anstatt diese absolut zu positionieren. Nun wird sie zwar zentriert aber nicht unten gefixt angezeigt.

Hat jemand ne Idee wie ich das Problem lösen kann auch dass wenn ich Scrolle dass der Footer immer noch am Ende gefixt ist?

vorher: (position: "absolute")

nachher (position: "relative"):

css-File:

CSS:

/*Footer*/
.footer {
    position: absolute;
    bottom: 0px;
    overflow: hidden;
    width: 415px;
    margin: 0px auto;
}
 
.footer a {
    float: left;
    color: rgb(255, 255, 255);
    padding: 10px 25px;
    text-decoration: none;
}

.footer a:hover {
    color: rgb(0, 0, 0);
    font-weight: bold;
    text-decoration: underline;
}

Lawnmower · 26. März 2021

position:fixed würds immer unten kleben bleiben - wäre das evtl eine Lösung für Dich? Ansonsten müsste das Mutter Element position:relative haben und eine 100% Min-Höhe (was es jetzt vermutlich nicht hat).
width auf 100%, left auf 0px und text-align:center (alle für .footer anwenden) und für die Links (.footer a) dann display:inline oder inline-block und der bisherige float:left entfernen, dann bleiben die in der Mitte.

netzgestaltung · 26. März 2021

Dazu gibt es verschiedenste Möglichkeiten, ich denke aber für dich wird der einfachste weg sein es wieder absolut zu positionieren und zusätzlich 100% breite anzugeben:

Code:

.footer{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
}

Nipsey · 26. März 2021

"Position: relativ" bleibt immer im Fluss, deswegen rutscht der Footer nach oben (in den Fluss). Dir fehlen gewisse Grundlagen

owned139 · 26. März 2021

CSS:

.footer {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

tobi.wld · 26. März 2021

Lawnmower schrieb:
position:fixed würds immer unten kleben bleiben

klebt zwar unten aber ist leider immer noch links

netzgestaltung schrieb:
Dazu gibt es verschiedenste Möglichkeiten, ich denke aber für dich wird der einfachste weg sein es wieder absolut zu positionieren und zusätzlich 100% breite anzugeben:

Code:

.footer{ position:absolute; left:0; bottom:0; width:100%; }

Hat leider nicht geklappt, hängt immer noch links

Nipsey schrieb:
"Position: relativ" bleibt immer im Fluss, deswegen rutscht der Footer nach oben

alles klar, danke für die Info ^^

owned139 schrieb:
CSS:

.footer { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); }

Ist zwar jetzt zentriert, aber der Hintergrund schaut jetzt irgendwie komisch aus, da wir es ja transformiert haben:

Nipsey · 26. März 2021

Poste doch mal den ganzen HTML Code, entweder hier oder am besten auf jsfiddle.

tobi.wld · 26. März 2021

Nipsey schrieb:
Poste doch mal den ganzen HTML Code, entweder hier oder am besten auf jsfiddle.

Alles klar, Moment

Ergänzung (26. März 2021)

https://jsfiddle.net/tobiwldfoto/hqavejf6/
https://jsfiddle.net/tobiwldfoto/hqavejf6/#&togetherjs=0olhizUplk

Ergänzung (26. März 2021)

HTML Code:

HTML:

<!DOCTYPE html>
<html lang="de" id="index">

<head id="head">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./css/index.css" rel="stylesheet">
    <link href="./pictures/favicon.ico" rel="shortcut icon">
    <title>Home - tobiwldfoto</title>
</head>

<body id="body">
    <div id="navbar">
        <a href="#">Home</a>
        <a href="./html/gallery.html">Galerie</a>
        <a href="./html/equipment.html">Equipment</a>
        <a href="https://tobiwldfoto.blogspot.com/" target="_blank">Blog</a>
        <a href="./html/contact.html">Kontakt</a>
    </div>
    
    <div id="header">
        <p id="heading">Herzlich Willkommen!</p>
        <p id="subheading">auf meiner Website</p>
    </div>

    <div class="footer">
        <a href="https://www.instagram.com/tobi.wld.foto" target="_blank"><img src="./pictures/instagram.ico" height="15px"/></a>
        <a href="./html/impressum.html" target="_blank">Impressum</a>
        <a href="./html/datenschutz.html" target="_blank">Datenschutz</a>
        <a href="https://www.twitter.com/tobi_wld_foto" target="_blank"><img src="./pictures/twitter.ico" height="15px"/></a>
    </div>
</body>

<footer>

</footer>

</html>

CSS:

/*Ganze Seite*/
* {
    background-image: url(../pictures/background.webp);
    background-size: cover;
    background-attachment: fixed;
}

/*Body*/
#body {
    font-family: 'Quicksand', 'Courier New';
    margin: 1px;
    padding: 1px;
}

/*Navigation Bar*/
#navbar {
    overflow: hidden;
    width: 540px;
    margin: 0px auto;
}
 
#navbar a {
    float: left;
    color: rgb(0, 0, 0);
    padding: 10px 25px;
    text-decoration: none;
}

#navbar a:hover {
    color: rgb(255, 255, 255);
    font-weight: bold;
    text-decoration: underline;
}

/*Überschrift*/
#heading {
    text-align: center;
    font-size: 40px;
    color: rgb(22, 65, 125);
    font-weight: bold;
}

/*Unterüberschrift*/
#subheading {
    text-align: center;
    font-size: 23px;
    color: rgb(0, 0, 0);
}

/*Footer*/
.footer {
    position: fixed;
    bottom: 0px;
    overflow: hidden;
    width: 415px;
    margin: 0px auto;
}
 
.footer a {
    float: left;
    color: rgb(255, 255, 255);
    padding: 10px 25px;
    text-decoration: none;
}

.footer a:hover {
    color: rgb(0, 0, 0);
    font-weight: bold;
    text-decoration: underline;
}

Nipsey · 26. März 2021

So funktioniert das aber, und sorry das ich das sagen muss, die Seite ist von der Struktur eine Katastrophe.
Feste Pixelangaben, nicht responsive, keine umschließenden Container usw. Schau dir evtl. mal ein paar Frameworks an. Muss ja nicht gleich Boostrap sein. Gibt viele schlanke die diese ganze Struktur mitbringen

CSS:

/*Footer*/
.footer {
    position: fixed;
    bottom: 0px;
    overflow: hidden;
    width: 100%;
    margin: 0px auto;
    text-align:center;
}

.footer a {
    color: rgb(255, 255, 255);
    padding: 10px 25px;
    text-decoration: none;
}

tobi.wld · 26. März 2021

Nipsey schrieb:

CSS:

/*Footer*/
.footer {
    position: fixed;
    bottom: 0px;
    overflow: hidden;
    width: 100%;
    margin: 0px auto;
    text-align:center;
}

.footer a {
    color: rgb(255, 255, 255);
    padding: 10px 25px;
    text-decoration: none;
}

Perfekt, hat geklappt.

Habe nur noch die Höhe auf 20px festgelegt jetzt ist es perfekt!

Nipsey · 26. März 2021

Nur so als Anregung

Diese Frameworks nehmen dir eine Menge Arbeit ab was die Struktur und das Responsive Design angeht.

Suche

CSS Footer unten zentrieren

tobi.wld

Lt. Junior Grade

Lawnmower

Maître de cuisine

netzgestaltung

Captain

Nipsey

Banned

owned139

Gast

tobi.wld

Lt. Junior Grade

Nipsey

Banned

tobi.wld

Lt. Junior Grade

Nipsey

Banned

tobi.wld

Lt. Junior Grade

Nipsey

Banned

Ähnliche Themen