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>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Comfortaa:wght@500&display=swap" rel="stylesheet">
<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>
<footer>
<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!
3 Antworten
Deine Paragraphen liegen in einer Flexbox und werden daher nebeneinandergereiht.
Wenn du beide Links in einen Container setzen würdest, könnten sie auch via Zeilenumbruch auf zwei Zeilen verteilt werden, denn innerhalb des Containers gelten die Regeln der Flexbox nicht mehr.
<footer>
<!-- ... -->
<p>
<a href="Datenschutzerklaerung.html">Datenschutzerklaerung</a>
<br>
<a href="Nutzungsbedienungen.html">Nutzungsbedienungen</a>
</p>
</footer>
PS.: Beachte, dass deinem Dokument ein Doctype (in der ersten Zeile) fehlt und ein Seitentitel im head-Bereich. Beides sind Pflichtelemente.
<!doctype html>
<html>
<head>
<title>...</title>
<!-- ... -->
Ja, ich habe vergessen doctype auch noch reinzu kopieren… Trotzdem danke für die Erinerrung!
Dein <br> am Ende von </p> wird vom Browser ignoriert, weil keine Zeichen folgen, jedenfalls beim Firefox. Setze den <br> Tag an den Anfang vom folgenden <p>
Abstände und Ränder (margin) die sich überlappen bzw. ergänzen, verhalten sich „komisch“. Du weißt, dass sowas wie <p></p> gar keine Fläche belegt?
Meinst du das?
Abstände und Ränder (margin) die sich überlappen bzw. ergänzen, verhalten sich „komisch“
Das Verhalten nennt sich im Fachjargon margin collapse und folgt einer festen Regel. So wirkt es beispielsweise nur auf vertikale Außenabstände.
Du weißt, dass sowas wie <p></p> gar keine Fläche belegt?
Es handelt sich um ein Blockelement. Es belegt keine innere Höhe so lange es leer bleibt. Dafür besetzt es allerdings die volle Seitenbreite und wird in den geläufigsten Browsern mit einem vertikalen Außenabstand versehen.
Du kannst <br> für einen zeilenubrruch verwenden, der <br> tag muss nicht geschlossen werden