[Résolu] Carré Sous Le Image Slider Plutot Que Sur La Photo

adeleco · February 9, 2016

Bonjour,

Je viens de réinitialiser et remettre mon carrousel de photo "image slider" mais je me retrouve ave cun souc que je ne parviens à résoudre.

Les carré se situe sous le slider et non sur l'image (pour faire défiler celle-ci).

Impossible d'en trouver la raison.

Quelqu'un aurait-il déjà eu ceci?

Merci

Adelin

http://ecoterre.be/fr/

Edited February 14, 2016 by adeleco (see edit history)

tuk66 · February 9, 2016

Voici le contenu original du fichier homeslider.cs:

Here is the original homeslider.css file content:

#homepage-slider {

    float: left;
    margin-bottom: 14px;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    z-index: 1;
}
@media (max-width: 767px) {
#homepage-slider {
    max-width: 100%;
    padding-top: 20px;
    width: 100%;
}
}
#homepage-slider #homeslider {
    margin: 0 auto;
    padding: 0;
}
#homepage-slider .homeslider-container {
    position: relative;
}
#homepage-slider .homeslider-image {
    left: 0;
    position: absolute;
    top: 0;
}
#homepage-slider .homeslider-description {
    cursor: pointer;
    left: 0;
    padding: 50px;
    position: absolute;
    top: 0;
}
#homepage-slider .homeslider-description h2 {
    color: white;
    font-size: 2.7em;
    margin: 0;
    padding: 0;
}
#homepage-slider .homeslider-description p {
    color: white;
    font-size: 1.15em;
    line-height: 1.3em;
    padding: 0.5em 0;
    width: 50%;
}
#homepage-slider .homeslider-description button {
    font-size: 1.2em;
    text-transform: uppercase;
}
@media (max-width: 1200px) {
#homepage-slider .homeslider-description {
    font-size: 0.8em;
    padding: 20px;
}
}
@media (max-width: 768px) {
#homepage-slider .homeslider-description {
    font-size: 0.7em;
    padding: 30px;
}
#homepage-slider .homeslider-description p {
    font-size: 1.5em;
}
}
@media (max-width: 480px) {
#homepage-slider .homeslider-description {
    font-size: 0.5em;
    padding: 30px;
}
#homepage-slider .homeslider-description p {
    font-size: 1.7em;
}
}
#homepage-slider .bx-wrapper a {
    display: block;
}
#homepage-slider .bx-wrapper img {
    height: auto;
}
#homepage-slider .bx-wrapper .bx-viewport {
    direction: ltr !important;
    width: 100%;
}
#homepage-slider .bx-wrapper .bx-pager.bx-default-pager a {
    background: #666 none repeat scroll 0 0;
}
#homepage-slider .bx-wrapper .bx-controls-direction a {
    border: 2px solid #fff;
    bottom: 10px;
    font-size: 1em;
    height: 52px;
    line-height: 18px;
    margin-top: 0;
    outline: 0 none;
    text-indent: -9999px;
    top: auto;
    width: 52px;
    z-index: 9999;
}
#homepage-slider .bx-wrapper .bx-controls-direction a::before {
    background: #fff none repeat scroll 0 0;
    content: ".";
    display: block;
    height: 48px;
    left: 0;
    opacity: 0.14;
    position: absolute;
    text-indent: -9999px;
    top: 0;
    width: 48px;
    z-index: 1;
}
#homepage-slider .bx-wrapper .bx-controls-direction a::after {
    color: #fff;
    display: block;
    font-family: "FontAwesome";
    font-size: 21px;
    height: 48px;
    left: 0;
    padding: 16px 0 0;
    position: absolute;
    text-align: center;
    text-indent: 0;
    top: 0;
    width: 48px;
    z-index: 2;
}
#homepage-slider .bx-wrapper .bx-controls-direction a:hover::before {
    background: #333 none repeat scroll 0 0;
    opacity: 0.83;
}
#homepage-slider .bx-wrapper .bx-prev {
    left: auto;
    right: 60px;
}
#homepage-slider .bx-wrapper .bx-prev::after {
    content: "";
}
#homepage-slider .bx-wrapper .bx-next::after {
    content: "";
}
.ie8 #homepage-slider .bx-wrapper .bx-controls-direction a::before {
    background: #333 none repeat scroll 0 0;
}

