Footer ganz unten, wie?

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

Bild zum Beitrag

Hier die Skripte:

Bild zum Beitrag

1 Antwort

Vom Fragesteller als hilfreich ausgezeichnet

medmonk

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Technik, IT, Webentwicklung

04.03.2023, 03:03

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

Wenn der Footer nicht permanent im Viewport sichtbar sein soll, würde ich von einer absoluten/fixen Positionierung absehen. Das gilt jedoch allgemein für die meisten Elemente, die sich auf einer Website befinden. Statt solchen Positionierungen würde ich eher schauen, dass sich deren Position bereits durch die Strukturierung ergibt.

Ebenso würde ich die langen Selektor-Ketten durch Klassen ersetzen. Sprich nicht nur dem Footer selbst, sondern auch für die darin liegenden Komponenten eine Klasse angelegt wird. So kannst du beispielsweise die Liste der Navigation direkt ansprechen, anstatt vorher erst den Footer selektieren zu müssen.

LG medmonk

Woher ich das weiß:Berufserfahrung – UI/UX Designer, Full-Stack Developer

Ähnliche Fragen

Grid mit Tailwind CSS und 1fr?

Seit längerem beschäftige ich mich mal wieder mit Tailwind CSS und stoße gleich am Anfang auf ein eigentlich simples Problem, für was ich aber keine einfach Lösung finde.

Ich versuche ein einfaches Layout zu erstellen, welches als Grundgerüst ein Grid hat, bei dem der Header und Footer eine explizite Höhe haben und der Main-Bereich flexibel ist. Das Layout sollte auch bei wenig Inhalt immer 100vh haben, so dass der Footer immer unten ist.

Mit reinem CSS wäre das einfach so lösbar:

CSS

.grid {
 min-height: 100vh;
 display: grid;
 grid-template-columns: 1fr; 
 grid-template-rows: 5rem 1fr 7rem;
}

HTML

<div class="grid">
 <header>Header</header>
 <main>Main</main>
 <footer>Footer</footer>
</div>

Mit TailwindCSS bekomme ich das irgendwie nicht hin – zumindest nicht ohne Custom-CSS. Ich kann mir aber kaum vorstellen, dass sich dies nicht auch mit dem vorhandenen Set realisieren lässt.

Hat hier jemand eine Idee, wie ich das mit TailwindCSS am einfachsten umsetze?

...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

Balken entfernen Wordpress?

Wie kann ich folgenden Balken kurz über dem Footer entfernen (siehe roter Pfeil)?

Dieser taucht auf allen Seiten auf.

...zur Frage

CSS Text Mittig ausrichten trotz max-width?

Hi,

also ich habe ein Text erstellt, und habe diesem gesagt "text-align: center", und eine max-width: 20%;

Aber ernimmt zwar jetzt die 20% max-width, aber zentriert den Text nicht mehr Links?

warum?

...zur Frage

CSS height and max gleichzeitig?

Hallo,

Ich habe einem Div-Element gesagt, dass es eine Breite von 40% und eine Höhe von 100% haben soll, aber der nutzt jetzt irgendwie nur die Breite, und nicht die höhe. Woran kann das liegen?

...zur Frage

Was kommt nach HTML > CSS >?

1.Html

2.Css

Wie sollte man weiter machen?

...zur Frage

Elementor wie bekomm ich das weg?

Hallo, ich will mit Elementor Free eine Website bauen und hab ein Template heruntergeladen. Der Teil mit All Access Membership gehört weder zur Startseite, noch zum footer. Wie bekomm ich das weg?

...zur Frage

Footer Menü in Wordpress erstellen mit Generate Press?

Hallo zusammen,

ich versuche mir als absoluter Anfänger eine kleine Wordpress Seite zu basteln und schaffe es einfach nicht, ein Footer Menü für Datenschutz und Impressum einzufügen. Die benötigten Seiten habe ich bereits erstellt.

Ich verwende Generate Press und unter Designs -> Menüs -> Position verwalten steht "Dein Theme unterstützt ein Menü". Heißt das, dass ich unten im Footer kein zweites Menü erstellen kann?

Ich habe mir auch schon YouTube Videos angesehen, in denen das Footer Menü über Designs -> Widgets angepasst wird, aber in den Videos sieht das immer ganz anders aus als bei mir. Über den Customizer bekomme ich es auch nicht hin...

Ich wäre sehr dankbar für Tipps!

...zur Frage

im CSS ein sticky Element auf Bildschirmhöhe?

Ich arbeite gerade an einer Website, wobei ich mit einem CSS-Grid die Bereiche header, nav, footer und main definierte. Mein nav ist dabei auf der rechten Seite des Bildschirms und nimmt 15% der Breite ein. Es sollte sticky sein, da es nur aus 4 Bildern besteht, welche immer zu sehen sein sollten. Dies habe ich schon so. Nun ist das Problem, dass wenn ich scrolle, die Bilder nach oben scrollen, anstatt dort zu bleiben. (Das nav ist so zu sagen zu lang und danach kommt einfach nur noch die Hintergrundfarbe des nav). Wie kann ich machen, dass es eigentlich 100% der Höhe des Bildschirms einnimmt und dann so bleibt?

Seite beim Öffnen

Seite beim bisschen runter scrollen (so sollte es schlussendlich beim weiterscrollen auch sein)

Seite beim noch weiterscrollen

...zur Frage

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zur Frage

Unterschied <DIV> und <Selection>, <Header>, <Fooder>?

Sind das alles Container? Was ändert sich dabei jeweils? Ist es egal, welches man nimmt und es geht nur um die Lesbarkeit im Code?

...zur Frage

Lohnt sich heutzutage noch eine Ausbildung zum Webentwickler?

Wird es nicht durch ChatGPT ersetzt?

...zur Frage

Text unter Bild in HTML hinzufügen?

Ich habe ein Bild. Darunter habe ich ein Text platziert. Allerdings geht der Horizontal von links nach rechts, was es auch soll. Nur soll er da anfangen, wo auch das Bild beginnt und enden, wo das Bild endet. In den zwei Bildern könnt ihr erkennen, wie es es gerade habe und nicht will und wie ich es gerne haben würde.

<!DOCTYPE html>
<html>
<head>
    <title>Film- und Serienbeschreibungen</title>
  


  <style>
    img {
        display: block;
        margin: 0 auto;
        width: 1000px;
        border-radius: 10px;
    }


    body {
        text-align: center;
    }


    p {
        
    }
  </style>
</head>
  <body>
    <img src="mrrobotscene.jpg">
    <h1>Mr. Robot - Beschreibung</h1>
    <p>Mr. Robot ist eine US-amerikanische Fernsehserie, die von Sam Esmail entwickelt wurde. Die Serie handelt von Elliot Alderson, einem jungen Programmierer, der für eine Cyber-Sicherheitsfirma arbeitet und in seiner Freizeit zum Hacker wird. Elliot leidet unter sozialen Ängsten und Depressionen und verfällt in eine Art Schizophrenie, die von seinem imaginären Freund, Mr. Robot, ausgelöst wird</p>
    
  </body>
</html>

...zur Frage

Bilder auf der HTML/ CSS Seite nur zur hälfte sichtbar?

Hey,

die Bilder im slider unten auf der Webseite sind leider nur zur hälfte zu sehen. Weiß jemand woran das liegt ? danke

https://jsfiddle.net/vk9wqys0/1/

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen