Ankündigung

Einklappen
Keine Ankündigung bisher.

DDIV per CSS ausblenden ab einer Abestimmten Auflösunguflösung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • DDIV per CSS ausblenden ab einer Abestimmten Auflösunguflösung

    Hallo,

    ich versuche gerade einen Socail Link auf einer Webseite einzubinden.
    Bei einer Auflosung von nehr als 960 px Breite und einer Auflösung von weniger als 500 px Breite funktioniert alees so wie ich es will.

    Ich habe 2 DIV angelegt, da die Positionierung durch das Template nicht so einfach zu realieseren war.
    Ich habe 2 Container angelegt.

    #social { CSS Code} und #social1{CSS Code}

    Die Positionierung in der index.php des Temaplates passt soweit.

    Wenn die Auflösung zwischen 501 und 959 px liegtwerden mir beide Container angezeigt.

    Code:
    @media screen and (min-width:500px) and (max-width:960px) {
    #social {
      display:none;
    }
    }
    In der CSS sind alle @media screen Angaben mit (max-width) angegeben. Ich komme da nicht weiter.

    Danke im voraus.

  • #2
    moin,
    das ist kein php sondern css/html code (bitte in zukunft unterforum beachten)
    das ist kein lauffähiges beispie (html fehlt)

    für die zukunft: complexerer code lässt sich auch hier interaktiv bearbeiten:

    https://htmlfiddle.net/


    Kommentar


    • #3
      MOD: Verschoben von PHP Einsteiger

      Kommentar


      • #4
        Zitat von tomBuilder Beitrag anzeigen
        moin,
        das ist kein php sondern css/html code (bitte in zukunft unterforum beachten)
        das ist kein lauffähiges beispie (html fehlt)

        für die zukunft: complexerer code lässt sich auch hier interaktiv bearbeiten:

        https://htmlfiddle.net/

        Sorry es war gestern schon ziemlich spät und das CSS Forum nicht auf Anhieb gefunden.
        an den CSS Code komme ich im Moment nicht ran, würde dann mal die index.php und die CSS zur Verfügung stellen.

        Danke.

        Kommentar


        • #5
          Zitat von Siggit2000 Beitrag anzeigen
          Wenn die Auflösung zwischen 501 und 959 px liegtwerden mir beide Container angezeigt.

          Code:
          @media screen and (min-width:500px) and (max-width:960px) {
          #social {
          display:none;
          }
          }
          In der CSS sind alle @media screen Angaben mit (max-width) angegeben. Ich komme da nicht weiter.
          Die Kombination von min-width und max-width sollte hier unnötig sein. Vielleicht hilft Dir diese Seite weiter:
          https://stackoverflow.com/questions/...h-vs-min-width
          Besonders dieser Abschnitt:
          What are Mobile-first and Desktop-first approaches?
          Aus heutiger Sicht ist der Mobile-first-Ansatz der bessere und wird z.B. auch vom CSS-Framework Bootstrap verwendet.

          HTML-Code:
          /*von 0 - 959 px */
          #social-desktop {
          display:none;
          }
          /* ab 960 px */
          
          @media (min-width: 960px) {  
             #social-desktop {  
                display:block;  
             }  
             #social-mobile {  
                display:none;  
             }
          }
          Am Anfang wird die Desktop-Version nicht angezeigt. Ab 960 wird sie angzeigt. Die Mobile-Version wird von Anfang an angezeigt und ab 960 ausgeblendet.

          Ohne das jetzt getestet zu haben.

          Kommentar

          Lädt...
          X