adeleco · February 9, 2016

Merci, je vais voir ou cela peut bugger

adeleco · February 9, 2016

Bon, il est toujours identique :/ Si quelqu'un a une idée. Merci

Ariane Web et Plus · February 11, 2016

Bonjour,

Le css du homeslider à été modifié.

Dans le fichier homeslider.css

vers la ligne 130

Vous avez :

#homepage-slider .bx-wrapper .bx-controls-direction a {
    top: auto;
    margin-top: 0;
    font-size: 1em;
    bottom: 10px;
    outline: 0;
    width: 52px;
    height: 52px;
    text-indent: -9999px;
    z-index: 9999;
    border: 2px solid #fff;
    line-height: 18px;
}

Remplacer

top: auto;

margin-top: 0;

par

position : absolute;

et vers la ligne 126

#homepage-slider .bx-wrapper a {
    display: block;
}

Rajouter

right: 10px;

Ca devrait marcher.

J'aime beaucoup ce que vous faites, je vous suis sur fb .

Bonne journée

adeleco · February 11, 2016

Ho merci beaucoup je vais essayer.

Et merci de nous suivre.

Je galere toujours avec ce site par contre

adeleco · February 11, 2016

Zut ca ne change rien

Ariane Web et Plus · February 11, 2016

Normalement ca marche j'ai testé,

Avez-vous vidé le cache après avoir fait les modifications ?

Pouvez-vous faire les modifications, vider le cache et les laisser. Comme ca je regarde tout de suite.

adeleco · February 12, 2016

Oui le cache a été vidé (et je viens encore de le refaire) mais rien ne change: www.ecoterre.be

Merci pour ton aide

Ariane Web et Plus · February 12, 2016

Actuellement les modifications du css que je vous ai fait faire ne sont pas prise en compte il y a toujours les anciennes valeurs.

Donc :

Etes-vous sure d'avoir vidé le cache dans l'onglet paramètre performance ?

Etes vous sure d'avoir modifié le bon fichier ? (avez-vous vu précisément ce que j'ai marqué comme code css ?)

Etes-vous sure d'avoir envoyé le fichier au bon endroit

Sinon cela vient peut être d'un problème avec l’éditeur de thème evolutionX, je vous conseil de les contacter.

adeleco · February 12, 2016

Je vais reverifié car fait vite hier avant de devoir partir en rdv. Merci

adeleco · February 12, 2016

Bon, je dois faire une erreur quelque part mais ou :/

Ariane Web et Plus · February 12, 2016

Si aucune de mes possibilité n'est la bonne, je vois qu'il y a un cache evolutionX c'est surement ça.

adeleco · February 13, 2016

ha oui c'est possible. zut. EvolutionX fonctionne bien pour faire les fond mais me plante bcp d'autre chose

prestations-dev · February 13, 2016

Bonjour,

Essayez de remplacer le contenu de votre fichier homeslider.css se situant dans themes/evolutionX/css/modules/homeslider/homeslider.css

Par ce contenu, et normalement ce sera bon :

/******************************************************************************
						Home Page Slider
*******************************************************************************/
#homepage-slider {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 14px;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  float: left;
  /*****************************************************************************
  						BXSlider Styles
  ********************************************************************************/ }
  @media (max-width: 767px) {
    #homepage-slider {
      width: 100%;
      max-width: 100%;
      padding-top: 20px; } }
  #homepage-slider #homeslider {
    margin: 0 auto;
    padding: 0; }
  #homepage-slider .homeslider-container {
    position: relative; }
  #homepage-slider .homeslider-image {
    position: absolute;
    left: 0;
    top: 0; }
  #homepage-slider .homeslider-description {
    position: absolute;
    left: 0;
    top: 0;
    padding: 50px 50px;
    cursor: pointer; }
    #homepage-slider .homeslider-description h2 {
      font-size: 2.7em;
      color: white;
      margin: 0;
      padding: 0; }
    #homepage-slider .homeslider-description p {
      width: 50%;
      font-size: 1.15em;
      line-height: 1.3em;
      padding: 0.5em 0;
      color: white; }
    #homepage-slider .homeslider-description button {
      font-size: 1.2em;
      text-transform: uppercase; }
    @media (max-width: 1200px) {
      #homepage-slider .homeslider-description {
        padding: 20px;
        font-size: 0.8em; } }
    @media (max-width: 768px) {
      #homepage-slider .homeslider-description {
        padding: 30px;
        font-size: 0.7em; }
        #homepage-slider .homeslider-description p {
          font-size: 1.5em; } }
    @media (max-width: 480px) {
      #homepage-slider .homeslider-description {
        padding: 30px;
        font-size: 0.5em; }
        #homepage-slider .homeslider-description p {
          font-size: 1.7em; } }
  #homepage-slider .bx-wrapper a {
    display: block; }
  #homepage-slider .bx-wrapper img {
    height: auto; }
  #homepage-slider .bx-wrapper .bx-viewport {
    width: 100%;
    direction: ltr !important; }
  #homepage-slider .bx-wrapper .bx-pager.bx-default-pager a {
    background: #666; }
  #homepage-slider .bx-wrapper .bx-controls-direction a {
    top: auto;
    margin-top: 0px;
    font-size: 1em;
    bottom: 10px;
    outline: 0;
    width: 52px;
    height: 52px;
    text-indent: -9999px;
    z-index: 9999;
    border: 2px solid #fff;
    line-height: 18px;
	background:#ccc;}
    #homepage-slider .bx-wrapper .bx-controls-direction a:before {
      height: 48px;
      width: 48px;
      display: block;
      background: #fff;
      content: ".";
      opacity: 0.14;
      text-indent: -9999px;
      position: absolute;
      left: 0;
      top: 0;
      z-index: 1; }
    #homepage-slider .bx-wrapper .bx-controls-direction a:after {
    color: #000;
    display: block;
    font-family: "FontAwesome";
    font-size: 21px;
    height: 48px;
    left: 0;
    line-height: 1em;
    padding: 0;
    text-align: center;
    text-indent: 0;
    top: 0;
    width: 48px;
    z-index: 2;}
    #homepage-slider .bx-wrapper .bx-controls-direction a:hover:before {
      background: #333;
      opacity: 0.83; }
  #homepage-slider .bx-wrapper .bx-prev {
    right: 60px;
    left: auto; }
    #homepage-slider .bx-wrapper .bx-prev:after {
      content: "\f053"; }
  #homepage-slider .bx-wrapper .bx-next:after {
    content: "\f054"; }

.ie8 #homepage-slider .bx-wrapper .bx-controls-direction a:before {
  background: #333; }
  
.bx-controls {
    bottom: 8px;
    position: absolute;
    right: 15px;
}
.bx-controls-direction {
    width: auto;
}
.bx-controls-direction a.bx-prev, .bx-controls-direction a.bx-next {
	float:left;
}

/*# sourceMappingURL=homeslider.css.map */

Je vous ai mis le fichier css modifié et complet ci-joint.

J'attends votre retour.

Cordialement

homeslider.css

adeleco · February 13, 2016

C'etait bien là !!! un tout tout grand merci

prestations-dev · February 13, 2016

Bonsoir,

De rien, n'oubliez pas de mettre en résolu.

Cordialement

[Résolu] Carré Sous Le Image Slider Plutot Que Sur La Photo

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in