Intégration d'une image dans une div avec scroll

21 septembre 2017 à 14:12:12

Bonjour,

Je vous embête une dernière et ultime dernière fois ! J'ai pas mal avancé sur mon site web, mon objectif c'est de présenter des catégories de vidéos un peu comme sur Youtube ou sur Netflix .

J'ai déjà une scroll bar horizontale ( quand je vais de gauche vers la droite j'ai mon ensemble de div qui se place comme je le souhaitez, un peu comme sur Youtube).

Malheureusement, j'essaye en vain d'insérer dans mes div une image avec un lien qui renvoie vers la vidéo, mais cela ne fonctionne pas. Quelqu'un peut-il m'aider ?

Voici le HTML :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="plutotsiteweb.css" />
        <link rel=icon type="image/x-icon" href="images/faviip.png"/>
        <script type="text/javascript" src="jscover.js"></script>

               <title>  GROS SITE </title>
    </head>
 <body>

 	<div id="header"></div>


<div id="images">
	<img class="image"src="images/pliage.jpg" alt="pliage ">
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
	<div class="image">Jolie image</div>
</div>








 <div id="footer">  Private Policy - Tous droits réservés - Copyright 2017 </div>

 <div  id="logof">
 <div class="logofa"> <a href="https://www.facebook.com/BBBB/?hc_ref=ARRWmPgHjLelg9nGAKRVw0_l1hgJfKw89_a28jFjJz23aTOV1cHgoEoNm4GAK7MM24I"><img src="images/faceBBBBsite.png" alt="le logo facebook"/></a></div>
</div>

<div  id="logotwi">
 <div class="logot"> <a href="https://twitter.com/BBBB"><img src="images/twitterBBBBsite.png" alt="le logo twitter"/></a></div>
</div>

<div  id="logoinsta">
 <div class="logoinsta"> <a href="https://www.instagram.com/BBBB/"><img src="images/instagramBBBBsite.png" alt="le logo instagram"/></a></div>
</div>

<div  id="logopinte">
 <div class="logopinte"> <a href="https://www.pinterest.fr/BBBB/"><img src="images/pintBBBBsite.png" alt="le logo pinterest"/></a></div>
</div>






</body>
</html>

Mon code CSS :

#images {
   background-color: black;
   padding: 5px;
   overflow: auto;
   position: absolute;
   left: 0;
   right: 0;
   top: 250px;
   bottom: 0;
   white-space: nowrap;
}
.image {
   background-color: white;
   display: inline-block;
   width: 240px;
   height: 180px;
   border: 1px solid black;
   border-radius: 10px;
   text-align: center;
   line-height: 270px;
}






/* #logo
{
   
   left: 0%;
   top: 0%;
   background-color: black;
   height: 0px;
   width: 0px;
   position: absolute;
   z-index: 51;
   opacity: 0.8;
}


.logop
{
   width: 0%;
   height: 0px;

}

*/

#logoy
{
   right: 0%;
   top: 0%;
   background-color: black;
   height: 0px;
   width:0px;
   position: absolute;
   z-index: 52;
}







/* FOOTER  A PARTIR DE CETTE LIGNE ON FAIT LE FOOTER */




#footer{
   background-color: #424242;
   height: 120px;
   bottom: 0px;
   left: 0;
   right: 0;
   position: absolute;
   z-index: 53;
   margin-left: -3%;
   text-align: center;
   line-height: 120px;

}


/* ICONES RESEAUX SOCIAUX FOOTER */
/* TWITTER BBBB https://twitter.com/BBBBdimsum et FACEBOOK BBBB */

#logof
{
   background-color: #424242;
   left: 4%;
   bottom: 3%;
   position: absolute;
   z-index: 54;

}

#logotwi
{
   background-color: #424242;
   left: 9%;
   bottom: 3%;
   position: absolute;
   z-index: 54;
}

#logoinsta
{
   background-color: #424242;
   left: 13.5%;
   bottom: 3%;
   position: absolute;
   z-index: 54;
}

#logopinte
{
   background-color: #424242;
   left:18%;
   bottom: 3%;
   position: absolute;
   z-index: 54;
}






/* FIN DES ICONES RESEAUX SOCIAUX FOOTER */


   body
{
   background-color: black;
   color: #A4A4A4;

}

Voilà un screen de ce que j'ai :

Mon objectif, c'est d'intégrer des images dans " Jolie image " qui mène directement sur un site quand on clique dessus ( donc à coup de href je suppose ) . J'ai essayé, mais je n'y arrive pas et quand je mets une image elle est toujours décalée par rapport à " jolie image " .

De plus si je copie colle mon HTML pour faire une deuxième ligne " Jolie image " avec la scroll bar qui ne se voit pas comme sur l'écran, elle n'est pas bien positionnée juste en dessous si quelqu'un a une idée !

