Beiträge von betterhei

betterhei

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

betterhei

hab dir den link in einer PN geschickt

betterhei

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

betterhei

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 :):

CSS

[COLOR=#a9a9a9]/* 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;
}[/COLOR]

Alles anzeigen

In der Mobilen Ansicht soll der Box-Inhalt unterhalb des SeitenContents angehängt sein. Derzeit überlagert er allerdings den kompletten Content:

CSS

[COLOR=#a9a9a9]@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;
    }[/COLOR]

Alles anzeigen

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

Beiträge von betterhei

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

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

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

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