IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

barre de scroll


Sujet :

Défilement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Octobre 2013
    Messages : 7
    Par défaut barre de scroll
    Bonjour à tous

    J'ai un nouveau problème dans le développement de mon site :

    Sur ma page d'accueil j'ai des vignettes qui sont placées sur un scroll horizontal mais je n'aime pas beaucoup la présence de la barre de scroll, serait-il possible de la masquer et créer des flèches et un système d'ancres ? Un peut comme un slider ?
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    <div id="logo">
            	<a href="index.html">
    			<img src="img/logo.png" alt="Romain L'Hermite, étudiant en design graphique" />
    		</a>
    		</div>
     
     
        <div id="imgaccueil">
        	<div id="defileur">	
     
        	 <div class="imgaccueil">
            	<a href="dusangsurlecouduchat.html">
    			<img class ="imgaccueil2" src="img/dusangsurlecouduchataccueil.jpg" alt="Du sang sur le cou du chat" />
    		</a>
    		</div>
     
            <div class="imgaccueil">
            	<a href="fastout.html">
    			<img class ="imgaccueil2" src="img/fastoutaccueil.jpg" alt="Fast Out" />
    		</a>
    		</div>
     
     
             <div class="imgaccueil">
            	<a href="lgbt.html">
    			<img class ="imgaccueil2" src="img/jaquetteaccueil.jpg" alt="La jaquette, festival du cinéma gay, trans et lesbien" />
    		</a>
    		</div>
     
     
             <div class="imgaccueil">
            	<a href="compare.html">
    			<img class ="imgaccueil2" src="img/compareaccueil.jpg" alt="compare" />
    		</a>
    		</div>
     
             <div class="imgaccueil">
            	<a href="chut.html">
    			<img class ="imgaccueil2" src="img/chutaccueil.jpg" alt="chut" />
    		</a>
    		</div>
     
     
             <div class="imgaccueil">
            	<a href="popeye.html">
    	<img class ="imgaccueil2" src="img/popeyeaccueil.jpg" alt="Popeye" />
    		</a>
    		</div>
     
     
             <div class="imgaccueil">
            	<a href="laquinzaineduhiphop.html">
    			<img class ="imgaccueil2" src="img/hiphopaccueil.jpg" alt="La Quinzaine du Hip Hop" />
    		</a>
    		</div>
            </div>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    #defileur{
       height:560px;
       width:1130px;
          }
     
     
    #imgaccueil{
      z-index:5;
      float:left;
      position:absolute;
      height : 560px;
      width : 850px;  /* +283.2 */
      margin-left:280px;
      margin-top: 100px;
      overflow-y:hidden;
      overflow-x:scroll;
    }
     
     
    .imgaccueil{
      float:left;
        display:inline-block;
     
      height :270px;
      width : 270px;
      margin : 5px;
      border: 1.6px solid #F9094A; 
    }
     
    .imgaccueil2{
     
      filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
    -ms-filter: grayscale(1);
     
      transition-property:grayscale;
      transition-duration:0.2s;
      transition-timing-function:ease-in;
     
      -webkit-transition-property:grayscale;
      -webkit-transition-duration:0.2s;
      -webkit-transition-timing-function:ease-in;
     
      -moz-transition-property:grayscale;
      -moz-transition-duration:0.2s;
      -moz-transition-timing-function:ease-in;
     
    }
     
     
    .imageaccueil2:hover {  
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
    -ms-filter: grayscale(0);
     
    }
    En passant, je n'arrive pas à faire marcher mon grayscale ://

    Je vous remercie d'avance pour votre aide

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    En HTML pur tu vas avoir du mal, il va te falloir te tourner vers le javascript

  3. #3
    Invité
    Invité(e)
    Par défaut
    Bonjour,
    On peut rendre la barre transparente grace à un système d'encre sympathique à base de jus de six troncs.

    Dernière modification par Invité ; 03/12/2013 à 13h45.

  4. #4
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Octobre 2013
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Octobre 2013
    Messages : 7
    Par défaut
    Super drôle la blague de l'"e"ncre.

    Non mais sinon je galère assez franchement :X une aide un peu plus poussée est possible ?

    Merci

  5. #5
    Invité
    Invité(e)
    Par défaut
    As-tu vu cette discussion : un slider d'image uniquement en CSS3 ?
    => Créer une galerie d'images avec :target

    Sinon, pourquoi ne pas chercher un slider JavaScript/jQuery ?

Discussions similaires

  1. Barre de scroll avec un texte dynamique
    Par adlich dans le forum ActionScript 1 & ActionScript 2
    Réponses: 1
    Dernier message: 21/02/2008, 05h54
  2. Du scroll sans barre de scroll
    Par scougirou dans le forum Balisage (X)HTML et validation W3C
    Réponses: 13
    Dernier message: 24/04/2007, 11h56
  3. Owner Draw et barres de scroll
    Par Betcour dans le forum Delphi
    Réponses: 1
    Dernier message: 12/08/2006, 00h25
  4. Changer couleur barre de scroll
    Par °°° Zen-Spirit °°° dans le forum Balisage (X)HTML et validation W3C
    Réponses: 4
    Dernier message: 11/06/2006, 20h34
  5. [JScrollPane] Affichage dynamique des barres de scroll
    Par Atharendil dans le forum AWT/Swing
    Réponses: 2
    Dernier message: 14/01/2006, 21h07

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo