Partage
  • Partager sur Facebook
  • Partager sur Twitter

Responsive: Des éléments flottants sur une image

Sujet résolu
CorentinPardo
    7 janvier 2019 à 15:07:37

    Bonjour,

    J'ai commencé une section disponible ici: https://pro-volet.fr/test-url (url provisoire, si vous consultez ce message plus tard, le lien ne sera plus bon)

    Pas besoin de m'étendre énormément, si vous passez la souris sur un élément de liste à droite vous devriez comprendre ce que je veux en faire.

    Et je fais appel à vous car je n'arrive pas à caler mes puces à des endroits fixes par rapport à l'image et pour tous les écrans (évidement je ferais des changements pour mobiles et tablettes, mais on est pas encore là, je parle d'écran large type desktop).

    Le problème principal c'est que j'ai mis mes petites puces et leurs pop-hover en élément enfant de l'élément de liste correspondant avec une position absolue ... du coup ils sont positionnés par rapport à la box de droite, hors j'ai besoin que mes puces soit à des endroits très précis au dessus de l'image. Comment faire ?

    <section class="is-primary-dark inline-block w-100">
    <div class="col-lg-12">
      <div class="flex">
        <div class="col-lg-6 col-md-6 col-sm-12">
          <figure class="image volet-anatomie">
            <img src="<?= $this->Url->image('ressources/volet-anatomie.png') ?>" alt="" style="position: relative;">
          </figure>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12 preserve-widget vertical-repartition">
          <h2 class="titleintro">Tarification</h2>
          <h1 class="titlemaintarif whitec m-t-0">Tous nos forfaits de réparations</h1>
          <div class="box boxtarif p-a-20 flex2" style="background: #1b2e51;">
            <h2 class="titleboxtarif">Déplacement et main d'oeuvre inclus*</h2>
            <ul class="p-a-20">
              <!--Diag-->
              <li class="whitec tarif hoverable" id="diagnostic_depannage">
                <div class="flex align-center positionpopuptarif">
                  <div class="targettarif"></div>
                  <div class="box activecontent">
                      <h3>Diagnotisque Dépannage</h3>
                      <p class="pricetarif bluec">À partir de <span>89</span></p>
                      <h4>Cette prestation comprend:</h4>
                      <ul class="box">
                        <li class="p-y-5 flex align-center">
                          <div class="m-r-5">
                            <figure class="image float-l" style="width:20px;">
                              <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                            </figure>
                          </div>
                          <span class="flex2">1 Technicien</span>
                        </li>
                        <li class="p-y-5 flex align-center">
                          <div class="m-r-5">
                            <figure class="image float-l" style="width:20px;">
                              <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                            </figure>
                          </div>
                          <span class="flex2">1 Heure de main d'oeuvre</span>
                        </li>
                        <li class="p-y-5 flex align-center">
                          <div class="m-r-5">
                            <figure class="image float-l" style="width:20px;">
                              <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                            </figure>
                          </div>
                          <span class="flex2">Le déplacement</span>
                        </li>
                        <li class="p-y-5 flex align-center">
                          <div class="m-r-5">
                            <figure class="image float-l" style="width:20px;">
                              <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                            </figure>
                          </div>
                          <span class="flex2">Le diagnostic complet d'un volet roulant</span>
                        </li>
                      </ul>
                    </div>
                </div>
                 <div class="flex align-center w-100">
                  <div class="flex1">
                    <figure class="image width-30px whitepng float-l">
                      <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                    </figure>
                  </div>
                  <span class="nametarif flex2 text-center">Diagnostic dépannage</span>
                  <span class="pricetarif flex1 text-right">89</span>
                </div>
              </li>
              <!--Tablier-->
              <li class="whitec tarif hoverable" id="remplacement_tablier">
                <div class="flex align-center positionpopuptarif">
                  <div class="targettarif"></div>
                  <div class="box activecontent">
                      <h3>Remplacement de tablier</h3>
                      <p class="pricetarif bluec">À partir de <span>269</span></p>
                      <h4>Cette prestation comprend:</h4>
                      <ul class="box">
                        <li class="p-y-5 flex align-center">
                          <div class="m-r-5">
                            <figure class="image float-l" style="width:20px;">
                              <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                            </figure>
                          </div>
                          <span class="flex2">1 Technicien</span>
                        </li>
                        <li class="p-y-5 flex align-center">
                          <div class="m-r-5">
                            <figure class="image float-l" style="width:20px;">
                              <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                            </figure>
                          </div>
                          <span class="flex2">L'installation de votre tablier de volet roulant</span>
                        </li>
                        <li class="p-y-5 flex align-center">
                          <div class="m-r-5">
                            <figure class="image float-l" style="width:20px;">
                              <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                            </figure>
                          </div>
                          <span class="flex2">Le déplacement</span>
                        </li>
                        <li class="p-y-5 flex align-center">
                          <div class="m-r-5">
                            <figure class="image float-l" style="width:20px;">
                              <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                            </figure>
                          </div>
                          <span class="flex2">Un tablier fabriqué sur mesure.</span>
                        </li>
                      </ul>
                    </div>
                </div>
                <div class="flex align-center w-100">
                  <div class="flex1">
                    <figure class="image width-30px whitepng float-l">
                      <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                    </figure>
                  </div>
                  <span class="nametarif flex2 text-center">Remplacement de tablier</span>
                  <span class="pricetarif flex1 text-right">269</span>
                </div> 
              </li>
              <!--Attaches-->
              <li class="whitec tarif hoverable" id="remplacement_attaches">
                <div class="flex align-center positionpopuptarif">
                    <div class="targettarif"></div>
                    <div class="box activecontent">
                        <h3>Remplacement d'attaches</h3>
                        <p class="pricetarif bluec">À partir de <span>149</span></p>
                        <h4>Cette prestation comprend:</h4>
                        <ul class="box">
                          <li class="p-y-5 flex align-center">
                            <div class="m-r-5">
                              <figure class="image float-l" style="width:20px;">
                                <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                              </figure>
                            </div>
                            <span class="flex2">1 Technicien</span>
                          </li>
                          <li class="p-y-5 flex align-center">
                            <div class="m-r-5">
                              <figure class="image float-l" style="width:20px;">
                                <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                              </figure>
                            </div>
                            <span class="flex2">Le remplacement des attaches de votre volet roulant</span>
                          </li>
                          <li class="p-y-5 flex align-center">
                            <div class="m-r-5">
                              <figure class="image float-l" style="width:20px;">
                                <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                              </figure>
                            </div>
                            <span class="flex2">Le déplacement</span>
                          </li>
                          <li class="p-y-5 flex align-center">
                            <div class="m-r-5">
                              <figure class="image float-l" style="width:20px;">
                                <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                              </figure>
                            </div>
                            <span class="flex2">Deux attaches ou verrous pour tablier</span>
                          </li>
                        </ul>
                      </div>
                </div> 
                <div class="flex align-center w-100">
                  <div class="flex1">
                    <figure class="image width-30px whitepng float-l">
                      <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                    </figure>
                  </div>
                  <span class="nametarif flex2 text-center">Remplacement d'attaches</span>
                  <span class="pricetarif flex1 text-right">149</span>
                </div>
              </li>
              <!--Enrouleur-->
              <li class="whitec tarif hoverable" id="remplacement_enrouleur">
                <div class="flex align-center positionpopuptarif">
                    <div class="targettarif"></div>
                    <div class="box activecontent">
                        <h3>Remplacement d'enrouleur à sangle</h3>
                        <p class="pricetarif bluec">À partir de <span>139</span></p>
                        <h4>Cette prestation comprend:</h4>
                        <ul class="box">
                          <li class="p-y-5 flex align-center">
                            <div class="m-r-5">
                              <figure class="image float-l" style="width:20px;">
                                <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                              </figure>
                            </div>
                            <span class="flex2">1 Technicien</span>
                          </li>
                          <li class="p-y-5 flex align-center">
                            <div class="m-r-5">
                              <figure class="image float-l" style="width:20px;">
                                <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                              </figure>
                            </div>
                            <span class="flex2">Le remplacement de votre ancien enrouleur</span>
                          </li>
                          <li class="p-y-5 flex align-center">
                            <div class="m-r-5">
                              <figure class="image float-l" style="width:20px;">
                                <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                              </figure>
                            </div>
                            <span class="flex2">Le déplacement</span>
                          </li>
                          <li class="p-y-5 flex align-center">
                            <div class="m-r-5">
                              <figure class="image float-l" style="width:20px;">
                                <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                              </figure>
                            </div>
                            <span class="flex2">Un enrouleur à sangle</span>
                          </li>
                        </ul>
                      </div>
                </div> 
                <div class="flex align-center w-100">
                  <div class="flex1">
                    <figure class="image width-30px whitepng float-l">
                      <img src="<?= $this->Url->image('icons/avantages/formation.png') ?>" alt="" style="position: relative;">
                    </figure>
                  </div>
                  <span class="nametarif flex2 text-center">Remplacement d'attaches</span>
                  <span class="pricetarif flex1 text-right">149</span>
                </div>
              </li>           
            </ul>
          </div>
        </div>
      </div>

    </div>
</section>
    section.is-primary-dark {
  background: #1b2f51;
  background: -moz-linear-gradient(45deg, #1b2f51 0%, #0c192b 99%);
  background: -webkit-linear-gradient(45deg, #1b2f51 0%, #0c192b 99%);
  background: linear-gradient(45deg, #1b2f51 0%, #0c192b 99%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1b2f51', endColorstr='#0c192b', GradientType=1);
  border-color: transparent;
  color: #fff;
}
.volet-anatomie{
  max-width: 600px;
}
.align-center{
  align-items: center;
}
.titleintro{
  color: #d81733;
  text-transform: uppercase;
  font-size: 1.7em;
}
.titleboxtarif{
  color: #d81733;
  font-family: sans-serif;
  text-transform: uppercase;
  font-size: 1.3em;
  font-weight: 800;
}
.titlemaintarif{
  font-family: sans-serif;
  font-size: 2.5em;
  line-height: 1.2em;
}
.preserve-widget {
  padding-right: 65px;
}
.boxtarif{
  width: 85%;
  margin-left: 15%;
}
.pricetarif,
.nametarif{
  transition: all 0.4s ease-in;
  color: white;
  font-size: 1em;
  font-weight: 800;
  text-transform: uppercase;
}
.pricetarif::after {
  content: '€';
  margin: 0 3px;
}
.positionpopuptarif{
  position: absolute;
}
.targettarif {
  transition: all 0.4s ease-in;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  border: 5px solid #151619;
  background-color: white;
  position: relative;
  opacity: 0.9;
}
.activecontent {
  z-index: 2;
  transition: all 0.7s ease-in;
  position: absolute;
  margin: 0px 0px 0px 50px;
  width: max-content;
  display: none;
}
.activecontent:before {
  border-top: 12px solid transparent;
  border-right: 12px solid white;
  border-left: 12px solid transparent;
  border-bottom: 12px solid transparent;
  top: calc((100% - 24px) / 2);
  right: 100%;
  content: '';
  display: block;
  position: absolute;
}
.activecontent h3 {
  margin-top: 0;
  font-family: sans-serif;
  text-transform: uppercase;
  color: #1b2e51;
  font-size: 1.2em;
  font-weight: 800;
}
.activecontent h4 {
  font-size: 1.1em;
  color: #3c763d;
  font-weight: 800;
}

#diagnostic_depannage .positionpopuptarif {
  left: -50%;
}
#remplacement_tablier .positionpopuptarif {
  left: -125%;
}
#remplacement_attaches .positionpopuptarif{
  left: -93%;
  top: -250%;
}
#remplacement_enrouleur .positionpopuptarif{
  left: -55%;
  top: -5%;
}
.tarif{
  padding: 10px;
}
.tarif::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  border: 0.5px solid white;
}
.tarif.hoverable {
  transition: all 0.4s ease-in;
}
.tarif.hoverable:hover{
  background-color: #0c192b;
}
.tarif.hoverable:hover .pricetarif,
.tarif.hoverable:hover .nametarif{
  color: #d81733;
}
.tarif.hoverable:hover .targettarif{
  display: block;
  border: 5px solid #d81733;
}
.tarif.hoverable:hover .activecontent{
  display: inline-block;
}

    Il doit manquer un peu de css mais rien de méchant pour comprendre.

    Cordialement

    -
    Edité par CorentinPardo 7 janvier 2019 à 15:26:52

    • Partager sur Facebook
    • Partager sur Twitter
    Frogweb
    • HTML / CSS
      7 janvier 2019 à 16:55:19

      Salut,

      j'aurais mis les puces et les pop en position:absolute dans le container de gauche en position:relative, celui qui contient l'image. Ensuite des top, left, right ou bottom en %.
      Et pour finir, pour le hover, un petit code en JS.

      • Partager sur Facebook
      • Partager sur Twitter
      Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !
      CorentinPardo
        7 janvier 2019 à 17:20:21

        C'est ce que je craignais :)
        • Partager sur Facebook
        • Partager sur Twitter
        Frogweb
        • HTML / CSS
          7 janvier 2019 à 17:32:00

          CorentinPardo a écrit:

          C'est ce que je craignais :)

          J'imagine ^^

          Sinon pour ma part je ne vois pas de solution avec la structure html actuelle.
          Il y a peut-être moyen en JS...

          • Partager sur Facebook
          • Partager sur Twitter
          Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

          Responsive: Des éléments flottants sur une image

          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
          • Editeur ●
          • Markdown