Html Scrollen funktioniert nicht?
<!DOCTYPE html>
<html lang="de">
<head>
<title>
Titel
</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
body{
margin: 0;
margin-right: 18pt;
}
a{
text-decoration: none;
color: black;
font-face: Arial;
}
hr{
background-color: black;
border-color: black;
width: 25%;
}
.fusszeile{
position: fixed;
bottom: 0;
width: 100%;
background-color: blue;
height: 3em;
font-size: 12pt;
font-face: Arial;
}
h1{
font-size: 30pt;
font-face: Arial;
text-align: center;
}
t2{
font-size: 18pt;
font-face: Arial;
color: white;
}
t3{
font-size: 18pt;
font-face: Arial;
text-align: justify;
position: fixed;
}
.drop {
background-color: blue;
color: black;
padding: 9pt;
font-size: 18pt;
border: none;
cursor: pointer;
font-face: Arial;
margin-left: 0;
}
.dropdown {
position: fixed;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: blue;
font-face: Arial;
font-size: 18pt;
min-width: 100px;
}
.dropdown-content a {
color: black;
padding: 9pt 18pt;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-content {
display: block;
}
div#text{
float: left;
}
</style>
</head>
<body>
<h1>
Titel
</h1>
<div class="dropdown">
<button class="drop">
<b>
<a href="#">
≡ Menü
</a>
</b>
</button>
<div class="dropdown-content">
<b>
<a href="#">Text</a>
</b>
</div>
</div>
<div id="text">
<t2>
----------|....
<br>
</t2>
</div>
<div id="text" style="margin-left: 18pt;">
<t3>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
k
<br>
3
<br>
k
<br>
k
<br>
k
<br>
k
<br>
3
</t3>
</div>
<div class="fusszeile">
<hr noshade>
<center>
<a href="#">Text</a>
</center>
</div>
</body>
</html>
Was soll denn t3 sein? Es gibt H3, aber nicht T3
t3 heißt der text der unter der Fusszeile verschwindet
3 Antworten
Dann musst du position: fixed; und bottom: 0; für die Fußzeile entfernen.
Und btw: Es gibt keine HTML-Elemente t2 oder t3. Verwende hier für valides HTML zum Beispiel DIVs mit Klassen:
<div class="t3">
Was es dagegen gibt, ist ein extra Element für die Fußzeile:
<footer>
FOOTER hat nur eine andere sematische Bedeutung. Für das Aussehen ist es egal, ob du
<div class="fusszeile">
oder
<footer class="fusszeile">
schreibst. Du kannst dir aber die Klasse ganz sparen und FOOTER direkt im CSS stylen.
Erstmal Danke. Ich habe dies alles angewendet, jedoch ist der footer jetzt nicht mehr unten sondern in der mitte.
Ist auch klar, sofern der Inhalt nicht ausreicht. Um das zu erreichen, gibt es verschiedene Wege. Ich empfehle für das „grobe“ Seitenlayout CSS Grid:
HTML
<div class="container">
<header>Header</header>
<main>Main</main>
<footer>Footer</footer>
</div>
CSS
.container {
min-height: 100vh;
display: grid;
grid-template-rows: 30px 1fr 50px;
grid-template-columns: 1fr;
}
header {
background-color: silver;
}
main {
background-color: #8080f0;
}
footer {
background-color: #303030;
color: white;
}
Danke für deine Bemühungen. dies funktioniert leider auch nicht bei mir. könntest du mir das in meinen Code integrieren und kommentieren was du verändert hast? Ich würde mich super freuen.
Sorry aber aus deinem „Code“ wird man nun wirklich nicht schlau. Ich rate dir erst mal die Basics von HTML und CSS zu verinnerlichen und nicht gleich mit Dropdown-Menüs und ähnlichem anfangen. Wenn du das ganze nicht verstehst und du dir nur überall Codeschnipsel rauskopierst, wirst du deinem Nutzernamen niemals Ehre machen.
Für CSS Grid wäre das ein guter Einstieg:
https://kulturbanause.de/blog/css-grid-layout-module/
Ansonsten für den Einstieg auch ganz gut:
Mach die Position nicht "fixed", sondern "relative" und konfiguriere das dann passend.
Es könnte evtl. auch Sinn machen, einen Container um t3 und deine Fußzeile zu packen, den Container "fixed" zu machen und die Objekte darin "relative" passend anzuordnen.
Wie mache ich das? Könntest du dies in meinen code eintragen und die veränderungen kommentieren?
Probier am besten erst einmal selber rum, an sich habe ich das schon ausreichend erklärt.
Kleiner Tipp:
Wenn du mit dme CSS rumprobieren möchtest eignet sich die Browser-Konsole oft dazu.
ich komme damit nicht weiter. würdest du dies bitte in mein Code integrieren
Ändere mal
position: fixed;
zu
position: absolute;
nun sollte das scrollen funktionieren. Jetzt schreibst du noch in den Style
body{
height: 100em;
}
fusszeile{
top: 100em;
}
Dies sorgt dafür das die Fusszeile nach unten verschoben wird und das der Text nicht unter ihr verschwindet. Du kannst nun die 100em an deine benötigte Seitengröße anpassen.
wie würde es dann aussehen wenn ich fusszeile durch footer ersetze