Kann ich einen Footer in einer CSS-Datei erstellen?
Moin,
Ich muss für mein Informatik-Projekt eine HTML-Seite erstellen und möchte eine Art Impressum im Footer erstellen, diesen aber nicht für jede Seite neu erstellen, kennt da jemand einen Weg?
Danke im vorraus
3 Antworten
CSS ist nur für die Gestaltung zuständig, nicht für den Inhalt.
Wenn Du mit statischen Seite arbeitest, musst Du den Text entsprechend vervielfältigen.
Am einfachsten ist das vermutlich mit JavaScript. Das kannst du auch einfacher nutzen als PHP welches SonOfMyMum vorgeschalgen hat.
Dafür schreibst du einfach in deinem html code, dort wo der Footer hin soll ein leeres Footer element, also so:
<footer></footer>
Zusätzlich erstellst du noch ein footer.js Datei auf deiner Webseite, welche du im am Ende des body Element des HTMLs verknüpfst:
<script language="javascript" type="text/javascript" src="footer.js"></script>
In die footer.js Datei kannst du dann folgender Code hineinkopieren und ergänzen:
var footer = `
<a>Impressum</a>
<span>© BibbleBob</span>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;
Innerhalb von der Variable footer kannst du dein Code definieren, welcher dann innerhalb vom footer element des HTML erscheint.
In deiner HTML Datei kopierst du einfach den Code mit dem script:
<script language="javascript" type="text/javascript" src="footer.js"></script>
- auf die drittunterste Zeile und gleich drüber kannst du den footer einfügen, dass sieht dann etwa so aus:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Document</title>
</head>
<body>
<p>Deine Webseite</p>
<footer></footer>
<script language="javascript" type="text/javascript" src="footer.js"></script>
</body>
</html>
Dann erstellst du, dort wo du die .html Datei abgespeichert hast, eine Datei, welche du anstatt mit .html mit .js benennst. Also in diesem Beispiel mit "footer.js" und kopierst den Code JavaScript dort hinein.
Auf den ersten Zeile in der JavaScript Datei wird die Variable footer definiert, also dass, was schlussendlich im footer stehen soll. Als wenn der Footer so aussehen soll:
<footer>
<a>Impressum</a>
<span>© BibbleBob</span>
</footer>
Kopierst du den ganzen HTML Code, welcher innerhalb des footer elementes ist. Das kannst du dann einfach anstelle des Bespiel Codes einsetzen. Achte aber darauf, dass das Gravis Zeichen (schräges Gänsefüsschen) am Anfang und am Ende stehen bleibt:
var footer = `
<a>Impressum</a>
<span>© BibbleBob</span>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;
Die letzte Zeile ist dann noch der Code, um die Variable footer im footer element des HTML einzufügen. Diese musst du nicht verändern.
Bei mir sieht die html jetzt so aus :
<!doctype html>
<html>
<head>
<center><p>BibbleBob</p>
<title>Informatik</title>
<link href="C:\Users\games\Desktop\Info HTML\Kurz.css" rel="stylesheet">
</head>
<body>
<footer></footer>
<script language="javascript" type="javascript" src="C:\Users\games\Desktop\Info HTML\Footer.js"></script>
</body>
</html>
die js so:
var footer = `
<a>Impressum</a>
<span>© BibbleBob</span>
`;
document.getElementsByTagName("footer")[0].file:///C:/Users/games/Desktop/Info%20HTML/Kurz.html = footer;
und die css so:
background-image: url("C:\Users\games\Desktop\Info HTML\Bilder\getraenkeguenther.jpg");
background-repeat: no-repeat;
background-position: left top;
Das Bild aus der CSS wird nicht angezeigt, verstehe nicht warum, aber das wird schon noch. In die letzte Zeile packe ich dann den Link von der html für den footer, richtig? Vielen Dank :)
Nicht ganz. Im JS musst du den Pfad nicht einfügen als das .innerHTML bleibt gleich wie im Beispiel. Der rest sieht gut aus.
Beim Bild musst du vermutlich nur die \ durch /, sodass es funktioniert. Beim <script> im HTML dann wahrscheinlich auch.
Ok, also das JS kann ich einfach so kopieren und muss da nix verändern, wenn ich das richtig verstanden habe. Beim <script> erkennt der das eigentlich und beim Bild ist der Pfad kopiert, deswegen verstehe ich nicht, warum das nicht geht, aber gut. Vielen Dank für die Hilfe :)
Korrekt.
Den Pfad für das Bild hast du vermutlich aus dem Datei Explorer kopiert. Deshalb sind dort die Backslashes drin, diese kann aber vermutlich Javascript nicht lesen. Deshalb musst diese mit normalen Slashes ersetzen, also für das Bild so:
C:/Users/games/Desktop/Info HTML/Bilder/getraenkeguenther.jpg
Sorry hab mich verschrieben, ich meinte das CSS oder besser gesagt der Browser kanns nicht auslesen.
Funkioniert auch der Footer nicht oder nur das Bild. Denn beim Bild hast du so weit ich sehen kann nicht definiert, welches element diesen Style übernehmen soll.
Ich nehme mal an, dass das body element das Bild darstellen soll!?
Das CSS wäre dann so:
body {
background-image: url("C:\Users\games\Desktop\Info HTML\Bilder\getraenkeguenther.jpg");
background-repeat: no-repeat;
background-position: left top;
}
Versuche es mal so:
HTML:
<!doctype html>
<html>
<head>
<title>Informatik</title>
<link href="Kurz.css" rel="stylesheet" type="text/css">
</head>
<body>
<center><p>BibbleBob</p></center>
<footer></footer>
<script language="javascript" type="javascript" src="Footer.js"></script>
</body>
</html>
CSS:
body {
background-image: url("Bilder/getraenkeguenther.jpg");
background-repeat: no-repeat;
background-position: left top;
}
JS:
var footer = `
<a>Impressum</a>
<span>© BibbleBob</span>
`;
document.getElementsByTagName("footer")[0].innerHTML = footer;
Beim script habe ich noch was vergessen:
<script language="javascript" type="text/javascript" src="Footer.js"></script>
Aber das Bild sollte passen. In welchem Browser schaust du es an?
Mit dem Span kann einem/mehreren Wort/ern in einem Paragraph ein anderer Style gegeben werden:
<p>Ich bin ein <span style="color:red;">Beispiel</span> text</p>
In diesem Fall ist der footer sozusagen der Paragraph, indem ich den "normale" Text in ein span element geschrieben, sodass es mit dem a element einheitlich aussieht. Der Span könnte aber auch wegelassen werden.
Wenn ich die Seite nachbaue ist das Bild oben link, wie du im css angegeben hast. Hast du noch weiteren CSS Code benutz?
Wo soll das Impressum stehen?
Wenn es in der Mitte unten sein soll, den code in der css datei durch folgendes ersetzen:
html {
height: 100%;
}
body {
background-image: url("Bilder/getraenkeguenther.jpg");
background-repeat: no-repeat;
background-position: left top;
min-height: 100%;
margin: 0;
display: flex;
flex-direction: column;
}
footer {
margin-top: auto;
height: 40px;
text-align: center;
}
Entweder copy and Paste oder per php include
Copy and paste finde ich irgendwie unschön und dann muss man bei einer kleinen Veränderung alles einzeln verändern. Was genau ist php include und wie kompliziert ist das? xD
Du legst dir quasi eine eigene Footer.php Datei an. Auf jeder html Unterseite kannst du diese dann per php und dem Befehle include (footer.php) einfügen
Ok super danke, dann versuche ich das mal
Musst die html Seiten dann aber auch als .php speichern. Dann wie gesagt eine Footer.php anlegen. In deinen html Seiten dann einfach an der gewünschten Stelle <?php include (”footer.php"); ?>
Bin echt noch sehr planlos, ich arbeite mit notepad++, geht das?
Das funktioniert aber erst nach dem Hochladen auf einen Webserver. Lokal nur, wenn du eine entsprechende Entwicklungsumgebung auf deinem Rechner eingerichtet hast.
Editor ist eig. egal. Kommt dann wie germanils sagte, eher auf deinen verwendeten Server an. Falls du die Wahl hast, nehme VS Code mit dem php live Server Addon
Nein, das klappt nicht so einfach. Bleib einfach beim vervielfältigen.
Alles klar, danke für die schnellen Antworten
Ok super danke, habe null Erfahrung mit JavaScript, wie definiere ich meinen Code und was muss ich in der js Datei dann ergänzen?