Ergebnis 1 bis 8 von 8

Thema: Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

  1. #1
    HTML Newbie
    Registriert seit
    26.03.2019
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

    Hallo zusammen,

    mein Programmierer ist untergetaucht und ich habe folgendes Problem (hat schonmal funktioniert und jetzt gehts plötzlich nicht mehr):

    Die Unterseiten haben einen Quickinfo Bereich der sich an der Seite ausfährt (auf der rechten Seite auch wenn es "_left" heißt :

    Code:
    /* Fixed Box Weiterbildung */
    
    div#fixed_left h3 {
        padding-bottom: 10px;
        padding-top: 10px;
        font-size: 17px;
    }
    
    div#fixed_left {
        display: block;
        position: fixed;
        right: -500px;
        top: 60%;
        box-shadow: 0px 0px 25px rgba(0,0,0,.4);
        background: #fff;
        padding: 15px;
        text-align: center;
        padding-right: 20px;
        transition: all ease-in-out .3s;
        z-index: 10000;
        transform: translateY(-50%);
    }
    
    @keyframes slideInFromLeft {
      0% {
        transform: translateX(120%);
      }
      100% {
        transform: translateX(0);
      }
    }
    
    div#fixed_left_info {
       
        background: url(/wp-content/themes/dt-the7-child/icons/info.png), #00a5b3;
        background-size: 80% !important;
        display: block;
        height: 222px;
        width: 80px;
        color: transparent;
        z-index: 10000;
        padding: 5px;
        background-repeat: no-repeat;
        background-position: top 10px center, top center;
        cursor: pointer;
        animation: 1s ease-out 0s 1 slideInFromLeft;
    }
    
    
    
    div#fixed_left_info:before {
        content: "Quick-Infos";
        text-transform: uppercase;
        transform: rotate(-90deg);
        width: 122px;
        font-size: 20px;
        position: relative;
        left: -22px;
        top: 114px;
        color: #fff;
        font-family: "HelveticaNeue-Bold", Helvetica, Arial, Verdana, sans-serif !important;
        border-right: 4px solid #fff;
        height: 40px;
        padding-top: 19px;
        margin-left: -5px;
    }
    
    div#fixed_left_info p {
        transform: rotate(-90deg);
        top: 60px;
        position: relative;
        display: block;
        font-size: 20px !important;
    }
    
    .weiterbildung_back p {
        width: 37px;
    }
    
    .weiterbildung_back a:before {
        content: "";
        display: inline-block;
        height: 10px;
        width: 10px;
        border-left: 1px solid #fff;
        border-top: 1px solid #fff;
        transform: rotate(-45deg);
        position: relative;
        left: -14px;
        top: 24px;
    }
    .weiterbildung_back a {
        color: #fff;
        text-decoration: none;
        font-family: "HelveticaNeue-Light";
        position: relative;
        top: -10px;
        left: 43px;
        font-size: 17px;
    }
    .weiterbildung_back {
        background: #9a9c9d;
        position: relative;
        width: 79px;
        top: 5px;
        right: -14px;
        padding-right: 0px;
        margin-left: -29px;
    }
    
    .weiterbildung_back p {
        margin-left: -17px !important;
    }
    
    #fixed_left.visible{
        right: 0px;
    }
    
    .fixed_left_close {
            position: absolute;
        right: -5px;
        font-size: 20px;
        background: #00a5b3;
        cursor: pointer;
        color: #fff;
        top: -15px;
        padding: 5px;
        padding-bottom: 0px;
        padding-top: 7px;
        padding-left: 7px;
    }
    
    .weiterbildung_anmeldung button {
        color: #fff;
        background: #00a5b3;
        border: none;
        padding: 10px 25px;
        width: 100%;
        text-transform: uppercase;
        font-size: 17px;
        padding-top: 15px;
        font-family: "HelveticaNeue-Bold", Helvetica, Arial, Verdana, sans-serif !important;
        line-height: 25px;
    }
    In der Mobilen Ansicht soll der Box-Inhalt unterhalb des SeitenContents angehängt sein. Derzeit überlagert er allerdings den kompletten Content:

    Code:
    @media only screen 
    and (max-width: 768px) { 
        .menu_horizontal{
            display: none;
        }
    
        .quickinfo_header{
            display: block;
        }
    
        .fixed_left_container .vc_column-inner {
        padding-left: 7.5px;
        padding-right: 7.5px;
    }
    
        .fixed_left_container {
            margin-left: 0px !important;
            border-left-width: 0px !important;
            padding-left: 0px !important;
            width: 100%;
        }
    
        .fixed_left_container .accent-border-color .uvc-headings-line {
        border-color: #00a5b3 !important;
        border-top: 0;
        border-right: 0;
        border-left: 0;
    }
    
        div#fixed_left_info {
            display: none;
        }
    
        .fixed_left_close{
            display: none;
        }
    
        div#fixed_left {
            display: block;
            position: relative;
            right: 0px;
            top: 0px;
            box-shadow: none;
            background: #fff;
            padding: 15px;
            text-align: center;
            padding-right: 00px;
            transition: none;
            z-index: unset;
            padding-left: 0px !important;
            margin-bottom: 10px;
        }
    Hat jemand eine Lösung? Wäre sehr dankbar um jegliche Hilfe. Der 2. Programmierer hat den Bereich einfach auskommentiert für die mobile Ansicht, das ist aber nicht gewünscht.

    Ein zweites Problem: Die Infobox liegt unterhalb des Headers und des Seitentitels. Kann man das irgendwo definieren, dass sie ganz "oben auf" liegt?

    Viele Grüße,
    Jasmin
    Geändert von Arne Drews (26.03.2019 um 11:37 Uhr) Grund: MOD: Code-Tags eingefügt

  2. #2
    HTML Newbie
    Registriert seit
    25.03.2019
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

    Hallo Jasmin,
    ich kann deine Probleme sichern icht direkt lösen, aber vielleicht ein paar Hinweise zu euerm Code:

    1. Problem:
    Die Position von div#fixed_left wurde für die mobile Ansicht von fixed auf relative gesetzt, das ist schon mal gut. Je nach dem wo im Quellcode dieses div steht erscheint es jetzt relativ zu seiner Position. Schaut mal ob sich Quickbox noch in einem div befindet das auch die Angabe relativ braucht.

    2. Problem:
    eigentlich müßte das mit der Angabe das z-index zu lösen sein. Schaut mal ob Header und Seitentitel einen höheren z-index haben als div#fixed_left

    viele Grüße
    Gina

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    26.03.2019
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

    Hallo gina,

    vielen Dank, hab zu 1. versucht dem div eine position zuzuweisen, hat aber keine Veränderung gebracht. vielleicht hat das auch was mit dem visual composer zu tun?

    zu 2. hab ich den z-index mit noch mehr nullen versehen leider auch ohn auswirkung.

    Viele Grüße,
    Jasmin

  4. #4
    HTML Newbie
    Registriert seit
    25.03.2019
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

    Hi Jasmin, mit Visual Composer kenne ich mich leider nicht aus ... (
    zu 2. ... haben Header und Seitentitel denn überhaupt einen z-index zugewiesen?
    Ich vermute mal das liegt an der "Verschachtelung" von div's, gerade wenn mit Pagebuildern gearbeitet wird. Ist auch nicht weiter schlimm, da müßte man genau rausbekommen was wo liegt ...

    Falls du einen Link zum Projekt direkt hast kann ich gerne mal auf die Seite schauen, ... ich weiss, bei Entwicklungsprojekte ist das immer ein bisschen schwierig ... aber im Browser kann man das halt alles besser analysieren ... ansonsten muss ich hier passen

    Viele Erfolg noch ... Gina

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    26.03.2019
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

    hab dir den link in einer PN geschickt

  6. #6
    HTML Newbie
    Registriert seit
    25.03.2019
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

    Hi Jasmin, also hab mir das ganze mal in der Browser-Konsole angeschaut.

    In der mobilen Version steht der z-index vom Header auf 102

    Wenn ich den z-index vom div#fixed_left auf 200 setze funktioniert es ...
    Dann liegt der Inhalt der Quickbox (also die Ansprechpartner) über dem Header.




    Problem 1:
    Also die Position der Box im Quelltext ist an der richtige Stelle, schön weit hinten hinter dem normalen Content ...

    das div#fixed_left_container in dem die Quickbox drinliegt hat allerdings noch die "fixed" CSS-Zuweisung aus der Desktop-Version. Und die ist auch noch als important! angegeben.
    position: fixed !important
    Wenn ich das im Browser einfach auf relativ stelle funktionierts ... achtet mal darauf das ihr das in der mobilen Version irgendwie mit "relativ" überschreibt ...




    Drück die Daumen das das funktioniert ...

    Viele Erfolg noch ... Gina

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    26.03.2019
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

    Gina, ich bin Dir so unendlich Dankbar, das kannst Dir gar ned vorstellen. Alles funktionert!!!

    Falls Du Freelancer bist meld Dich bitte nochmal bei mir, brauchen DRINGEND jemand wie Dich für unsere Websiten.

    Bin so happy

    Viele Grüße,
    Jasmin

  8. #8
    HTML Newbie
    Registriert seit
    25.03.2019
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Info-Box für mobile Geräte unterhalb des Seiten-Content anzeigen (Wordpress)

    Gern geschehen ... hast du meine PN gerade bekommen? Wird mir im Postfach irgendwie nicht angezeigt ... ...

Ähnliche Themen

  1. Bestehende Webseite für mobile Geräte optimieren.
    Von LinuxMan im Forum HTML & CSS Forum
    Antworten: 17
    Letzter Beitrag: 18.06.2017, 02:18
  2. Layout auf mobile Geräte anpassen
    Von Marco Rnr im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 19.04.2015, 20:23
  3. Anpassung für mobile Geräte - help?
    Von CallMeGates im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 11.11.2013, 09:58
  4. Navigation für mobile geräte
    Von Unregistriert im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 31.01.2013, 09:40
  5. Antworten: 3
    Letzter Beitrag: 04.12.2012, 00:28

Stichworte

Berechtigungen

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