Ankündigung

**daniel5959** · 29.05.2023, 01:33

Hallo,

eine englische Seite ohne Impressum und kein Text im Header zu sehen - Linkspammer?

Falls wirklich Interesse an einem fixiertem Header (Kopfbereich) mit farbigem Hintergrund besteht.

Ich bin kein CSS-Experte und habe mal bei Google gesucht, mir dabei viele Seiten angesehen, auch viel Code kopiert und getestet, aber nichts wollte klappen, denn irgend etwas hat im Code immer gefehlt.

Dann bin ich über ein Youtube-Video und die Beschreibung unterm Video auf eine Webseite mit passendem Code gestoßen, allerdings musste ich hier noch etwas von dem Code aus dem Video hinzufügen, um den gesuchten Effekt zu sehen.

Einen fixed Header oder Footer mit CSS erstellen (CSS Anleitung Deutsch)

Video >> https://www.youtube.com/watch?v=cUXWL_9aEx0

Hier der Code bei meinem Test - die vielen <br> sind nur dazu, damit die Seiten lang genug zu scrollen ist, ohne das ist viel Text hier im Forum posten muss.

HTML-Code:

<html>
<head>
<style>
.header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #bde0fe;
text-align: center;
height: 50px;
padding-top: 20px;
}

.container {
padding-top: 50px;
}
</style>
<title>Fixed Header</title>
</head>
<body>
<div class="header">Navigation / Menü</div>
<div class="container">
<h1>Fixed Footer</h1>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
sed diam voluptua.</p>
<br>
<br>
Text<br>
<br>
<br>
<br>
<br>
<br>
Text<br>
<br>
<br>
<br>
<br>
<br>
<br>
Text<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Text<br>
<br>
<br>
<br>
<br>
<br>
<br>
Text<br>
<br>
<br>
<br>
<br>
<br>
<br>
Text<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
Text<br>
<br>
<br>
<br>
<br>
<br>
<br>
Text<br>
<br>
<br>
</div>
</body>
</html>

Zum gleich Ausprobieren habe ich den oberen HTML-/CSS-Code als Webseite online gestellt, siehe

Testseite >> http://findelinks.de/css-fixed-header.html

daniel5959

**daniel5959** · 29.05.2023, 01:41

Anmerkung:

Mein Beitrag wurde vom Spamfilter blockiert, aber den HTML-/CSS-Code für einen fixierten Header mit farbigem Hintergrund, damit der gescrollte Text nicht im Header sichtbar wird, kann auf meiner Testseite in der Quelltextansicht angesehen und kopiert werden.

>> http://findelinks.de/css-fixed-header.html

Nach vielen vergeblichen Versuchen mit Code aus dem Internet, bin ich erst bei einem Youtube-Video fündig geworden, siehe

Einen fixed Header oder Footer mit CSS erstellen (CSS Anleitung Deutsch)

>> https://www.youtube.com/watch?v=cUXWL_9aEx0

**Sempervivum** · 29.05.2023, 05:43

Kann mir jemand sagen wie ich das so machen kann das der Inhalt hinter dem Header verschwindet.
ich mag feststehende header doch leider habe ich Probleme wie ich die Schrift verschwinden lassen kann.

Ich verstehe das nicht ganz, mit der Schrift meinst Du doch wahrscheinlich die der übrigen Seite und die tut was Du willst, sie verschwindet beim Scrollen unter dem Header.

daniel5959 Ein fixed oder sticky Header gehört zu den Grundlagen und ist einfach zu realisieren. Deine Lösung, den Header fixed zu machen und dem Content ein padding-top zu verpassen hängt der Zeit ein wenig hinterher: Die Höhe dieses Paddings passt sich nicht an die des Headers an und muss jedes Mal angepasst werden, wenn sich die Höhe des Headers ändert. Das lässt sich sehr leicht vermeiden, wenn man den Header sticky positioniert.
Außerdem gibt es heute die semantischen Tag <header> und <main> und diese sollten bevorzugt werden.

**daniel5959** · 29.05.2023, 17:09

Hallo,

Zitat von Sempervivum Beitrag anzeigen

daniel5959 Ein fixed oder sticky Header gehört zu den Grundlagen und ist einfach zu realisieren. Deine Lösung, den Header fixed zu machen und dem Content ein padding-top zu verpassen hängt der Zeit ein wenig hinterher: ...

es wär schön mal einen Beispiel-Code zu präsentieren, der auch funktioniert.

Die ganzen schlauen Seiten der CSS-Experten, die sich bei Google finden lassen, verschweigen leider immer das Wichtigste bzw. setzen es als bekannt voraus, so dass sich deren Code für CSS-Laien nicht nutzen lässt.

daniel5959

**Sempervivum** · 29.05.2023, 20:42

es wär schön mal einen Beispiel-Code zu präsentieren, der auch funktioniert.

Wenn dieser kopiert wird, ohne ihn zu verstehen, ist der Lerneffekt gleich Null. Besser die Grundlagen lernen und den Code selbst entwickeln.

verschweigen leider immer das Wichtigste bzw. setzen es als bekannt voraus, so dass sich deren Code für CSS-Laien nicht nutzen lässt.

Es gibt auch genügend Quellen, die die Grundlagen vermitteln und den Leser in die Lage versetzten, den Code zu verstehen. Z. B. hier für CSS:

CSS/Tutorials – SELFHTML-Wiki

https://wiki.selfhtml.org/wiki/CSS/Tutorials

Erfordert natürlich etwas guten Willen und die Bereitschaft, zu lernen.

**daniel5959** · 29.05.2023, 21:22

Hallo,

CSS ist nicht mein Ding, das war es vor über 15 Jahren nicht und wird es auch nicht mehr werden.

Inzwischen nehme ich einfach ein PC-Programm, das mir den Code im Hintergrund zusammenstellt, das fertige Templates mitbringt und konzentriere mich auf den Inhalt der Seite. Man muss ja auch kein Auto bauen, wenn man fahren will.

daniel5959

Ankündigung

Header Problem css

Header Problem css

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

homepage-forum.de - Hilfe für Webmaster! Statistiken

Online-Benutzer

Die neuesten Themen

Die neuesten Beiträge