Scroll sur un bloc

19 juillet 2018 à 3:07:47

Bonjour,

J'ai un bloc où il y'a des images et dans ce bloc on peut scroller "manuellement"(scroller avec le clic gauche de la souris manuellement en gros c'est une barre de défilement horizontale) mais moi je veux que l'on puisse scroller avec la mollette de la souris horizontalement quand mon curseur est dans ce bloc.

Je pense qu'il faut utiliser du javascript alors je me tourne vers vous !

Svp je galère depuis des heures à trouver, j'espère que vous pourrez m'aider, merci ;)

je met la réponse à la suite de mon msg car je peux en envoyer d'autres :

Je n'utilise pas wordpress, juste du html/css :

Mon code html :

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

<head>

<link rel="icon" type="image/png" href="C:\Users\Megaport\Desktop\macstreaming.com\images\logo.png" >

<link rel="stylesheet" href="C:\Users\Megaport\Desktop\macstreaming.com\css.css">

<title>MACSTREAMING</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css"> 

#madiv{height:100pt;overflow:auto} 

</style> 

    </head>

<body>

<h2><a title="Films" href="C:\Users\Megaport\Desktop\macstreaming.com\films.html" class="size50px Luckiest rouge shadow" style="float: left" ><div style="margin-left: 250px">FILMS</a></h2><h2><a title="Séries" href="C:\Users\Megaport\Desktop\macstreaming.com\séries.html" class="size50px Luckiest rouge shadow" style="float: right" ><div style="margin-right: 250px">SERIES</a></h2><h1 class="center"><a title="Menu" href="C:\Users\Megaport\Desktop\macstreaming.com\index.html">MACSTREAMING.COM<a></h1>

<div class="recherche_p">



<center><form action="/search" id="searchthis" method="get">

<input id="search" name="q" type="text" placeholder="Rechercher un film, série ..." />

<input id="search-btn" type="submit" value="Rechercher" />

</form>

<style type='text/css'>



</style>

</center>



</div>



<center><a><h3 class="center rouge size50px shadow "> Films à l'affiche:<br></a>

<center><div  class="block"><nobr><a><img src="C:\Users\Megaport\Desktop\macstreaming.com\images\avenger.jpg" title="Avenger">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\love simon.jpg" title="Love Simon" alt="Avenger">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\jurassic world 2.jpg" title="Jurassic World 2" alt="Jurassic World 2">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\deadpool2.jpg" title="Dead Pool 2" alt="Dead Pool 2">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\death wish.jpg" title="Death Wish" alt="Death Wish">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\taxi 5.jpg" title="Taxi 5" alt="Taxi 5">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\rampage.jpg" title="Rampage: Hors de contrôle" alt="Rampage: Hors de contrôle">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\ready.jpg" title="Ready Player One" alt="Ready Player One"><!-- <nobr> = aligner des images -->

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\solo.jpg" title="Solo: A Star Wars Story" alt="Solo: A Star Wars Story"></a></nobr></div></center>

</h3></center>

<center><a><h3 class="center rouge size50px shadow "> Séries à l'affiche:<br></a>

 <center><div class="block"><a><nobr><img src="C:\Users\Megaport\Desktop\macstreaming.com\images\got.jpg" title="Game Of Thrones" alt="Game Of Thrones">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\TWD.jpg" title="The Walking Dead" alt="The Walking Dead">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\bd.jpg" title="Breaking Bad" alt="Breaking Bad">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\casa.jpg" title="La Casa De Papel" alt="La Casa De Papel">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\stranger.jpg" title="Stranger Things" alt="Stranger Things">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\vikings.jpg" title="Vikings" alt="Vikings">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\Riverdale.jpg" title="Riverdale" alt="Riverdale">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\les 100.jpg" title="Les 100" alt="Les 100">

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\flash.jpg" title="The Flash" alt="The Flash"></a></nobr></div></center>

</h3></center>











<footer><center><a class="rouge shadow" href="mailto:mrmaclevine@gmail.com">Me contacter</a></center></footer>



</body>

Mon code css:

@font-face {

    font-family: 'luckiest_guyregular';

    src: url('luckiestguy-webfont.eot');

    src: url('luckiestguy-webfont.eot?#iefix') format('embedded-opentype'),

         url('luckiestguy-webfont.woff2') format('woff2'),

         url('luckiestguy-webfont.woff') format('woff'),

         url('luckiestguy-webfont.ttf') format('truetype'),

         url('luckiestguy-webfont.svg#luckiest_guyregular') format('svg');

    font-weight: normal;

    font-style: normal;



}



body

{background: url("images/halo.jpg")no-repeat fixed}

#searchthis #search-btn {

  background-color: #E8B960;   /* Couleur de fond */

  border-style: outset;   /* Style de la bordure  */

  border-color: #000000;   /* Couleur de la bordure  */

  width: 7%;   /* Permet d'ajuster la largeur du bouton à 100% */

  box-sizing: border-box;   /* Important */

  font-family: Luckiest;   /* Police du texte */

  font-size: 13px;   /* Taille de la police du texte */

  font-weight: normal;   /* Graisse du texte : normal = normal ; bold = gras */

  letter-spacing: 2px;   /* Espacement des caractères */

  margin: 10px 0 0 0;   /* Espace autour du bouton : haut droite bas gauche  */

  text-transform: uppercase;   /* Transforme le texte en majuscules */

  color: #ffffff;   /* Couleur du texte */

}





.rouge                   /* ...... Permet de référencier par rapport à ce qu'on veut dans html . */

{color: #ff3333 }                       /* couleur rouge */

.vert

{color: #66ff33}

.bleu

{color: blue}

.jaune

{color: yellow}

.noir

{color: dark}

.violet

{color: purple}

.blanc

{color: white}

.size50px

{font-size: 50px}

.size20px

{font-size: 20px}

.Luckiest

{font-family: Luckiest Guy}

h1

{font-size: 50px }                    /* font-size = la taille de la police */

a

{font-size: 20 px}

h1

{font-family: Luckiest Guy, Impact}            /* font-family= la police */

h1

{color: #66ff33}

h1

{border: 5px  outset #0099cc}

h1

{border-radius: 5px}

h1

{tex-shadow: 6px 6px 10px #0099cc}

p

{font-family: Luckiest Guy, Impact}

h2

{font-family: Luckiest Guy, Impact}

h2

{text-shadow: 4px 4px 10px black}

li

{font-family: Luckiest Guy, Impact}

li

{color: #ccff33}

a

{font-family: Luckiest Guy, Impact}

.center

{text-align: center}         /* center = au centre / right = a droite / left = a gauche / justify = tout aligné sur la meme ligne */

.centerimage



.flottantgauche

{float: left }             /* float= mettre le texte a gauche/droite ... de l'image donc il faut mettre class=flottant dans le code de l'image  */



.flottantendessousdelimage

{ clear: left }           /* Cela permet de mettre le texte en dessous de l'image */

a:visited

{color: #ff3333}

h1

{text-shadow: 4px 4px 10px black}

.shadow

{text-shadow: 4px 4px 10px black}

a:link

{text-decoration:none}

 /* width: largeur / height: hauteur pour un block} */     /* padding= marge intérieur / margin= marge extérieur */

 .block

 {

 width: 975px;

 height: 340px;

 background: url("images/halo.jpg");

 border: 5px outset #0099cc;

 overflow: auto;

}

Ca donne ça : https://ibb.co/fYELzJ

Merci d'avoir pris le temps de me répondre Et je n'ai jamais utilisé wordpress je ne le connais pas, ca simplifie c mieu ?

-
Edité par YaelBusser1 19 juillet 2018 à 15:54:15

GaëlHübsch

19 juillet 2018 à 11:06:56

Tu peux nous filer ton code et le langage qui est utilisé ?

Et aussi j'imagine que c'est sur un site, utilise tu wordpress ou bien tu fais tout en html/CSS

-
Edité par GaëlHübsch 19 juillet 2018 à 11:08:45

YaelBusser1

19 juillet 2018 à 14:51:18

Bonjour,

Je n'utilise pas wordpress, je code tout en html/CSS .

Mon code html :

<!DOCTYPE html>

<head>

<title>MACSTREAMING</title>

#madiv{height:100pt;overflow:auto}

</style>

</head>

<body>

<h2><a title="Films" href="C:\Users\Megaport\Desktop\macstreaming.com\films.html" class="size50px Luckiest rouge shadow" style="float: left" ><div style="margin-left: 250px">FILMS</a></h2><h2><a title="Séries" href="C:\Users\Megaport\Desktop\macstreaming.com\séries.html" class="size50px Luckiest rouge shadow" style="float: right" ><div style="margin-right: 250px">SERIES</a></h2><h1 class="center"><a title="Menu" href="C:\Users\Megaport\Desktop\macstreaming.com\index.html">MACSTREAMING.COM<a></h1>

</form>

</style>

</center>

</div>

<center><a><h3 class="center rouge size50px shadow "> Films à l'affiche:<br></a>

<img src="C:\Users\Megaport\Desktop\macstreaming.com\images\ready.jpg" title="Ready Player One" alt="Ready Player One">

</h3></center>

<center><a><h3 class="center rouge size50px shadow "> Séries à l'affiche:<br></a>

</h3></center>

<footer><center><a class="rouge shadow" href="mailto:mrmaclevine@gmail.com">Me contacter</a></center></footer>

</body>

Mon code css:

@font-face {

font-family: 'luckiest_guyregular';

src: url('luckiestguy-webfont.eot');

src: url('luckiestguy-webfont.eot?#iefix') format('embedded-opentype'),

url('luckiestguy-webfont.woff2') format('woff2'),

url('luckiestguy-webfont.woff') format('woff'),

url('luckiestguy-webfont.ttf') format('truetype'),

url('luckiestguy-webfont.svg#luckiest_guyregular') format('svg');

font-weight: normal;

font-style: normal;

}

body

{background: url("images/halo.jpg")no-repeat fixed}

#searchthis #search-btn {

background-color: #E8B960; /* Couleur de fond */

border-style: outset; /* Style de la bordure */

border-color: #000000; /* Couleur de la bordure */

width: 7%; /* Permet d'ajuster la largeur du bouton à 100% */

box-sizing: border-box; /* Important */

font-family: Luckiest; /* Police du texte */

font-size: 13px; /* Taille de la police du texte */

font-weight: normal; /* Graisse du texte : normal = normal ; bold = gras */

letter-spacing: 2px; /* Espacement des caractères */

margin: 10px 0 0 0; /* Espace autour du bouton : haut droite bas gauche */

text-transform: uppercase; /* Transforme le texte en majuscules */

color: #ffffff; /* Couleur du texte */

}

.rouge /* ...... Permet de référencier par rapport à ce qu'on veut dans html . */

{color: #ff3333 } /* couleur rouge */

.vert

{color: #66ff33}

.bleu

{color: blue}

.jaune

{color: yellow}

.noir

{color: dark}

.violet

{color: purple}

.blanc

{color: white}

.size50px

{font-size: 50px}

.size20px

{font-size: 20px}

.Luckiest

{font-family: Luckiest Guy}

{font-size: 50px } /* font-size = la taille de la police */

{font-size: 20 px}

{font-family: Luckiest Guy, Impact} /* font-family= la police */

{color: #66ff33}

{border: 5px outset #0099cc}

{border-radius: 5px}

{tex-shadow: 6px 6px 10px #0099cc}

{font-family: Luckiest Guy, Impact}

{text-shadow: 4px 4px 10px black}

{font-family: Luckiest Guy, Impact}

{color: #ccff33}

{font-family: Luckiest Guy, Impact}

.center

{text-align: center} /* center = au centre / right = a droite / left = a gauche / justify = tout aligné sur la meme ligne */

.centerimage

.flottantgauche

{float: left } /* float= mettre le texte a gauche/droite ... de l'image donc il faut mettre class=flottant dans le code de l'image */

.flottantendessousdelimage

{ clear: left } /* Cela permet de mettre le texte en dessous de l'image */

a:visited

{color: #ff3333}

{text-shadow: 4px 4px 10px black}

.shadow

{text-shadow: 4px 4px 10px black}

a:link

{text-decoration:none}

/* width: largeur / height: hauteur pour un block} */ /* padding= marge intérieur / margin= marge extérieur */

.block

{

width: 975px;

height: 340px;

background: url("images/halo.jpg");

border: 5px outset #0099cc;

overflow: auto;

}

Merci d'avoir pris le temps de me répondre, ça fait plaisir ! Sinon je n'ai jamais utilisé wordpress car je ne le connais pas .

Ca donne ça : https://ibb.co/fYELzJ

Justin - Angeduchaos

19 juillet 2018 à 15:33:53

Surtout tu peux mettre ton code dans la balide code ? cest le petit bouton </>