28111 sujets

CSS et mise en forme, CSS3

Création d'une page CSS pour afficher un produit

Bonjour, je sollicite votre aide car je cherche à créer une page simple (responsive également) qui permet d'afficher un produit, avec les informations qu'il contient (prix, titre, catégorie, description, vues et slider). J'ai du mal déplacer les boutons gauche et droit du slider dans les 2 extremité de l'image. Vous pouvez voir en photo:
upload/1642029800-84026-pr8.png

De plus en essayant de positionner les span, ils perdent leur position (lorsqu'on réduit la fenêtre), ie. qu'ils se dispersent
Voici le css:
.annoncesingle {
  margin-top: 200px;
  width: 800px;
  height: 700px;
  border-bottom: solid orange;
  text-align: center;
  margin-bottom: 10px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.containersingle {
  max-width: 420px;
  margin: 0 auto;
  padding: 10px;
}

.slidersingle img {
  max-width: 600px;
  display: none;
}

.slidersingle {
  width: 600px;
  height: 290px;
  overflow: hidden;
}

span.titlesingle {
  margin-left: 12px;
  font-weight: bold;
  font-size: 15px;
  color: #221461;
  position: relative;
  bottom: 0px;
}

span.datesingle {
  position: absolute;
  right: 350px;
  margin-top: 250px;
}
span.categorysingle {
  position: absolute;
  left: 350px;
  margin-top: 250px;
}
span.pricesingle {
  position: absolute;
  right: 350px;
  margin-top: 200px;
}
span.citysingle {
  position: absolute;
  left: 615px;
  margin-top: 300px;
}
span.telephonesingle {
  position: absolute;
  left: 350px;
  margin-top: 200px;
}
span.commentssingle {
  left: 560px;
  font-size: 14px;
  color: black;
  position: absolute;
  margin-top: 100px;
}
span.vuessingle {
  position: absolute;
  left: 350px;
  margin-top: 330px;
}


Le code source HTML:
<body>
    <div class="annoncesingle" id= "annonce-8"  > <div class="containersingle"> 
<div class="slidersingle" >
<img class ="active" style="width:400px; height:300px;" src="pictures/bureau1.jpg">
<img class ="active" style="width:400px; height:300px;" src="pictures/bureau2.jpg">
<img class ="active" style="width:400px; height:300px;" src="pictures/bureau3.jpg">
<img class ="active" style="width:400px; height:300px;" src="pictures/bureau4.jpg">
<img class ="active" style="width:400px; height:300px;" src="pictures/bureau5.jpg">
</div>  <button class="btn-nav left" onclick="slideSuivante(8)" > < </button>
  <button class="btn-nav right" onclick="slidePrecedente(8)" > ></button>
</div><h1><span class='titlesingle'>Nous louons des locaux</span> </h1>
<span class='categorysingle'>Bureau</span>
<span class='pricesingle'>0</span>
<span class='datesingle'>2022-01-09</span>
<span class='commentssingle'>Appelez si interssé</span>
<span class='telephonesingle'>458569631</span>
<span class='vuessingle'>4</span>
Il manque du CSS, notamment (justement) ceux des boutons : btn-nav left right

Pour être sur les images tes boutons doivent être en absolute (et ton slider en relative)
Modérateur
Bonjour,

Deux sliders dans la même semaine, on les fait à la chaine en ce moment (voir https://forum.alsacreations.com/topic-5-89141-1.html).

Voilà quelques idées : https://jsfiddle.net/parsimonhi/d81czuh9/

Il faudra adapter bien évidemment. Tu notes que tu n'es pas obligé de mettre les boutons dans le html. Tu peux les ajouter en js puisque de toute façon, ils ne marchent que si js est activé. Ce slider marche aussi de manière minimale si js est désactiver.

Pour la partie "informations", il faudra une image de ce que tu veux obtenir en fenêtre large, et une autre en fenêtre étroite, sinon, c'est difficile de t'aiguiller vers une solution (puisque tu nous dis que ton code actuel ne te satisfait pas).

Amicalement,
Bonjour, je trouve que c'est meilleur par rapport à ce que j'avais

2 problèmes :
1-Le slider est attaché au menu, même en modifiant dans le css (alors que leurs pages css sont différentes)
upload/1642107298-84026-menua.png


2-<<Tu notes que tu n'es pas obligé de mettre les boutons dans le html. Tu peux les ajouter en js >>
Peux-tu les mettre s'il te plait en html, car mon code js dépend vraiment de ces bouton et de la partie php? Et c'est une autre histoire.... Smiley eek Please Smiley rolleyes
Modérateur
Bonjour,

Je ne comprends pas ton 1er problème. Il faudrait des explications supplémentaires.

Pour le 2e problème, tu regardes dans le code js, les boutons sont les mêmes que ceux que tu avais. Tu peux les remettre dans le code html après la div de classe singleslider, et ne garder ensuite dans le js que :
  function slideSuivante() {
    let e = document.querySelector('.slidersingle');
    let refWidth = e.clientWidth;
    let currentWidth = e.scrollWidth;
    let currentPos = e.scrollLeft;
    let images = e.querySelectorAll('img');
    let k, km, oldPos, newPos;
    km = images.length;
    k = Math.floor(km * (currentPos + 1) / currentWidth);
    k++;
    if (k > (km - 1)) k = 0;
    oldPos = currentPos;
    newPos = k * refWidth;
    //console.log(k+" "+oldPos+" "+newPos);
    e.scrollTo(newPos, 0);
  }

  function slidePrecedente() {
    let e = document.querySelector('.slidersingle');
    let refWidth = e.clientWidth;
    let currentWidth = e.scrollWidth;
    let currentPos = e.scrollLeft;
    let images = e.querySelectorAll('img');
    let k, km, oldPos, newPos;
    km = images.length;
    k = Math.ceil(km * (currentPos - 1) / currentWidth);
    k--;
    if (k < 0) k = km - 1;
    oldPos = currentPos;
    newPos = k * refWidth;
    //console.log(k+" "+oldPos+" "+newPos);
    e.scrollTo(newPos, 0);
  }

Amicalement,
Le premier problème a été résolu avec un top= 40px;
Le slider marche bien
Autre chose: Pour faire compter le nombre de photos dans le slider, aurais-tu une idée ?
Exemple: ajouter une icone caméra avec le nombre de photo dans le slider
Modifié par max30 (14 Jan 2022 - 04:17)
Sujet clos
Aller à