footer in HTML unten, aber ohne fixed?

Hallo Community, ich versuche grade, einen Footer hinzubekommen, der nicht position:fixed ist, den man also nur sieht, wenn man ganz nach unten scrollt. Aber der footer soll sich ganz unten am Seitenende befinden (weshalb ich dies nicht mit margin machen möchte/würde). Weiß jemand, wie dies möglich ist?

Danke und MfG

Croghs

3 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

perhp

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

02.01.2016, 13:59

Das ist doch ganz einfach. Lösche einfach das position fixed weg, dann verhält es isch wie ein normales Element auf der Seite, andernfalls kannst du auch position relative machen. Wenn ich mir die Seite 'stuport.de' anschaue, dann sehe ich das derjenige, der diese Seite gemacht hat, sich nicht wirklich mit CSS auskennt, da der Footer ja nur ein normales Element auf der Seite ist und das position fixed total überflüssig ist.

Croghs

Fragesteller

02.01.2016, 14:01

Dann nimm doch mal im Inspektor position:fixed weg, und schon ist es nicht mehr am unteren Rand (?)

perhp

02.01.2016, 14:05

@Croghs

Dann geht es natürlich unter diesen Boxen. Du kannst dann entweder einen Platzhalter reinmachen, das Problem mit Margin lösen oder den Body auf 100% aufspannen und die Box positon absolute machen.

Ich korrigiere nochmal die Antwort oberhalb, in diesem Fall wäre es wohl das beste mit position fixed zu arbeiten, allerdings wenn der Content-Bereich mehr Inhalt hat, als diese Seite, müsste man eine andere Methode wählen.

Croghs

Fragesteller

02.01.2016, 14:11

@perhp

Also mit Margins wollte ich das eigentlich nicht machen, da dies dann wieder Probleme mit den Handys verursacht... Und das body auf 100% aufspannen und den footer absolute zu machen, hilft auch nicht, dann kann ich auch gleich position:fixed nehmen. Mein Problem ist, dass ich es gerne so haben würde, dass wenn man die Höhe des Fensters ändert, sich die footer-leiste nicht über die Tabelle in der Mitte legt...

perhp

02.01.2016, 14:19

@Croghs

Du kannst ja zu Beginn position Fixed machen und sobald man eine gewisse Fenstergröße erreicht, änderst du das Element auf position relative

Croghs

Fragesteller

02.01.2016, 14:26

@perhp

Okay dankeschön für deine Zeit und Hinweise ;)

Steffile

02.01.2016, 13:51

Nicht so komplizert denken :) Wenn der footer nicht position absolute oder fixed ist, dann befindet er sich natuerlichweise unten nach dem content. Wenn du keinen space nach dem footer haben willst, musst du margin und padding bottom des containers, in dem der footer liegt, auf 0 stellen

Croghs

Fragesteller

02.01.2016, 13:55

Hab ich eigentlich schon, klappt aber nicht... Guck mal auf stuport.de vorbei, da ist es noch mit position:fixed (also wie ich es nicht mehr haben will, aber so ist es dann eben unten)

Steffile

02.01.2016, 18:34

@Croghs

Ach, kenne ich das nicht? ;-)

Okay, ich sehe, dass du den Footer auf der niedrigen Startseite unten angeklebt brauchst, weil der Content zu kurz ist. Auf den inneren Seiten wird vermutlich mehr Inhalt sein, sodass du den Footer nicht ankleben brauchst.

Du koenntest quick & dirty dem body der startseite eine ID geben, z.B. home, und den Footer nur fuer diese Seite fixed machen. Also

#body .footer {position fixed; bottom:0; left: 0}

Oder einen echten sticky footer machen, der an alle Seiten anpasst, Anleitung hier:

http://codepen.io/chriscoyier/pen/uwJjr

Kompaktdesign

Nutzer, der sehr aktiv auf gutefrage ist

im Thema CSS

03.01.2016, 10:49

Wenn der Footer erst durch Scrollen sichtbar sein soll, sollte sich das eigentlich so ganz einfach umsetzen lassen:

HTML:

<div class="seite">... Inhalt der Seite ...</div>

<footer>... Inhalt vom Footer ...</footer>

CSS:

HTML {height:100%;}

.seite {min-height:100%; display:block;}

Hallo,

ich habe eine Frage: Auf meiner Webseite habe ich einen Footer, der, wenn der Bildschirm nicht so hoch ist wie die Seite selber ganz unten angezeigt wird, ich also scrollen muss, um ihn zu sehen. Wenn ich die Seite aber auf einem Monitor, der höher ist als die Seite, anschaue, dann wird der Footer "mitten auf dem Bildschirm" angezeigt.

Kennt jemand einen Link oder so, wo ich eine [elegante] Lösung mit CSS dafür finden kann?

Danke!

...zur Frage

Wie bleibt der Footer immer ganz unten der Seite (CSS,HTML)?

Hllo, ich möchte den Footer immer ganz unten der Seite haben. Allerdings ist ern nicht ganz unten wenn ich z.B. nur 1. Satz geschrieben habe... hier klappts nicht Beispiel: http://tom.musicintime.de/ hier klappts Beispiel: [Impressum]

Ich habe das mit footer { position: relative; width: 100%; } ausprobiert allerdings mit diesem Ergebniss

Wie kann ich Den Footer IMMER am Seitenende haben egal wie viel Inhalt ich habe?

...zur Frage

Bild im footer?

Guten Tag

Ich habe ein Problem mit einem Bild im footer (statt wie beim letzten Mal in der Navbar).

Mein HTML Footer:

<h3>Matthias<span>Heiniger</span></h3>

<a href="#">Bewerbung</a>

<a href="#">Projekte</a>

<a href="#">Workbooks</a>

<a href="#">Kontakt</a>

</p>

</div>

</footer>

Mein CSS Code für das Bild zum einfügen:

footer {

background-image: url(/03_HTMLCSS/01_Website/Bilder/VektorDesignElemente/png/UntenLnks2_1.png);

background-repeat: no-repeat;

background-size: 19%;

position: relative;

z-index: 1;

font-size: 25px;

padding: 0;

}

Momentan wird das Bild so angezeigt:

Mein Problem: Das Bild (Das Blaue Bild) möchte ich unten Links platzieren aber es geht nicht bis an den "Boden"

Vielen Dank für die Antworten

Freundliche Grüsse

...zur Frage

Wie kann ich ein Bild (position:fixed) erst ab einer bestimmten Stelle einblenden?

Hi,
ich habe ein normales Bild in meinen HTML Code eingebunden. Vor und hinter dem Bild habe ich jeweils eine section mit Text drin. Das Bild ist in CSS auf position:fixed; gesetzt, damit es immer zu sehen ist. Das Problem ist jetzt, dass das Bild nicht wirklich immer zu sehen sein soll. Es soll erst eingeblendet werden, wenn man von der ersten section auf die zweite scrollt (unter der zweiten section sollen noch weitere folgen, da soll das Bild auch immer zu sehen sein).
Ich habe versucht, der ersten section einen höheren z-index zu geben als dem Bild, damit sie an der Stelle über dem Bild liegt, aber das Bild ist trotzdem zu sehen. Hat jemand eine andere Idee? Gibt es eine CSS Lösung? Oder JQuery?

...zur Frage

Wie bearbeite ich die Breite eines HTML hr-Elements?

Ich möchte eine margin bei meinem hr benutzen, damit es kürzer ist, aber wenn ich nur margin benutze, dann wird das margin auch für oben und unten benutzt, ich möchte das <hr> aber nur kürzer machen. Wie geht das?

...zur Frage

HTML Button bleibt an der gleichen Stelle bei Hover?

Hallo, ich würde gerne meine Website so machen, dass wenn man über einen Button hovert, dieser größer wird. Das klappt auch. Das Ding ist, der Footer verschiebt sich auch ( ist ja klar, weil ich ihm nen Margin top gegben habe. Wie mache ich es, dass der Footer sich nicht mit bewegt, sondern nur die Buttons ?

Danke im Voraus

...zur Frage

Footer ganz unten, wie?

Hey! Ich möchte meinen footer ganz unten haben und in oller breite! Wie mache ich das?

Hier die Skripte:

...zur Frage

Wie kann ich ein Foto in einer CSS oben links in die Ecke machen?

Moin, ich möchte ein Bild in meiner CSS oben links in die Ecke machen, damit das auf jeder Seite so ist.

Der Code für meine HTML:

<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<footer></footer>
<script language="javascript" type="text/javascript" src="Footer.js"></script>
</body>
</html>

Der Code für CSS:

html {
  height: 100%;
}
body {
 background-image: url("Bilder/getraenkeguenther.jpg");
 background-repeat: no-repeat;
 background-position: left top;
 min-height: 100%;
 margin: auto;
 display: flex;
 flex-direction: column;
}
footer {
  margin-top: auto;
  height: 200px;
  text-align: center;
background-color: deepskyblue;
}

Der Code der JS:

var footer = `
<a>Impressum</a>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;

Das backgroundimage soll quasi als einzelnes Bild oben links in die Ecke

...zur Frage

HTML CSS Website Footer wird im Container angezeigt, obwohl er nicht drin ist?

Hallo,

Ich "programmiere" gerade ein wenig mit HTML und CSS und baue eine Website mit einem Head, einer Main und einem Footer. Mein Problem ist, dass alle Elemente der Website nach der Main (bei mir heißt sie "Container") trotzdem noch innerhalb des Containers angezeigt werden. Somit ist bei mir der Footer im Container Main, obwohl der Container vorher schon geschlossen wurde.

-------------------------------------------------------------------------------------

HTML CODE:

<!DOCTYPE html>
<html>
 <head>
  <title>Aufgabe 1</title>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
 <body>
  <header>
   <header1 class="item1">
    <h2>FeWos</h2>
   </header1>
  </header>
  <div" class="container">
   <div class="b1">
    <div>
     <h1>Item 1</h1>
    </div>
    <div class="bild1">
     <img src="pingu.png" width="50%" height="50%">
    </div>
   </div>
   <div class="b1"><br>Box 2</div>
   <div class="b1"><br>Box 3</div>
   <div class="b1"><br>Box 4</div>
   <div class="b1"><br>Box 5</div>
   <div class="b1"><br>Box 6</div>
  </div>
  <footer>
   <p>Hallo</p>
  </footer>
 </body>
</html>

----------------------------------------------------------------------------------------------------

CSS CODE:

body {
  margin: 0;
}
header {
  height: 120px;
  background-color: rgb(43, 43, 43);
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.container {
  border: 3px solid;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 90px;
  padding: 90px;
}
.b1 {
  display: flex;
  background-color: rgb(93, 161, 224);
  width: 30%;
  height: 500px;
  flex-grow: 1;
  transition: transform 0.2s ease-out;
  border-radius: 20px;
}
.b1:hover {
  transform: scale(1.05);
}
.bild1 {
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-right: 20px;
  width: auto;
  height: auto;
}
footer {
  background-color: rgb(43, 43, 43);
  width: 100%;
  height: 120px;
  padding: 0px;
}

----------------------------------------------------------------------------

Wie man sehen kann wird der "container" mit </div> abgeschlossen, aber der Footer ist trotzdem im Container. Hoffe mir kann jemand bei dem Problem helfen.

Auf dem Bild kann man das auch ganz gut sehen. Das anthrazit farbige soll der Footer sein und dieser liegt innerhalb des Containers, welcher zur Sichtbarkeit eine Umrandung hat.
Würde mich echt freuen, wenn mir jemand weiterhelfen kann. Hab auch Chat GBT schon gefragt, aber Chat GPT sagt, dass der Code ganz normal ist und, dass der Footer nicht im Container ist.

...zur Frage

CSS margin verschiebt falsches element?

Hallo!

Obwohl ich schon seit einigen Jahren recht sicher in Programmiersprachen wie Java und C# bin, hab ich mich jetzt an ein Webprojekt gewagt. Ich benutze React, doch brauche natürlich auch CSS.

Jetzt habe ich folgendes Problem. Ich will hier den Titel einfach um 1em nach unten verschieben. Wie schaffe ich das? Ich habe es einfach mit

margin-top: 1em;

versucht, aber dadurch wird aus irgendeinem Grund das ganze

<div className='home'>

nach unten verschoben. Wieso?

Unten findet ihr Bilder, zum einen wie es ohne margin aussieht, dann wie es mit margin aussieht. Hier findet ihr den Code:

HTML:

<div className='home'>
    <h1>Willkommen!</h1>

</div>

CSS:

.home{
    background: #375398;
    height: 100vh;
    width: auto;
    margin-left: 250px;
}

h1{
    font-size: 3rem;
    color: white;
    margin-left: 1em;
    /*margin-top: 1em*/
    }

...zur Frage

Footer Hintergrundfarbe ändert sich nicht?

Hallo,

ich habe hier ein ganz einfachen Footer mit HTML und CSS. Das Problem ist, dass sich die Hintergrundfarbe des Footers einfach nicht ändert und ich keine Ahnung hab, woran das liegt. Habe schon alles versucht, was mir so bekannt ist.

Ich zweifle gerade ziemlich an mir selbst.

HTML:

<footer>   
        <section class="section_footer">
        <div class="social">
            <a href="https://facebook.com" target=”_blank”><i class="fab fa-facebook"></i></a>
            <a href="https://instagram.com" target=”_blank”><i class="fab fa-instagram"></i></a>
        </div>
        <ul class="list">
            <li><a href="Impressum.html">Impressum</a></li>
            <li><a href="datenschutz.html">Datenschutz</a></li>
            <li><a href="kontakt.php">Kontakt</a></li>
            <li><a href="credits.html">Credits</a></li>
        </ul>
        <p class="footer_text">
            Lorem Ipsum
        </p>
        <p> <a href="#top"><i class="fas fa-arrow-up"></i></a></p>
    </section>
    </footer>

CSS:

footer {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik', sans-serif;
    font-weight: 400;
    background-color: whitesmoke;
}
.section_footer {
    padding: 40px 0px;
}
.social {
    text-align: center;
    padding-bottom: 25px;
    color:gray;
    display: flex;
    justify-content: space-between;
    padding: 0 850px;
    font-size: 50px;
}
.social a {
    font-size: 25px;
    color: inherit;
    width: 40px;
    height: 40px;
    line-height: 48px;
    display: inline-block;
    text-align: center;
    margin: 0 8px;
    opacity: 0.75;
}
.social a:hover {
    opacity: 0.9;
}
footer ul {
    margin-top: 0;
    padding: 0;
    list-style: none;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: center;
}
footer ul li a {
    color: inherit;
    text-decoration: none;
    opacity: 0.8;
}
footer ul li {
    display: inline-block;
    padding: 0 15px;
}
footer ul li a:hover {
    opacity: 1;
}
footer section p {
    margin-top: 15px;
    text-align: center;
    font-size: 30px;
    color: #aaa;
}
footer  a i {
    display: flex;
    justify-content: center;
    align-items: center;
}

Danke im Vorraus!

...zur Frage

Footer Zeilenumbruch?

Wieso kann ich da keine Zeilenumbrüche reintun? Ich glaube das liegt im footer{} aber ich habe keine Ahnung was dort das blockiert. Kann mir jemand helfen? Code:

<html>

<head>

<style>

body{

width: 100%;

height: 100vh;

}

margin: 0;

padding: 0;

font-family: 'Comfortaa';

}

footer{

padding: 3px;

background-color: lightgray;

color: white;

display: flex;

margin-bottom: 0vh;

position: relative;

padding: 30px;

}

footer a, p{

color: black;

text-decoration: none;

}

</style>

</head>

<body>

<h1>Willkommen beim Geissli-Shop!</h1>

<p>Website by

<a href="#">Elifox</a><br></p>

<p>2023

<a href="#">Geissli Gang</a><br></p>

<p>

<a href="Datenschutzerklaerung.html">Datenschutzerklaerung</a><br></p>

<a href="Nutzungsbedienungen.html">Nutzungsbedienungen</a>

</footer>

</body>

</html>

Danke schon im vorraus!

...zur Frage

Eine Div immer im Vordergrund, wie?

Ich habe zwei Divs. Eine oben in fixed Position und eine darunter in absolute. Wenn ich nach unten Scrolle überdeckt die untere Div die obere. Wie bekomme ich die obere Div, die in fixed Postion steht immer ganz nach vorne?

[Bereich HTML/CSS]

...zur Frage

Button welcher beim Scrollen auf Webseite an gleicher Position unten rechts bleibt HTML?

Hallo,

ich habe eine Frage, wie muss ich das in CSS machen, das ein Button, welcher ein Bild ist, immer unten rechts in der Ecke angezeigt wird? Der Knopf ist eine <img>.

Muss ich in CSS img {position:fixed;} eingeben damit er beim scrollen immer da bleibt? Und muss wie soll ich den Code machen, damit er leicht durchsichtig unten rechts ist?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen