Mit append angehängtes Objekt nur bis zu einer gewissen Screengröße anzeigen

  • Einen schönen guten Abend in die Runde.


    Ich baue gerade eine alte Seite auf responsive um. Im Header ist mit folgendem Code ein Bild angehängt.



    Code
    1. $(document).ready(function() {
    2. $('<a href="http://www.klute-webdesign.de" target="blank"><img src="http://www.meineseite.de/meinbild.png" style="margin-left:930px;margin-top: 30px; "/></a> ').appendTo('#imHeader');
    3. });

    Beim Umsetzen auf responsiv passiert folgendes. Tippt man auf den Hambuger Button, wird das Menü um 930 px nach rechts verschoben angezeigt. In der Vorschau ist alles ok. Hat jemand eine Idee? Kann man den append bis zu einer gewissen Screengröße bedingen? So, das dieser unter 1000px breite nicht mehr angzeigt wird?
    Es geht um diese Seite.

  • Hi Labelle !


    Ich kann es derzeit nicht testen, aber die etwas umständlichere Methode wäre den margin bei den Breakpoints zu überschreiben.


    Für den ersten Breakpoint wäre der Code...

    CSS
    1. <style>
    2. @media (max-width: 999px) {
    3. #imHeader img {
    4. margin-left: 415px;
    5. margin-top: 8px;
    6. }
    7. }
    8. </style>


    Für die weiteren musst du die Pixelzahl ändern.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Hi Andy,


    so kompliziert brauch ich es gar nicht. Oder liegt gar ein Mißverständnis vor?


    Ich brauch das angehängte Bild NUR bei der Desktop-Version, kann man es bei einer kleinen Ansicht ausblenden, mit display none oder so?


    Ich kann das Siegel natürlich auch kplt in den Header packen, dann löst sich das Problem von allein, wäre aber schade, soll eigentlich bei Vollgröße über den Rand versetzt sein.

  • Natürlich kannst du es auch ausblenden mit "display: none;" ! Das Problem ist aber, dass du es verlinkt hast und im Header ist es zwar sichtbar aber nicht anklickbar ! Deshalb habe ich den Code geschrieben.

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Hi Andy,
    bis jetzt waren meine Versuche noch nicht erfolgreich. Habe es erst anders gelöst weil ich einen lauffähige Version online haben muss. Probiere es aber weiter. Komme ggf. nochmal drauf zurück.
    Danke für deine Hilfe.

  • Du kannst aber das Bild mit dem HTML-Objekt drinnen lassen und (HTML-OBjekt so groß wie die GRafik machen) und dann beim ersten Breakpoint CSS Code einfügen z.B. #imHeader div {display:block!important;}

    Wissen ist MACHT ! Nichts zu Wissen macht nichts !
    Wissen ist MACHT ...ohne es zu wissen !

  • Das war gar kein HTML-Objekt, ich hatte den Code für 'append' unter 4/SEO. Ist aber ein guter Tip, werde ich ausprobieren. Geht nur z. Zt. etwas langsam, bin beruflich sehr eingespannt.
    Danke dir.