Beiträge von Nissa3

Nissa3

Hallo zusammen,

ich habe ein Problem mit meiner Slideshow. Habe sie in IE, Opera, Chrome, Firefox und Safari getestet. Überall läuft sie ohne Probleme nur eben im Safari nicht. Dort sehe ich lediglich die Hintergrundfarbe des div. Habe über die Suche hier leider nichts gefunden. Benutze noch eine andere Slideshow auf der Seite die funktioniert in allen Browsern ohne Probleme, zuerst hatte ich auch das -webkit- vergessen aber nachdem ich das nun eingefügt habe funktioniert es trotzdem nicht. Hab ich es noch irgendwo vergessen oder was anderes?

Anbei der Quelltext

HTML

Code

<div id="stapel">
    <figure>
        <img src="bild1.jpg">
    </figure>
    <figure>
        <img src="bild2.jpg">
    </figure>
    <figure>
        <img src="bild3.jpg">
    </figure>
    <figure>
        <img src="bild4.jpg">
    </figure>
    <figure>
        <img src="bild5.jpg">
    </figure>
</div>

Alles anzeigen

CSS

Code

/* Slideshow Logos */
#stapel {
    position: relative;
    background: #000;
    height: 45px;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}


#stapel figure {
    position: absolute;
    margin: 0;
    opacity: 0;
}


#stapel figcaption {
    position: relative;
    color: #444;
    font: 1.5em/2.5 Verdana, Arial, serif;
    text-transform: uppercase;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background: rgba(255, 255, 255, .7);
    border: 1px solid #fff;
    border-left: 0;
    height: 2.9em;
    width: 12.4em;
    bottom: 80px;
    left: -320px;
    transition: .5s;
}


#stapel:hover figcaption {
    left: 0;
}
#stapel figure:nth-of-type(1) {
    -webkit-animation: bild 60s ease-in-out infinite;
    -o-animation: bild 60s ease-in-out infinite;
    -moz-animation: bild 60s ease-in-out infinite;
    animation: bild 60s ease-in-out infinite;
}
#stapel figure:nth-of-type(2) {
    -webkit-animation: bild 60s 12s ease-in-out infinite;
    -o-animation: bild 60s 12s ease-in-out infinite;
    -moz-animation: bild 60s 12s ease-in-out infinite;
    animation: bild 60s 12s ease-in-out infinite;
}
#stapel figure:nth-of-type(3) {
    -webkit-animation: bild 60s 24s ease-in-out infinite;
    -o-animation: bild 60s 24s ease-in-out infinite;
    -moz-animation: bild 60s 24s ease-in-out infinite;
    animation: bild 60s 24s ease-in-out infinite;
}
#stapel figure:nth-of-type(4) {
    -webkit-animation: bild 60s 36s ease-in-out infinite;
    -o-animation: bild 60s 36s ease-in-out infinite;
    -moz-animation: bild 60s 36s ease-in-out infinite;
    animation: bild 60s 36s ease-in-out infinite;
}
#stapel figure:nth-of-type(5) {
    -webkit-animation: bild 60s 48s ease-in-out infinite;
    -o-animation: bild 60s 48s ease-in-out infinite;
    -moz-animation: bild 60s 48s ease-in-out infinite;
    animation: bild 60s 48s ease-in-out infinite;
}


@-webkit-keyframes bild {
      0%,    {left:-870px; opacity:0; z-index:0;}
      3.33%, {left:0;      opacity:1; z-index:1;}
     20%     {left:0;      opacity:1; z-index:1;}
     23.33%  {left: 870px; opacity:0; z-index:0;}
    100%     {left:-870px; opacity:0; z-index:0;}
}
@-webkit-keyframes bild {
     3.33%,  20% {left:0;      opacity:1; z-index:1;}
    23.33%       {left: 870px; opacity:0; z-index:0;}
        0%, 100% {left:-870px; opacity:0; z-index:0;}
}




@-moz-keyframes bild {
      0%,    {left:-870px; opacity:0; z-index:0;}
      3.33%, {left:0;      opacity:1; z-index:1;}
     20%     {left:0;      opacity:1; z-index:1;}
     23.33%  {left: 870px; opacity:0; z-index:0;}
    100%     {left:-870px; opacity:0; z-index:0;}
}
@-moz-keyframes bild {
     3.33%,  20% {left:0;      opacity:1; z-index:1;}
    23.33%       {left: 870px; opacity:0; z-index:0;}
        0%, 100% {left:-870px; opacity:0; z-index:0;}
}




@-o-keyframes bild {
      0%,    {left:-870px; opacity:0; z-index:0;}
      3.33%, {left:0;      opacity:1; z-index:1;}
     20%     {left:0;      opacity:1; z-index:1;}
     23.33%  {left: 870px; opacity:0; z-index:0;}
    100%     {left:-870px; opacity:0; z-index:0;}
}
@-o-keyframes bild {
     3.33%,  20% {left:0;      opacity:1; z-index:1;}
    23.33%       {left: 870px; opacity:0; z-index:0;}
        0%, 100% {left:-870px; opacity:0; z-index:0;}
}




@keyframes bild {
      0%,    {left:-870px; opacity:0; z-index:0;}
      3.33%, {left:0;      opacity:1; z-index:1;}
     20%     {left:0;      opacity:1; z-index:1;}
     23.33%  {left: 870px; opacity:0; z-index:0;}
    100%     {left:-870px; opacity:0; z-index:0;}
}
@keyframes bild {
     3.33%,  20% {left:0;      opacity:1; z-index:1;}
    23.33%       {left: 870px; opacity:0; z-index:0;}
        0%, 100% {left:-870px; opacity:0; z-index:0;}
}

Alles anzeigen

Hat sich erledigt habe den Fehler gefunden, Beitrag kann gelöscht werden.

Nissa3

Hi MrMurphy,

super vielen Dank für die ausführliche Erklärung und Hilfe. Prima, genauso wollte ich es haben.

Das mit dem schwarz und Schatten bezog sich auf die Zeilen im Code für nav .cl-effect-7 a, da verstehe ich nicht was da schwarz und mit Schatten sein soll.

Code

nav .cl-effect-7 a {
    outline: none;
    [COLOR=#ff0000]color: #000;[/COLOR]
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    [COLOR=#ff0000]text-shadow: 0 0 1px rgba(255,255,255,0.3);[/COLOR]
    font-size: 1.35em;
}

Nissa3

Hallo zusammen,

bin neu hier und auch (noch) kein wirklicher Profi in CSS & HTML.

Ich habe mir ein Beispiel für ein Menu aus dem Internet runtegeladen. Nun komme ich an einer Stelle aber nicht weiter. Und zwar möchte ich das, wenn ich auf z.B. der Startseite bin diese im Menu andersfarbig und mit beiden Linien angezeigt wird, also so wie wenn ich bei den nichtaktiven mit der Maus drüber gehe. Ich komme leider nur soweit das die Schriftfarbe gelb ist aber die zweite, obere Linie einfach nicht angezeigt wird. Was mich auch stört ist, das ich trotzdem einen Link setzen muss. Kann man das nicht einfacher lösen mit <p> oder so?

Wozu dient eigentlich auch das

Code

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

ganz am Anfang der css?

Die Deklaration bei nav .cl-effect-7 a verstehe ich auch nicht ganz denn einen Schatten sehe ich nicht und die Textfarbe ist auch nicht schwarz.

Ich hoffe mir kann jemand, helfen und den Quelltext ein wenig erklären. Inzwischen ist wohl vieles im Code überflüssig oder doppelt und dreifach, durch mein hin und her probieren.

HTML Code:

Code

<nav>
<ul>
<li class="cl-effect-7b"><a href="#cl-effect-7">Start</a></li>
<li class="cl-effect-7"><a href="#cl-effect-7">Unternehmen</a></li>
<li class="cl-effect-7"><a href="#cl-effect-7">Portfolio</a></li>
<li class="cl-effect-7"><a href="#cl-effect-7">Anfahrt</a></li>
</ul>
</nav>

CSS Code:

Code

*,
*:after,
*::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


body {
    font-family: 'Raleway', sans-serif;
}
ul{
    text-align:center;
    }
li {
    display:inline-block;
}


nav .cl-effect-7 a {
    outline: none;
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


nav .cl-effect-7 a:hover,
nav .cl-effect-7 a:focus {
    outline: none;
}


/* Effect 7: second border slides up */
.cl-effect-7 a {
    padding: 2px 10px 0px;
    color: #566473;
    text-shadow: none;
    font-weight: 700;
}


.cl-effect-7 a::before,
.cl-effect-7 a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #566473;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    transform: scale(0.85);
}


.cl-effect-7 a::after {
    opacity: 0;
    -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s;
}


.cl-effect-7 a:hover::before,
.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::before,
.cl-effect-7 a:focus::after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}


.cl-effect-7 a:hover::after,
.cl-effect-7 a:focus::after {
    top: 0%;
    opacity: 1;
}


/*active*/
.cl-effect-7 a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #566473;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


.cl-effect-7 a:hover,
.cl-effect-7 a:focus {
    outline: none;
}


/* Effect 7: second border slides up */
nav .cl-effect-7 a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #566473;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


nav .cl-effect-7 a:hover,
nav .cl-effect-7 a:focus {
    outline: none;
}


/* Effect 7: second border slides up */
nav ul{
    text-align:center;
    }

nav li{
    display:inline-block;
}


nav .cl-effect-7b a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fc0;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


nav .cl-effect-7b a:hover,
nav .cl-effect-7b a:focus {
    outline: none;
}


.cl-effect-7b a {
    padding: 2px 10px 0px;
    color: #fc0;
    text-shadow: none;
    font-weight: 700;
}


.cl-effect-7b a::before,
.cl-effect-7b a::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 3px;
    background: #fc0;
    content: '';
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
    -webkit-transform: scale(0.85);
    -moz-transform: scale(0.85);
    transform: scale(0.85);
}


.cl-effect-7b a::after {
    opacity: 0;
    -webkit-transition: top 0.3s, opacity 0.3s, -webkit-transform 0.3s;
    -moz-transition: top 0.3s, opacity 0.3s, -moz-transform 0.3s;
    transition: top 0.3s, opacity 0.3s, transform 0.3s;
}


.cl-effect-7b a:hover::before,
.cl-effect-7b a:hover::after,
.cl-effect-7b a:focus::before,
.cl-effect-7b a:focus::after {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    transform: scale(1);
}


.cl-effect-7b a:hover::after,
.cl-effect-7b a:focus::after {
    top: 0%;
    opacity: 1;
}


/*active*/
.cl-effect-7b a {
    position: relative;
    display: inline-block;
    outline: none;
    color: #fc0;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    text-shadow: 0 0 1px rgba(255,255,255,0.3);
    font-size: 1.35em;
}


.cl-effect-7b a:hover,
.cl-effect-7b a:focus {
    outline: none;
}

Alles anzeigen

Gefunden habe ich das Menu hier

Beiträge von Nissa3

Kleine Slideshow ohne JS funktioniert nicht in Safari

Horizontales Menü mit Style des aktiven Link

Horizontales Menü mit Style des aktiven Link