Merci à tous ! C'est toujours sympa de jeter un oeil et de donner ses petits conseils pour aider des débutants comme moi !

Skull-dragon

21 septembre 2017 à 14:38:28

Salut essaie sa ce serait mieux comme structure

<div id="images">

<div>
<a class="image" href="ADRESSE_DE_TON_SIE"><img src="ADRESSE_DE_TON_IMAGE" alt="NOM_DE_TON_SITE" /></a>
</div>

<div>
<a class="image" href="ADRESSE_DE_TON_SIE"><img src="ADRESSE_DE_TON_IMAGE" alt="NOM_DE_TON_SITE" /></a>
</div>

</div>

Ensuite c'est normal que tu es un décalage étant donné que tu as sa :

    <img class="image"src="images/pliage.jpg" alt="pliage ">
    <div class="image">Jolie image</div>

une image et un block div donc décalage causé par le block

en passant attention à l'écriture de tes balises image il faut les fermer correctement

<img class="image" src="images/pliage.jpg" alt="pliage" />

CharliesGosse

21 septembre 2017 à 14:45:32

Merci !

J'ai fermé correctement ma balise img, j'avais pas fait attention ! Par contre, j'avais déjà essayé le coup de remettre : <div> <a class="image".............> . Mais malheureusement ça ne fonctionne pas, il faut changer quelque chose parce que l'image devient hyper grosse , elle ne prend pas les caractéristiques height et width du CSS .

Pour le décalage entre l'image et le block div tu as une idée de comment procéder pour le supprimer ?

J'ai fait ça et j'ai obtenu :

Mais le problème c'est que moi je voulais qu'elle s'affiche à gauche de " jolie image " pas au dessus :/

L'objectif c'est de faire " plusieurs catégories " dans toute la page que l'on pourra scroller comme sur Netflix

Merci en tout cas !

-
Edité par CharliesGosse 21 septembre 2017 à 14:57:08

Nicolas412

21 septembre 2017 à 15:10:08

Je n'ai pas compris à quoi servent tes blocks "jolie image". Ils vont tous être remplacer par des images ? Si c'est le cas à chaque fois que tu met des images elles sont se mettre au même niveau comme ceci :

Ce que tu cherches à faire ressemble beaucoup à un carrousel, je t'invite à regarde ici :

https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html

tu as plusieurs type d’exemple ici :

https://owlcarousel2.github.io/OwlCarousel2/demos/demos.html

-
Edité par Nicolas412 21 septembre 2017 à 15:20:40

La culture, c’est comme le parachute : si on ne veut pas s’écraser, il faut l’ouvrir.

Skull-dragon

21 septembre 2017 à 15:43:40

Et bien à la place ta class sur ton lien met le sur la balise img

quand à l'espace entre les blocks il faut bidouiller ton css

#images {
   background-color: black;
   padding: 5px;
   position: absolute;
   left: 0;
   right: 0;
   top: 250px;
   bottom: 0;
   display:table;
   word-spacing: -2em;
   overflow:auto;
   white-space:nowrap;
}

.space{
  display: inline-block; 
  word-spacing: normal;
}

.image {
   background-color: white;
   width: 240px;
   height: 180px;
   border: 1px solid black;
   border-radius: 10px;
   text-align: center;
   line-height: 270px;
}

ensuite ton footer passe le en position: fixed; pas qu'il se barre quand sa scroll

ton html

<div id="images">
 
<div class="space">
<a  href="ADRESSE_DE_TON_SIE"><img class="image" src="ADRESSE_DE_TON_IMAGE" alt="NOM_DE_TON_SITE" /></a>
</div>
 
<div class="space">
<a href="ADRESSE_DE_TON_SIE"><img class="image" src="ADRESSE_DE_TON_IMAGE" alt="NOM_DE_TON_SITE" /></a>
</div>
 
</div

etc...

CharliesGosse

22 septembre 2017 à 11:22:10

Avec vos conseils je suis parvenu à tout maîtriser ! Merci c'est très sympa de m'avoir aidé ! C'était bien un carrousel, mais je ne connaissais pas du tout l'existence du nom ahaha !

Après avoir suivi vos conseils, je me retrouve avec ça, ce que je cherchas à faire !

Seulement la barre de scroll horizontale on peut la cacher tout en gardant sa fonctionnalité de scroll ? J'ai tenté le scroll bar hidden mais ça ne marche pas :/

Skull-dragon

22 septembre 2017 à 14:26:10

Salut

de rien après il faut voir avec le JS va voir ici http://cubiq.org/iscroll-5 regarde il y à une démo

et il faudra prévenir les visiteurs de ta page sur l'utilisation car c'est drôle comme concept mais bon