Hallo
Wir werden dir wahrscheinlich nicht helfen können, da bei dir einfach zu viele Grundlagen fehlen. Du hast leider vollkommen falsche Vorstellungen wie eine Webseite erstellt wird.
Ich habe immer prozentangaben genutzt
Das ist ein beliebter Anfängerfehler. Zu einem flexiblen und / oder responsive Design gehören durchaus auch feste Einheiten wie px, em oder rem.
Da es im Internet kaum sinnvolle Anleitungen gibt solltest du zunächst etwas Geld in aktuelle Literatur zu HTML5 und CSS3 stecken. Im Internet finden sich leider meist nur veraltete oder sogar falsche Informationen, die von Anfängern nicht als solche erkannt werden können.
Alleine die Erläuterung der Fehler auf deiner Seite würde ein ganzes Buch füllen. Das können wir hier im Rahmen eines Forums natürlich nicht leisten.
Grundsätzlich verschieben sich HTML-Elemente von sich aus nicht übereinander. Wenn dies geschieht hat der Webseitenersteller CSS falsch oder unsinnig angewendet.
Webseiten wie deine sollten grundsätzlich in verschiedenen aufeinander aufbauenden Abschnitten erstellt werden. Zum Beispiel:
1. Grundgerüst der Webseite
2. HTML
3. CSS
4. JavaScript
Bei deinem Grundgerüst fehlen entscheidende Angaben. So der Doctype, damit der Browser überhaupt weiß, welche HTML-Version er anwenden soll. Oder der Zeichensatz, damit auch Sonderzeichen und Umlaute korrekt angezeigt werden.
Ein sinnvolles Grundgerüst für aktuelle Webseiten könnte zum Beispiel folgendermaßen aussehen, wobei der Inhalt von title und description natürlich auf den endgültigen Inhalt abgestimmt werden sollten:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Layout Probleme 01</title>
<meta name="description" content="HTML5, CSS3">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
</body>
</html>
Die folgenden Informationen gelten für den gesamten Quelltext und nicht nur für die Stellen, die ich zur Verdeutlichung zitiere. Wenn ich zum Beispiel eine Stelle zitiere und darauf hinweise, das inline-CSS nicht verwendet werden sollte gilt das für alle inline-CSS-Angaben. Oder für alle br-Elemente, alle geschützten Leerzeichen, alle div und so weiter.
Solche Angaben
in
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
solltest du unterlassen. Wenn ein Besucher die Seite nicht wie von dir vorgeschlagen benutzen kann solltest du ihm die Möglichkeit geben eigene Anpassungen vorzunehmen.
Dann wird der HTML-Quelltext im body-Bereich hinzugefügt, wobei einerseits die Regeln vom HTML beachtet werden sollten und zudem Vorgehensweisen angewendet werden sollten, die sich bewährt haben. Eigene Erfindungen und Konstruktionen führen später regelmäßig zu Problemen und sollten unterbleiben. Das CSS spielt hierbei noch keine Rolle.
id sollten nur verwendet werden, wenn sie wirklich benötigt werden. Das ist hier nicht der Fall.
div-Elemente dürfen nur verwendet werden, wenn es keine geeigneteren Elemente gibt. Unnötige Elemente die nur dem Layout dienen sollten vermieden werden. Dieses div ist, wie viele der folgenden, überflüssig, also weglassen.
Geschützte Leerzeichen um einen Abstand zu erzeugen führen zu Problemen und sollten vermieden werden. Abstände werden mittels CSS erzeugt.
Code:
<b style="color:white; font-size:100%;">Anmelden</b>
Das b-Element hat eine bestimmte semantische Bedeutung und es ist sachlich falsch, es für die Anzeige von Fettschrift zu verwenden.
Auf inline-CSS sollte verzichtet werden. Das erschwert nur die spätere Gestaltung per CSS.
br-Elemente sollen nicht benutzt werden um Abstände zu erzeugen. Sie sollten nur dort verwendet werden, wo Blockelemente verboten sind.
Code:
<input type="text" name="user" class="input" placeholder="Benutzerame">
input-Elemente sollten nur zusammen mit label-Elementen verwendet werden. Das ist benutzerfreundlicher, auch wenn das placeholder-Attribut verwendet wird. Wenn die Besucher die ausgefüllten Felder noch einmal kontrollieren möchten sind die placeholder-Beschriftungen nicht mehr zu sehen.
Das div-Element wir hier falsch vewendet. Hier ist das main-Element korrekt.
Code:
<ul>
<br>
<div class='foren' style='position:relative;'>
Auf ul-Elemente dürfen als Kindelemente nur li-Elemente folgen. Keine br, div oder Andere.
Code:
style='position:absolute;
Anfänger sollten auf position:absolute verzichten, da sie es wie auch du in der Regel falsch anwenden.
Leere Container haben im Quelltext nichts verloren.
Code:
<div ...>...Alle Foren</div>
Text sollte nie direkt in Containern wie div, main, header, footer, aside, article und so weiter stehen, sondern nur in dafür vorgesehenen Elementen wie p, h1 bis h6, li und so weiter.
Wenn du das alles korrigiert hast kannst du mit dem CSS beginnen.
Du siehst, mit ein paar kleinen Anpassungen und Änderungen ist es in deinem Fall leider nicht getan.
Gruss
MrMurphy