[CSS] Galleria immagini non funziona

iTonto

Utente Attivo
8 Feb 2018
107
2
18
www.fiverr.com
Sto tentando di ricreare la galleria immagini di questo tutorial però nonostante abbia seguito alla lettera le istruzioni non funziona.

A me viene così:

Cattura.jpg


HTML:
<!DOCTYPE html>

<html lang="en">

<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="html5shiv.js"></script>
</head>

<body>
    <div id="container">
        <header>
            <h1>Animated Photo Banner</h1>
            <p>An animated banner of photos that automatically scrolls horizontally through an infinite loop. The best part: no JavaScript!
            It also uses individual images inserted via HTML, not simply one long repeating CSS background. <a href="http://designshack.net/articles/css/infinitephotobanner/">Click here</a>
            to return to the tutorial on Design Shack.</p>
        </header>
        
        <!-- Each image is 350px by 233px -->
        <div class="photobanner">
            <img class="first" src="image-1.jpg" alt="" />
            <img src="image-2.jpg" alt="" />
            <img src="image-3.jpg" alt="" />
            <img src="image-4.jpg" alt="" />
            <img src="image-5.jpg" alt="" />
            <img src="image-6.jpg" alt="" />
            <img src="image-1.jpg" alt="" />
            <img src="image-2.jpg" alt="" />
            <img src="image-3.jpg" alt="" />
            <img src="image-4.jpg" alt="" />
        </div>
    </div>
</body>

</html>

Codice:
* {
            margin: 0;
            padding: 0;
        }
 
        body {
            <!-- src: http://subtlepatterns.com/?p=1045 -->
            background: url('dark_geometric.png');
        }
 
        #container {
            width: 1000px;
            overflow: hidden;
            margin: 50px auto;
            background: white;
        }
        
                            /*header*/

        header {
            width: 800px;
            margin: 40px auto;
        }
 
        header h1 {
            text-align: center;
            font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
 
        }
 
        header p {
            font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
            text-align: justify;
        }
 
                            /*photobanner*/
 
        .photobanner {
            height: 233px;
            width: 3550px;
            margin-bottom: 80px;
        }
        
        .photobanner img {
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            -ms-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

        .photobanner img:hover {
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.1);
            -o-transform: scale(1.1);
            -ms-transform: scale(1.1);
            transform: scale(1.1);
            cursor: pointer;
            -webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
            -moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
            box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
        }
        
                            /*keyframe animations*/

        .first {
            -webkit-animation: bannermove 30s linear infinite;
            -moz-animation: bannermove 30s linear infinite;
            -ms-animation: bannermove 30s linear infinite;
            -o-animation: bannermove 30s linear infinite;
            animation: bannermove 30s linear infinite;
        }
 
        @keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 
        @-moz-keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 
        @-webkit-keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 
        @-ms-keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 
        @-o-keyframes bannermove {
            0% {margin-left: 0px;}
            100% {margin-left: -2125px;}
        }
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Cosa vuoi dire che a te le immagini si dispongono su due righe senza scorrere?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Ci viene difficile trovare l'errore perchè dovremmo seguire il tutorial creare una galleria e confrontare con la tua!
Ma non avendo le tue immagini il tuo js sarebbe un'impresa!
Invece sarebbe molto più semplice aiutarti se potessimo vedere la pagina e il comportamento online
 

iTonto

Utente Attivo
8 Feb 2018
107
2
18
www.fiverr.com
No va bè evidentemente FF e IE mi si sono rincoglioniti, su fiddle funziona: https://jsfiddle.net/uo8had7u/6/
Non capisco è la stessa storia dei pallini della <ul> o_O

EDIT: se uso le immagini online va anche da me, che strano...
EDIT 2: trovato l'errore, c'era un "." di troppo nel nome del file CSS...:D
 
Ultima modifica:

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Ma con IE ti va? Non credo c'è un errore nel tuo codice e anche nel codice in fifdle
 

iTonto

Utente Attivo
8 Feb 2018
107
2
18
www.fiverr.com
Adesso va anche con IE. L'errore non era nel codice ma nel nome del file css, nel'html lo avevo linkato come "style.css" ma per sbaglio avevo aggiungto un "." di troppo nel nome del css (style..css). Mi è bastato togliere il punto di troppo per far combaciare il nome del css con quello nel'html et voilà...funziona alla perfezione. :D
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Qurllo del punto l'ho capito ma se tu guardi il tuo codice il file html5shiv.js penso non venga caricato e se per caso tu lo hai nella cartella e si carica non è inserito nel codice apposito per IE, perchè quel file .JS è un file che serve per alcune versioni di IE
 

marino51

Utente Attivo
28 Feb 2013
3.041
192
63
Lombardia
EDIT 2: trovato l'errore, c'era un "." di troppo nel nome del file CSS
sai che non lo vedo il punto di troppo nel codice che hai postato ....
HTML:
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="html5shiv.js"></script>
</head>
ma con un atto di fede, ci credo
 

iTonto

Utente Attivo
8 Feb 2018
107
2
18
www.fiverr.com
Qurllo del punto l'ho capito ma se tu guardi il tuo codice il file html5shiv.js penso non venga caricato e se per caso tu lo hai nella cartella e si carica non è inserito nel codice apposito per IE, perchè quel file .JS è un file che serve per alcune versioni di IE
Guarda, con IE 11 la galleria funziona come dovrebbe, con le altre versioni di IE non saprei...

sai che non lo vedo il punto di troppo nel codice che hai postato ....
HTML:
<head>
    <title></title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="html5shiv.js"></script>
</head>
ma con un atto di fede, ci credo
Il punto in più non era nel link dell'HTML ma nel nome del file css che era in cartella.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.407
339
83
Se con la 11 fimziona il codice così è comunque sbagliato e non serve a nulla se un utente usa una versione diversa!
Poi fai come vuoi
 

iTonto

Utente Attivo
8 Feb 2018
107
2
18
www.fiverr.com
Si ma tanto quella che ho postato era solo una prova per capire come funziona la galleria, il file .js non lo userò. Che poi l'ha detto quello che ha fatto il tutorial di aggiungerlo non è stata una mia idea. :p
 
Discussioni simili
Autore Titolo Forum Risposte Data
V Galleria con CSS e Javascript Javascript 2
I Perchè devo cliccare 2 volte su un link per caricare correttamente il css di una galleria? WordPress 1
B galleria css Javascript 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 0
Z CSS Slideshow senza JS e JQUERY HTML e CSS 2
S problema con css bootstrap3 HTML e CSS 4
L Sovrascrivere CSS iframe su dominio diverso WordPress 0
E CSS non riconosciuto PHP 1
Shyson [CSS] Posizionare casella di ricerca HTML e CSS 3
Shyson Centrare box css HTML e CSS 2
R Primo script in PHP / CSS PHP 4
S non funzionano alcuni effetti (bottone futuristico creato con css) HTML e CSS 1
V [CSS] Uso degli id HTML e CSS 2
I creazione stile css HTML e CSS 3
M [Javascript] Canvas js css Javascript 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
P [WordPress] Messaggio di errore in file style.css WordPress 0
D Aggiungere file .css esterno su Android HTML e CSS 4
F [JavaScript] Ottenere il CSS dopo transform: scale() e transform-origin Javascript 0
StephenSoftware Flexbox: definizione nel CSS HTML e CSS 4
Tommy03 Variabile PHP per impostare una proprietà CSS PHP 2
R javascript lettura css cross-browser Javascript 1
U [WordPress] [CSS] Come faccio a spostare più in basso lo slider WordPress 0
L [Javascript]Alternativa al position:sticky nel CSS Javascript 0
A Strumenti per filtrare il css HTML e CSS 1
S Il Css non si aggiorna, svuotata cache HTML e CSS 6
N [css] :active HTML e CSS 1
Shyson [WordPress] [CSS] Formattare casella WordPress 0
Shyson [CSS] Titolo del sito cambia dimensione HTML e CSS 2
A icone css in selectmenu jQuery 2
M Problematica CSS (tag html,body) HTML e CSS 4
W [C#] Il componente "WebBrowser" non mi esegue css e javascript .NET Framework 0
W inclusioni css in eccesso, cosa fare? HTML e CSS 1
M [WordPress] Modifiche CSS su lightbox WordPress 2
T countdown da sistemare con i CSS... HTML e CSS 4
Y Finestra dialogo CSS Modal HTML e CSS 6
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
D How to learn HTML and CSS? HTML e CSS 2
M CSS posizionamento stile HTML e CSS 2
I [HTML/CSS] Consigli sul mio primo sito HTML e CSS 9
C CSS pagina a schermo intero HTML e CSS 3
V Menù CSS da file in cartella esterna HTML e CSS 4
Koboshi Cambiare il css di una pagina con tasto "on off" HTML e CSS 5
V [WordPress] Come modificare link in tasto menu css WordPress 21
S [Javascript] [CSS] Spazio Bianco tra Slider e Menu foto Javascript 6
M [css][php] codice php esterno non vede il css PHP 6
J XML e css XML 0
L Navbar dropdown con Bootstrap: link ai css CMS (Content Management System) 4
paloppa Bootstrap.min.css modificare il file HTML e CSS 6

Discussioni simili