Ich weiß jetzt echt nicht wo das Problem ist. Wenn ich mir Beispiele auf anderen Seiten anschaue, sieht's aus wie's aussehen soll...
Jedenfalls war ich gerade dabei mir ein komplett neues Layout zu machen, da das alte nicht für die Mobile Version nutzbar war.
Kurz darauf komme ich aber nicht weiter, da ich gerne einen Header hätte, dessen position fixiert ist, und er beim scroll nach unten,
ständig am oberen Bildschirmrand/Websiterand bleibt. Beim einfügen der geplanten Tags/Inhalte zum Test, wurde der Header plötzlich
einige Pixel nach unten verschoben, sodass oben eine kleine transparente Lücke ist, und die letztendlich verbleibenden Titel verdeckt, die KOMPLETT hinter dem Header sind. Nehme ich diese dann wieder raus, ist der Header komplett oben. Füge ich einen anderen Tag ein, passiert das gleiche, sodass die ersten 5-10 Pixel des Seiteninhalts hinter dem Header anfangen, und nicht einsehbar sind, außer in einer kleinen Lücke darüber, in der man auch nichts besonderes erkennt. Folgendes...
Auf dem Bild sollte man das recht genau sehen können. Die rechte Hälfte des Bildes sind alle noch vorhanden Tags, und CSS. Der Mauszeiger markiert den Titel, der, wie man sehen kann, zur Hälfte hinter dem Header ist, der eigentlich an oberster Stelle sein soll, und sich ERST bei einem Scroll über den Inhalt schieben soll. margin-top bringt nichts, da dort nur der Abstand des Titels zum oberen Rand verringert wird, und der Header komplett auf dem Titel mit nach unten wandert.
Ich weiß nicht ob ich mich gerade einfach nur anstelle, oder nicht, aber selbst bei einer Suche auf Google ist's keine Hilfe nach einer evtl. Lösung zu suchen, da anscheinend bei allen alles klappt. JavaScript funktioniert auch nicht, da ich dort das gleiche Resultat habe, wie jetzt, weswegen das Script nicht mehr vorhanden ist.
Dan einmal auf Wunsch das Coding der Seite:
<style>
html, body {
background-color: #e1e1e1;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
}
body {
font-family: "Comic Sans MS"
}
header {
position: fixed;
width: 100%;
height: 80px;
background-color: #1f1f1f;
padding: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
border: 0;
}
.footer {
width: 100%;
height: 45px;
background-color: #1f1f1f;
padding: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
border: 0;
}
</style>
<body>
<header>
<h2 style="color:white;">Test - Gefixter Header</h2>
</header>
<h2>DIESDAS Test <br></br> blabla</h2>
<footer class="footer">
</footer>
Gruß, xFgn
