Wieso funktioniert transition(CSS) auf IPhone und IPad nicht?

1 Antwort

So wie ich das sehe, willst du, das der Button nach klicken um 50px weiter wird? Ist das dein Ziel?

Deine ganze transition verwirrt mich ganz schön.

Ich schreib das z.B. so (nur zur Info):
transition: width 500ms ease;
-o-transition: width 500ms ease;
-webkit-transition: width 500ms ease;
-moz-transition: width 500ms ease;

Kannst du mal deine Webseitenlink hier teilen dann schau ich es mir an.

LG damodade

Ja nach vielem hin und her ist die jetzige Version ziemlich unleserlich. Für gewöhnlich schreibe ich es fast genauso wie du. Es war lediglich nen versuch um auch wenigstens alles ausprobiert zu haben. Sobald ich wieder zu Hause bin schreibe ich dir gern den Link auch wenn da exakt das selbe sein wird... Naja vielleicht findest du ja das Problem würde mir auf jeden Fall um einiges mein Leben erleichtern. 

0

HTML + CSS fade out -> bester Weg?

Hey. Ich wollte heute so eine Art ToastMessage.js schreiben. Der Toast soll sowas sein wie in Android. Ich habe es auch ziemlich gut geschafft, nur halt ohne fade. Mein Toast ist ein DIV mit einem SPAN darin. Das DIV Element ist von der position her FIXED. Was ist eurer Meinung nach der beste weg, es unsichtbar zu machen mit fading?

Also ich habe versucht (habe den DIV mit einer transition versehen):

DISPLAY: NONE zu BLOCK -> es fadet nicht, einfach weg.

VISIBILITY: HIDDEN zu VISIBLE -> es fadet nicht, bleibt die 0.5s Transition am Bildschirm und verschwindet dann.

OPACITY: 0 zu 1 -> naja hat geklappt, allerdings nicht so toll, da kann man keinen Butten dahinter drücken, weil ich es immer im hintergrund habe.

Ich will es womöglich OHNE CSS @keyframes machen. Das stört mich, auch wenn es möglicherweise besser wäre. Ich habe einfach im javascript eine funktion, die macht das hier:

element.style.display = "block" bzw. opacity oder visibility.

Danke.

...zur Frage

Gibt es eine andere Alternative zu "column-count" in CSS?

Ich möchte es so machen dass es auch auf alten Browsern funktioniert.

http://www.w3schools.com/css/css3_multiple_columns.asp

.columns { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2;}

...zur Frage

CSS Animation funktioniert nicht unter Firefox und Internet Explorer

Hallo Leute, ich hab ne Animation mit CSS gemacht die funktioniert auch super unter Chrome nur unter Firefox und Internet Explorer tut sich nix. Kann mir jemand helfen?

    @-webkit-keyframes background-change {
    0% {
        background: url('../img/frankfurt_skyline.jpg');
        -webkit-background-size: 100% 100%;
    }
    25% {
        background: url('../img/frankfurt_alte_oper.jpg');
        -webkit-background-size: 100% 100%;
    }
    50% {
        background: url('../img/frankfurt_roemerberg.jpg');
        -webkit-background-size: 100% 100%;
    }
    75% {
        background: url('../img/frankfurt_bild.jpg');
        -webkit-background-size: 100% 100%;
    }
    100% {
        background: url('../img/frankfurt_skyline.jpg');
        -webkit-background-size: 100% 100%;
    }
}
    @-moz-keyframes background-change {
        0% {
            background: url('../img/frankfurt_skyline.jpg');
            -moz-background-size: 100% 100%;
        }
        25% {
            background: url('../img/frankfurt_alte_oper.jpg');
            -moz-background-size: 100% 100%;
        }
        50% {
            background: url('../img/frankfurt_roemerberg.jpg');
            -moz-background-size: 100% 100%;
        }
        75% {
            background: url('../img/frankfurt_bild.jpg');
            -moz-background-size: 100% 100%;
        }
        100% {
            background: url('../img/frankfurt_skyline.jpg');
            -moz-background-size: 100% 100%;
        }
    }
    @keyframes background-change {
        0% {
            background: url('../img/frankfurt_skyline.jpg');
            background-size: 100% 100%;
        }
        25% {
            background: url('../img/frankfurt_alte_oper.jpg');
            background-size: 100% 100%;
        }
        50% {
            background: url('../img/frankfurt_roemerberg.jpg');
            background-size: 100% 100%;
        }
        75% {
            background: url('../img/frankfurt_bild.jpg');
            background-size: 100% 100%;
        }
        100% {
            background: url('../img/frankfurt_skyline.jpg');
            background-size: 100% 100%;
        }
    }

animation: background-change 18s ease-in-out infinite;
-moz-animation: background-change 18s ease-in-out infinite;
-webkit-animation: background-change 18s ease-in-out infinite

Wäre super wenn ihr mir helfen könntet.

...zur Frage

WordPress Menü fixieren?

Hallo, ich würde gerne mein Menü fixieren. Wie gebe ich das genau ein? Ich weiß das diese Frage schon gestellt wurde, habe es aber nicht geschafft mit fixed. Kenn mich da überhaupt nicht aus, bin mir nicht mal genau sicher ob ich die richtige Stelle raus gesucht habe^^. Alles was ich bisher gemacht habe sah echt komisch dann aus...

Wäre sehr dankbar für eure Hilfe!

2.0 Menu
    --------------------------------------------------------------*/
    .main-navigation {
        position: realtive;
        clear: both;
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        box-shadow: 0 0 1px #adadad;
        background-color: rgba(60, 60, 60, 0.8);
        z-index: 999;
    }
    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .main-navigation li {
        position: relative;
        display: inline-block;
        padding: 20px 10px;
        font-size: 13px;
        text-transform: uppercase;
        -webkit-transition: all 0.4;
        transition: all 0.4s;
    }
    .main-navigation li:hover {
        background-color: #fbb829;
    }
    .main-navigation li:hover > a {
        color: #fff !important;
    }
    .main-navigation a {
        display: block;
        text-decoration: none;
        color: #fbb829;
        -webkit-transition: all 0.4;
        transition: all 0.4s;   
    }
    .main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        float: left;
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 99999;
        text-align: left;
        background-color: rgba(60, 60, 60, 0.8);
    }
    .main-navigation ul ul ul {
        left: -999em;
        top: 0;
    }
    .main-navigation ul ul a {
        width: 200px;
        color: #fff !important;
    }
    .main-navigation ul ul li {
        padding: 10px;
        text-transform: none;
        border-bottom: 1px solid #505050;
    }
    .main-navigation ul ul li:last-child {
        border-bottom: 0;
    }
    .main-navigation li:hover > a {
    }
    .main-navigation ul ul :hover > a {
    }
    .main-navigation ul ul a:hover {
    }.main-navigation {
        position: relative;
        clear: both;
        display: block;
        float: left;
        width: 100%;
        text-align: center;
        box-shadow: 0 0 1px #adadad;
        background-color: rgba(60, 60, 60, 0.8);
        z-index: 999;
    }
    .main-navigation ul {
        list-style: none;
        margin: 0;
        padding-left: 0;
    }
    .main-navigation li {
        position: relative;
        display: inline-block;
        padding: 20px 10px;
        font-size: 13px;
        text-transform: uppercase;
        -webkit-transition: all 0.4;
        transition: all 0.4s;
    }
    .main-navigation li:hover {
        background-color: #fbb829;
    }
    .main-navigation li:hover > a {
        color: #fff !important;
    }
    .main-navigation a {
        display: block;
        text-decoration: none;
        color: #fbb829;
        -webkit-transition: all 0.4;
        transition: all 0.4s;   
    }
    .main-navigation ul ul {
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
        float: left;
        position: absolute;
        top: 100%;
        left: -999em;
        z-index: 99999;
        text-align: left;
        background-color: rgba(60, 60, 60, 0.8);
...zur Frage

Warum finden fast alle Programmieren langweilig und sinnlos?

Hi, in der Schule oder woanders höre ich immer oder fast immer, dass manche Menschen Folgendes sagen: „Ja programmieren ist voll öde oder langweilig und die Programmierer, die sind bescheuert...“ – obwohl ich selber in C++ und Swift programmiere, aber auch in der Markup-Sprache HTML bin ich unterwegs.

Und es ist überhaupt nicht sinnlos, denn fast alles was mit Computern zu tun hat, muss ja programmiert werden. Ich verstehe es einfach nicht, wie man das sagen darf/kann. Könnt ihr mir da etwas helfen, auch wenn es da nichts zum Helfen gibt. Danke im Voraus!

...zur Frage

Warum ist da ein weißer Rand?

Hey, ich habe eine Frage zu HTML.

Ich habe bis jetzt diese Navigationleiste erarbeitet, weiß jedoch nicht wieso dort ein weißer Rand ist?

Könnt ihr mir helfen?

Das ist der HTML Code:

<nav id="nav">
<ul>
<li class="current" style="white-space: nowrap;">
<a href="">Home</a>
</li>
<li style="white-space: nowrap;">
</li>
<li style="white-space: nowrap;">
<a href="">Neumöbellogistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Lager & Logistik</a>
</li>
<li style="white-space: nowrap;">
<a href="">Werkstatt</a>
</li>
<li style="white-space: nowrap;">
<a href="">Kontakte</a>
</li>
</ul>
</nav>

----------------------------------------------------------------------------------------------------------------------------------

Und das der CSS code:

#nav {
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background-color: rgba(255, 255, 255, 0.95);
background-image: url("C:\Users\liam\Desktop\CT\Headerline.png");
width: 100%;
height: 3.25em;
line-height: 3.25em;
text-align: center;
font-family: 'Open Sans Condensed', sans-serif;
font-weight: 700;
text-transform: uppercase;
cursor: default;
}
#nav ul {
position: relative;
z-index: 1001;
}
#nav li {
display: inline-block;
top: 0;
position: relative;
-moz-transition: top .15s ease-in-out;
-webkit-transition: top .15s ease-in-out;
-o-transition: top .15s ease-in-out;
-ms-transition: top .15s ease-in-out;
transition: top .15s ease-in-out;
}
#nav li > ul {
display: none;
}
#nav li a, #nav li span {
-moz-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-webkit-transition: background-color .075s ease-in-out, color .075s ease-in-out;
-ms-transition: background-color .075s ease-in-out, color .075s ease-in-out;
transition: background-color .075s ease-in-out, color .075s ease-in-out;
position: relative;
display: block;
text-decoration: none;
color: #6b7770;
top: -6px;
padding: 6px 1.5em 0.25em 1.5em;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
outline: 0;
}
#nav li:hover, #nav li.active {
top: 3px;
}
#nav li:hover a, #nav li:hover span {
background: #C1CAC5;
color: #fff;
}
#nav li.active a, #nav li.active span {
background: #C1CAC5;
color: #fff;
}
#nav li.current a {
background: #b1ddab;
color: #fff;
}

----------------------------------------------------------------------------------------------------------------------------------

Ich hoffe ihr könnt mir helfen!

...zur Frage

Was möchtest Du wissen?