Ergebnis 1 bis 7 von 7

Thema: Header(fixed) nicht an oberster Stelle

  1. #1
    XFgn
    Gast

    Böse Header(fixed) nicht an oberster Stelle

    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...

    ScnShot2.jpg 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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von XFgn (12.09.2016 um 19:47 Uhr) Grund: Hinzufügen des Seitencodings

  2. #2
    Teeny
    Registriert seit
    23.05.2016
    Beiträge
    38
    Danke
    0
    Bekam 3 mal "Danke" in 3 Postings

    Standard AW: Header(fixed) nicht an oberster Stelle

    Mit Bildern des Problems und des CSS/HTML-Codes kann man nur wenig anfangen. Poste einen Link zur Seite oder den Code.

  3. #3
    XFgn
    Gast

    Standard AW: Header(fixed) nicht an oberster Stelle

    Zitat Zitat von Theas1965 Beitrag anzeigen
    Mit Bildern des Problems und des CSS/HTML-Codes kann man nur wenig anfangen. Poste einen Link zur Seite oder den Code.
    Hab's hinzugefügt...

  4. #4
    Teeny
    Registriert seit
    23.05.2016
    Beiträge
    38
    Danke
    0
    Bekam 3 mal "Danke" in 3 Postings

    Standard AW: Header(fixed) nicht an oberster Stelle

    Guck mal, das ist genau was du suchst: https://www.virendrachandak.com/tech...ter-using-css/

  5. Folgende User finden die Antwort von Theas1965 gut:


  6. #5
    XFgn
    Gast

    Standard AW: Header(fixed) nicht an oberster Stelle

    Zitat Zitat von Theas1965 Beitrag anzeigen
    Guck mal, das ist genau was du suchst: https://www.virendrachandak.com/tech...ter-using-css/
    Ich hatte zwar noch einige Probleme, die ich bis jetzt noch nicht ausfindig machen kann, bzw. warum diese mal waren, hat dann aber nach einiger Zeit recht gut funktioniert, als ich ständig nachjustiert habe.

    Wie dem auch sei, habe ich nun das Problem mit den verschiedenen Bildschirmgrößen, und vllt. kannst Du, oder wer auch sonst noch hierher stoßen sollte, mir ja dabei helfen, da ich nicht unbedingt ein neues Thema erstellen will, denke ich.

    Meine Frage sind da: Wenn z.B. mein Handy eine Auflösung von 1920x1080px hat, ist die Breite in der man das Design der Website haben sollte, wenn man es für's Handy anpasst, dann nicht auch 1080px in der Breite sein? Wenn nihct, woher weiß ich dann, ohne genau mein Handy zu suchen, ob die Bildshirmgröße passt, und die Seite? Gibt es abgesehen davon nicht eine möglichkeit ohne anpassung für verschiedene größen eine einheitliche zu haben, sodass es für alle Geräte komplett gleich aussieht?
    Ich blicke da nach mittlerweile 24 Stunden ohne Pause nicht durch. Schlafen ist keine Option, da ich sonst in der Nacht wach wär, was sich nicht gut machen würd...
    Geändert von XFgn (13.09.2016 um 09:20 Uhr)

  7. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    565
    Danke
    0
    Bekam 66 mal "Danke" in 64 Postings

    Standard AW: Header(fixed) nicht an oberster Stelle

    Hallo

    mein Handy
    Wieso dein Handy? Machst du die Seite für dich oder für deine Besucher?

    Mit der Antwort darauf beginnt die Lösung.

    woher weiß ich dann, ohne genau mein Handy zu suchen, ob die Bildshirmgröße passt
    Das kannst du bei den Endgeräten (das sind ja nicht nur Handys) deiner Besucher überhaupt nicht wissen. Bei der Vielzahl der Bildschirmgrößen ist es deshalb vollkommen unsinnig Webseiten für bestimmte Bildschirmgrößen (oder besser: Fenstergrößen) zu erstellen.

    Es hat sich als am praktikabelsten erwiesen das Layout dem Inhalt anzupassen. Dabei wird berücksichtigt, dass seitliches Scrollen von den meisten Usern abgelehnt wird. Je nach Fensterbreite passt sich die Länge der Seite an. Je schmaler das Fenster wird desto höher wird die Seite, so dass nur rauf- und runter gescrollt werden muss. Die Bildschirm-/Fenstergröße spielt dann nur noch eine untergeordnete Rolle.

    Das ganze läuft unter der Bezeichnung "Responsive Layout".

    sodass es für alle Geräte komplett gleich aussieht?
    Das hat sich bereits vor Jahren als Sackgasse erwiesen. Besucher erwarten überhaupt nicht das Webseiten auf allen Endgeräten gleich aussehen. Viel wichtiger ist das Webseiten problemlos gelesen und benutzt werden können.

    Gruss

    MrMurphy
    Geändert von MrMurphy (13.09.2016 um 09:59 Uhr)

  8. #7
    XFgn
    Gast

    Standard AW: Header(fixed) nicht an oberster Stelle

    Das ganze läuft unter der Bezeichnung "Responsive Layout".
    -
    Viel wichtiger ist das Webseiten problemlos gelesen und benutzt werden können.
    Die Website ist sowhl für Besucher, als auch für mich. Klar erstelle ich diese, wie ich möchte dass die aussieht, aber eher Besucher werden letzten Endes die Seite besuchen.

    Ja und genau dort steckt mein Problem. Mein altes Layout war komplett unbenutzbar für fast alle Größen. Also bin ich seit Gestern Mittag dabei ein neues zu machen. Ist auch soweit fertig. Mein Problem jedoch ist z.B., dass Margin-Pixelgrenzen nicht mit anderen Geräten übereinstimmen.
    Während z.B. ein Bild mit der weite von ca. 900px auf meiner Konsole oder am PC normal aussieht, ich unter anderem aber noch margin-Grenzen habe, und manchmal auch ganz ohne, überlappt das Bild am Handy komplett, und ist abwärts des Textes der darunter ist, und verursacht seitlichen Scroll auf dem Handy. Ich habe schon das Bild kleiner gemacht, nur will ich wieder die grenzen einfügen, um den Text dekorativ mittig zu setzen, ohne das zentrieren, kann ich auch alles wieder komplett vergessen, da dann die Grenzen die ich gesetzt habe, an jedem Gerät anders, bis komplett falsch aussehen, und MINDESTENS am Handy das Bild nach rechts neben den Text rutschen lässt und der seitliche scroll wieder da ist, der eigentlich nicht sein sollte, oder beim kompletten raus zoomen der Text, verglichen zum Bild deplatziert ist...


    Gruß
    XFgn

Ähnliche Themen

  1. Äußere div fixed, innere nicht
    Von WWKiller im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 19.04.2012, 23:49
  2. Liste wird nicht an richtiger Stelle dargestellt
    Von chuqa im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 19.11.2008, 02:43
  3. Antworten: 9
    Letzter Beitrag: 03.08.2008, 00:56
  4. css Buttons nicht an richtiger stelle
    Von SpeedFire im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 24.07.2008, 19:47
  5. Bild nicht an richtiger Stelle
    Von Buffy_Summers im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 0
    Letzter Beitrag: 19.09.2004, 14:30

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •