Body nach Footer färben?

Ich habe dem Body rot und header und footer gelb. Wenn man aber scrollt (wenn nichts mehr kommt auf dem Handy) dann sieht man das der Footer auf dem Body liegt. Kann ich den Body nach dem Footer auch nochmal einfärben?

4 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

jejsnxx

03.12.2021, 18:46

da kann man nichts gegen machen

EinAlexander

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

03.12.2021, 09:23

Ich habe dem Body rot und header und footer gelb. Wenn man aber scrollt (wenn nichts mehr kommt auf dem Handy) dann sieht man das der Footer auf dem Body liegt.

Eigentlich liegt ein Footer am Ende einer Seite und wird nicht gescrollt. Wie sieht denn Dein Code aus? Hier mal ein Vorschlag:

<style>
body {
  margin:0
  }
header, footer {
    position:fixed;
    width:100%
    }
    
header     {
    top:0;
    background:red;
}
main {
 padding:1em 0
}

footer {
    bottom:0;
    background:yellow
}
</style>
<header>header</header>
<main>content</main>
<footer>footer</footer>

Alex

FrageCoding

Fragesteller

03.12.2021, 11:15

Ich sag doch auf dem Handy... Da kann man ja wegen Touch bei Seiten trotzdem weiter "Scrollen". Also wenn man den Fingerweg nimmt ist alles wieder wie am PC. Einfach mal auf eine beliebigen Seite ausprobiern.

regex9

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, Webseite, CSS

03.12.2021, 08:46

Also liegt die untere Footerkante nicht wirklich auf der unteren Kante der Seite / des Fensters. Positioniere den Footer ans tatsächliche Seitenende (z.B. indem du das body-Element als Flexbox definierst) und stelle sicher, dass es keine Abstände (margin/padding) gibt, die das verhindern.

FaTech

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML

03.12.2021, 08:12

Ja kannst du. Das klingt aber eher nach einem Problem, was man lösen kann, indem man es besser coded. Hast du vielleicht mal deinen Quelltext, wo man reinschauen kann? Und oder auch ein Bild?

FrageCoding

Fragesteller

03.12.2021, 08:26

body{

background-color:red;}

footer{

background:rgb(30, 30, 30) ;

margin-top: 40px;

bottom: 0px;

width: 100%;

color: rgb(99, 99, 99);

position: relative;

}

FaTech

03.12.2021, 08:28

@FrageCoding

Das hilft nicht wirklich. Hast du vielleicht den Code der gesamten Seite? Auch HTML usw. Damit man das Problem nachstellen kann? Und bitte verwende Codeblöcke, anstatt einfach den Code als Text zu posten

FrageCoding

Fragesteller

03.12.2021, 08:32

@FaTech

Ich versteh nicht wofür du den Code brauchst er funktioniert einwandfrei. Ich wollte nur wissen wie man so etwas programmiert. Es ist alles selbst erklärend. Willst du das ich dir jetzt <body></body> schicke ? Das macht wenig Sinn.

FaTech

03.12.2021, 08:41

@FrageCoding

Naja, ganz verständlich ist deine Beschreibung nicht. Weil du sagst einerseits der Footer liegt auf dem Body, andererseits aber auch wieder nicht

Ähnliche Fragen

wie in Bootstrap 5 vertikal zentrieren?

Der Container ist ganz oben was auch immer man probiert


<div class="container mx-auto">
        <div class="row">
            <div class="col-sm-3"></div>
            <div class="col-sm-6">
                <div class="card">
                    <div class="card-header">Header</div>
                    <div class="card-body">Content</div>
                    <div class="card-footer">Footer</div>
                </div>
            </div>
        <div class="col-sm-3"></div>
    </div>

...zur Frage

Gibt es eine Funktion bei Notepad++, wo ich die Kommetare mit einem Mausklick ausschalten kann?

Kommentare sind diese z.B:

<!-- Header-->
<!-- Body -->
<!-- Footer->

Gibt es noch jede Menge aber ich möchte die nicht einzeln löschen sondern mit einer Funktion sofort ausschalten, gibt es sowas?

...zur Frage

Wie kann man in einem HTML Template einen Seitenumbruch erzwingen?

