sticky header funktioniert bei effekten nicht

  • hallo,


    vorweg, ich weiß mittlerweile, dass ich code posten muss um alles zu erklären,

    dennoch vorweg eine frage ob das überhaupt geht.


    ich habe 3 verschiedene sticky header von der seite: codepen.io/ getestet, alle gehen gut mit text, bildern, etc....


    nun habe ich auch von codepen.io/ viele beispiele für hover effekte bei bildern gemacht, die immer darauf hinauslaufen, dass ein frame über dem bild liegt, der zb, transparent macht, oder

    die ränder etwas dunkel, ihr kennt diese ja bestimmt sowieso.


    bei diesen effekten gehen die einfach über den sticky header beim scrollen, als gäbe es ihn nicht ????


    idee bevor ich seiteweise css poste

    Danke Tino (wieder mal)

  • Zitat

    idee bevor ich seiteweise css poste


    Ja. Solche Spielereien sind weltfremd und in der Praxis sinnlos. Deshalb werden sie von den Browserherstellern nur nebenbei berücksichtigt.


    Du sitzt wahrscheinlich zu Hause vor einem großen Monitor mit Maus und Tastatur. Die Benutzer von Browsern verwenden aber eher Smartphones und Tablets, also Geräte mit Touchscreens. Da gibt es keine Hover-Effekte. Auch sind andere Möglichkeiten nur eingeschränkt oder erschwert möglich, die mit Maus und Tastatur kein Problem darstellen.


    Obwohl dir noch die Grundlagen für aktuelles HTML und CSS fehlen und deshalb die Kommunikation und Hilfe mit dir und für dich schwierig ist, pickst du dir Spielereien heraus, die in der Praxis schon lange gestorben sind. Lerne am besten erst mal die Möglichkeiten und korrekte Anwendung von aktuellen HTML-Elementen. Davon haben deine zukünftigen Besucher mehr als durch die unnötigen Spielereien, die eine Webseite zudem noch unseriös und kindisch wirken lassen.


    Du musst also zunächst die grundsätzliche Entscheidung treffen, ob die Webseseiten für dich und dein Ego erstellen willst? Oder doch eher den Besuchern deiner Webseite eine Freude machen und das Lesen erleichtern willst? Momentan bist du auf dem Ego-Trip.

  • hi,

    du kennst mich recht gut, den ego-trip lebe ich im sport noch viel mehr aus, frag meine frau....

    ich sag nur corona und bänderzerrung, da hat man für sowas zeit....


    zum thema, ich wollte uns halt endlich mal (ich weiß es gibt 10000000...) eine art reiseblog, sport, etc machen und kein wordpress nutzen, da ich füher mal webseiten gemacht gabe, da gab es diese effekte alle noch nicht......


    alle diese blogs haben aber doch einen sticky header und massen effekte, die nicht drüber laufen......


    das andere, klar fallen irgendwann wahrscheinlich die desktop pc alle weg, deswegen käme noch eine frage, wie man eine geile ego-seite macht und dazu eine abgespeckte und benutzereinfache für smartphones und diese pro endgerät darstellen lässt


    gruss

    Tino

  • Zitat

    dass ein frame über dem bild liegt, der zb, transparent macht, oder

    die ränder etwas dunkel, ihr kennt diese ja bestimmt sowieso.


    bei diesen effekten gehen die einfach über den sticky header beim scrollen, als gäbe es ihn nicht ????

    Wenn ich dich richtig verstehe, sind diese Bilder und Frames bzw. Overlays nicht auf dem sticky Header selber sondern irgend wo auf der Seite und überdecken dann den Header?

    Vermutung: Häufig ist diese Überdeckung gewollt und wird durch einen hohen z-index erzwungen. Wenn dem so ist, müsstest Du durch einen abgestuften z-index, d. h. auf dem Header einen z-index, der noch höher ist, erreichen können, dass der Header wiederum die Overlays überdeckt.

    Besser wäre es allerdings, wenn Du eine Demoseite hättest, wo man sich das Problem ansehen kann. Oder den Code posten, wenn Du noch keinen Webspace hast.

  • hi,


    auf dem sticky header ist nur das menu, diese bilder kommen auf der seite, fand es nur nicht schön, dass manche ohne effekt darunten verschwinden und die mit effekt drüber schweben.

    ich teste mal die z-indexe

    dank dir

  • hi nochmal,


    danke hab den index höher als alles andere - geht...


    nochmal wegen pc und smartphone, ich lese immer nur, dass man in den css die größen unterscheidet, habe ich schon und es geht passabel mit flexbox, img: height = auto und solchen sachen.........


    frage: kann man auf der allerersten seite, hier index.php eine art if-abfrage mache, ob die pc variante kommt oder eine völlig abgespeckt, nur 2 menupunkte und alle fotos mittig und groß untereinander: ----> sowas wie : start_pc.php bzw. start_smartphone.php und dann jeweils weitergehend.


    gruss Tino

  • Zitat

    kann man auf der allerersten seite, hier index.php eine art if-abfrage mache, ob die pc variante kommt oder eine völlig abgespeckt, nur 2 menupunkte und alle fotos mittig und groß untereinander

    Hast Du dich schon mit Mediaqueries beschäftigt? Damit kannst Du ja das CSS von der Fensterbreite abhängig machen und Elemente, die nicht sichtbar sein sollen, unsichtbar machen.


    Wenn ich dies lese: "start_pc.php bzw. start_smartphone.php" so ist es natürlich auch möglich, zwei Varianten der HP zu machen. Man kann daran denken, wenn die Unterschiede sehr groß sind. Ich würde mir das aber zweimal überlegen, weil Du dann beide Varianten pflegen und ändern musst, wenn z. B. neue Bilder hinzu kommen.

  • hallo,


    du meinst sowas :

    Code
    <link type="text/css" rel="stylesheet" media="screen" href="style.css" />
    <link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="iphone.css" />

    damit binde ich dann aber doch in abhängigkeit von werten nur verschiedene css.dateien ein......

    ich hätte echt lieber 2 völlig verschiedene seiten, es handelt sich ja nur um fotographien unserer reisen, am pc eben mit effekten , mosaicmäßigen gallerien, aufwendig eben, und am smartphone nur die besten 10 untereinander.... also wenig pflege-aufwand.


    wie sähe so eine abfrage auf der ersten index.php (oder index.html) aus?


    habe etwas java kenntnisse von android studio, da wärs einfach , aber in dem html ?


    Tino

  • hi,

    versteh ich nicht, wenn das in der index.php steht, wird hier doch in jedem fall die body.php geladen und dann auf allen seiten wieder mit:

    PHP
    <?php
    if(isset($_POST['recordSize'])) {
    $height = $_POST['height'];
    $width = $_POST['width'];
    $_SESSION['screen_height'] = $height;
    $_SESSION['screen_width'] = $width;

    sowas abgefragt, ich will doch aber in der index schon den split in body.php und meinetwegen body_mobile.php und ab dann 2 komplett verschiedene völlig unabhängig voneinanderne seiten, nicht jedesmal irgendwelche abfragen....?


    Code
    wie kann ich an der stelle:$.ajax({
            url: 'body.php',

    irgendwie die if-abfrage machen


    danke Tino

  • Du kannst natürlich auch clientseitig die Fensterbreite abfragen und gleich die richtige Seite holen:

    Code
    $(document).ready( function() {
        var height = $(window).height();
        var width = $(window).width();
        if (width > 600) url = 'body.php'; else url = 'body_mobile.php';
        $('body').load(url);
    });
  • ok,

    danke ich teste mal etwas rum.


    etwas noch die .width() geht doch nach pixeln, desktop hier 1920, was wäre wenn ein gutes händy display auch zb > 1400 wäre,

    gibt es noch sinnvolle andere abfrage parameter.


    genug für heute, muss zum zahnarzt solange der noch offen hat :(


    danke schon mal Tino

  • morgen,


    also ich bin weitergekommen mit den beiden 2 völlig unterschiedlichen designs, das sollte so funktionieren....

    ich versuch natürlich auch weiter die responsive sache zu verstehen...

    ich habe da ja im body den header mit php eingebunden:

    PHP
    <?php include 'include_header.php';?>

    nun versuch ich auch ähnlich wie dein beispiel auch 2 headern zu wählen (menu_pc und menu_mobile), klappt aber nicht, so mein versuch:

    noch ne idee,

    ansonsten danke schon mal, bin echt weitergekommen

    Tino

    Code
  • Nein, so geht das nicht, das PHP muss ja schon auf dem Server zur Verfügung stehen, wenn Du auf dem Client bist und mit Javascript arbeitest, ist es zu spät.

    Mache es genau wie mit dem Inhalt von body: Die URL abhängig von der Fensterbreite zur Verfügung stellen und mit jQuery-load in den Header hinein laden.

  • nochwas....


    ich versuch grad noch eine allererste , sozusagen leere seite:

    die jetzt entscheiden soll, in welche richtung es geht, aber die ist nur weiß und nichts wird geladen?

    Code
      $('body').load(url);

    liegt hier der fehler, wie muss die richtige .php geladen werden

    Tino

  • Beim Durchlesen deines Codes kann ich keine Fehler erkennen. Ajax, und dieses jQuery-load ist ja Ajax, braucht jedoch einen Webserver, wenn Du die Datei einfach mit file: öffnest, wird es nicht funktionieren. Die Console müsste entsprechende Hinweise geben.

  • ich teste es ja im webserver wie alles,

    hab mal das script im body, aber es passiert garnix, weiß?

    Code
     $('body').load(url);

    das hier soll das in body geladen werden, die seite index.php soll doch aber als erste komplette seite dann kommen und das hier nur davorgeschaltet zur unterscheidung

  • Code
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

    mist, du hast recht, diese zeile steht eigentlich auf allen seiten, nur hab ich hier mit copy/paste ein grundgerüst genommen zum testen und nicht drauf geachtet..

    mein gott...

    PHP
    $(document).ready( function() {
        var width = $(window).width();
        if (width > 600) url = <?php include 'include_header_pc.php';?>; 
        else             url = <?php include 'include_header_mobile.php';?>;
        $('body').load(url);
    });

    vielleicht hast du zu der header sache ja auch so ne einfache lösung


    dank dir echt

    Tino

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!