Ich bearbeite zurzeit ein HTML Drucktemplate welches aus header body und footer besteht. Nun habe ich einen Ersetzer im Body eingefügt, welcher einen Datensatz automatisch einspielt. Problem ist nun, dass wenn der Datensatz zu groß ist, die Schrift des bodys über der des footers steht, quasi überschrieben. Ich suche nun nach einer Funktion, die den body, sobald er den footer "berührt", auf die nächste Seite schiebt, allerdings nicht komplett, sondern nur der teil, der den footer "überschreiben" würde. Habe es schon mit der page break funktion versucht, leider erfolglos. Falls dies die richtige Funktion ist, bitte ich um eine genauere Erklärung, falls nicht, bitte sonstige Lösungsvorschläge. :)

Vielen Dank im Vorraus!!

...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 Grid Webseite funktioniert nicht?

Das Layout für die Webseite funktioniert nicht. Ich habe das Problem lange gesucht, aber nicht gefunden. Ich wäre über jegliche Hilfe dankbar.

CSS:

.container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-template-areas:
    h h h h h h
    c c c c c s
    c c c c c s
    c c c c c s
    c c c c c s
    f f f f f s
}

.footer {
  grid-area: f;
}

.header {
  grid-area: h;
}

.content {
  grid-area: c;
}

.side {
  grid-area: s;
}

HTML-Datei:

<!DOCTYPE html>
<html lang="en">
<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">
  <title>Document</title>
  <link href="style.css" rel="stylesheet">
  <nav>
</head>
<body class="container">
  <title>Eigene Webseite von ---</title>
  <header class="header">
    <h1>Hauptseite meiner Webseite</h1>
  </header>
  <main class="content">
    <div id="abstand">
      <h3>Interessen:</h3>
      <ul>
        <li>Technik</li>
        <li>Videospiele</li>
      </ul>
      <u><h3>Ich bin:</h3></u>
      <p>Optimistisch<br>Geduldig<br>Hilfsbereit</p>
      <a id="link" href="https://www.netflix.com/at/">Mein Link</a>
      <div>
        <div id="bild">
          <img src="bild1.jpg" width=300 height=186 alt="Bild über mich">
        </div>
      </div>
      <div id="Motte"></div>
    </div>
  </main>
  <aside class="side">
    <p>News/Einträge</p>
  </aside>
  <div class="daten">
    <footer class=footer>
      <h4>Hier könnte ein Motto stehen</h4>
    </footer>
    <div id="daten">
      <p>---</p>
      <p>--</p>
      <a href="----</a>
    </div>
  </div>
</div>
</nav>
</body>
</html>

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

wie findet ihr mein login feld?

habe ein kleines login feld gemacht und später kommt noch python dazu

code html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</header>

<main>

<h1 class="h1" >login</h1>

<h4> <a href="#">Password vergessen?</a></h4>

</form>

</div>

</main>

</footer>

</body>

</html>

css

body {

float: inline-start;

margin-top: 15%;

}

h1 {

font-family: sans-serif;

color: darkblue;

}

#Anmeldefeld {

display: flex;

align-items: center;

justify-content: center;

box-shadow: 20px 20px 10px gray;

border-style: solid;

}

...zur Frage

CSS in neue Zeile springen?

Hallo,

ich habe ein html Dokument in folgender Form:

<html>
<head>
</head>
<body>
    <div class="Class1">
        <h1 class=user_caption>Caption</h1>
        <section class="name_liste">
            <div class="name blau">
                <h3>hallo</h3>
            </div>
            <div class="name gelb">
                <h3>hallo1</h3>
        
            </div>
            <div class="name grün">
                <h3>hallo2</h3>
                
            </div>
            <div class="name rot">
                <h3>hallo3</h3>
                
            </div>
            <div class="name pink">
                <h3>hallo4</h3>
                
            </div>
            <div class="name weiß">
                <h3>hallo5</h3>
                <div></div>
            </div>
        </section>
</body>
</html>

nur so grob. ich möchte dass blau gelb und grün in einer reihe angezeigt werden und dann darunter rot pink und weiß. Ich habe schon probiert bei grün ein flex-wrap zu machen, aber egal wo ich den wrap versuche, nirgends klappt es. Habe schon überlegt ob es daran liegt, dass die seite faktisch genug platz hat, alle diese container in einer zeile anzuzeigen aber es ist doch irgendwie möglich, diese 6 elemente in 2x3 aufzuteilen.

habe als basis in css zumindest: name_liste { display: inline-flex }

MfG

...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 projekt wie findet ihr die vorarbeit?

html:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<Header>
</Header>
<div class="input">
<main>
<form action="" method="post">
<h2>Anmeldung</h2>
<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>
<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>
<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>
<input type="submit" value="Anmelden">
<input type="reset" value="reset">
</form>
</div>
<hr>
<a href="#">Impressum</a>
<a href="#">kontakt</a>
<a href="#">Über uns</a>
</main>
<footer>
</footer>
</body>
</html>

css

body {
font-family: Arial, Helvetica, sans-serif;
color: white;
}
body{
background-color: black;
}
.input {
display: flex;
margin: 700px;
margin-top: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 1px 1px 3px 3px white;
border-radius: 30px;
height: 300px;
width: 300px;
}
a{
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
}
a:hover{
color: green;
text-decoration-line: none;
}
input{
padding: 5px;
border-radius: 10px;
}
input[type="submit"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}
input[type="reset"] {
font-size: 1.0em; padding: 1px 6px;
font-family: Roboto, sans-serif;
font-weight: 100;
color: teal;
border: 1px solid silver;
background-image: linear-gradient(to top, gainsboro 0%, white 90%);
border-radius: 20px;
}

...zur Frage

DE Sonderzeichen Fehler in HTML?

Hi,

ich sitze momentan an einer Datei, um ein paar Dinge auszuprobieren. Ich habe die Meta-Tags wie gewohnt aus einer anderen (funktionierenden) Datei kopiert.

Nun werden allerdings ausschließlich in meiner Datei die Umlaute wie Ä,Ö,Ü und ß mit

"�"

angezeigt. Auch das rein-kopieren Tags aus anderen Dateien, oder das entfernen des Stylesheets hat nix geändert. Kurzzeitig hatte ich auch den Meta-Tag:

mit reingenommen, allerdings ohne Erfolg oder Veränderungen. Auch das Debugging von W3C hat nix auffälliges gefunden:

Für alle helfenden Hände großes Danke!

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="example, html, head, meta">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
    <link rel="stylesheet" type="text/css" href="formate.css">
    <title>Das Box-Modell</title>
  </head>


<body>
  <header>
      
    <div class="flex">
     <img src="bilder/logo.svg" alt="logo">
    </div>
    
     <h1>Wilkommen auf der Test-Seite!</h1>
     <nav>
              <a href="#link_1.html">Blog</a>
              <a href="#link_1.html">Unterseite 1</a>
              <a href="#link_1.html">Unterseite 2</a>
              <a href="#link_1.html">Kontakt</a>
     </nav>
          
    </header>
      
      <main>
          
          <h2>ÜÜÜCCS-basierte Layouts <br><br />HTML-Struktur ohne CSS</h2>         
          
      </main>
    
    
    
    <footer>
     <a href="kontakt.html">Kontakt</a>
     <p>&copy; 2024 by GTA1A</p>
    </footer>


</body>
</html>

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

If-Schleife bei Excel?

Hallo,

ich würde gerne in Excel eine If-Schleife programmieren. Und Zwar soll das so funktionieren, dass wenn ein Wert in einer bestimmten Zelle unter/über einem anderen bestimmten Wert (bspw. 5) liegt soll sich die Zelle rot / gelb färben. Und wenn der Wert über 10 liegt soll es sich grün färben.
Also nochmal zusammengefasst soll es so sein:

kleiner 5 entspricht rot

zwischen 5 und 10 entspricht gelb

über 10 entspricht grün

Ich freue mich auf Antworten.
LG David

...zur Frage

Excel-Formel WENN DANN Zelle färben

Hallo,

ich versuche eine Formel in einer Excel-Tabelle einzubauen, die eine entsprechende Zelle farbig darstellt.

Bezogen auf eine Zelle mit einer Datumsangabe.

Gedankengang war bis jetzt:

WENN Datum in J1 kleiner als HEUTE DANN Zelle grün einfärben,

WENN Datum in J1 gleich HEUTE DANN Zelle gelb einfärben und