28172 sujets

CSS et mise en forme, CSS3

Centrage avec css ou javascript pour image

Bonjour,

J'ai un code javascript qui gère les aperçu d'images. Une partie de l'affichage est géré en CSS.

Code javascript:

  initialize: function() {
    this.windowElement = new Element('div', {id:'tplPreviewJeux', style:'display:none; position:absolute;'});
    this.titleElement = new Element('h2', {id:'tplPreviewTitle'});
    this.imageElement = new Element('img', {id:'tplPreviewImage'});
    this.progressBarElement = new Element('div', {id:'tplPreviewProgressBar', style:'display:none;'});
	this.texteElement = new Element('p', {id:'tplPreviewText'});


    this.windowElement.insert(
      this.titleElement
    ).insert(
      new Element('div', {id:'tplPreviewBody'}).insert(
        this.imageElement
      ).insert(
        this.texteElement
      ).insert(
        this.progressBarElement.update('Chargement de l\'apercu...')
      )
    );

document.body.appendChild(this.windowElement); 
},

  loadPreview: function(options) {
    this.titleElement.update(options.title);
	this.texteElement.update(options.texte);

    var oldImg = this.imageElement;
    this.imageElement = new Element('img', {
      id: 'tplPreviewImage',
      src: options.src,
      width: options.width,
      height: options.height
    });
    oldImg.replace(this.imageElement);

    if (!this.imageElement.complete) {
      this.progressBarElement.show();
      this.imageElement.observe('load', function(event) {
        this.progressBarElement.hide();
      }.bindAsEventListener(this));
    }


Code css:

#tplPreviewJeux {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #ffffff;
  border:1px solid #444444;
  font-size: 11px;
  color: #4B4B4B;
  padding: 12px 15px 0px 15px;
}

#tplPreviewTitle {
  font-size: 16px;
  color:#CCC;
}

#tplPreviewBody {
  position: relative;
}

#tplPreviewImage {
  margin: 8px auto 0 auto;   
}

#tplPreviewProgressBar {
  position: absolute;
  width: 125px;
  padding: 10px 10px 15px 10px;
  top: 45%;
  left: 50%;
  margin-left: -67px;
  border: 1px solid #6A6A6A;
  background-color: #ffffff;
  color: #000000;
  font-family: Tahoma,Helvetica,sans;
  font-size: 10px;
  text-align:left;
}

#tplPreviewText
{
width:420px;
text-align: justify;
font: normal 12px/1.2em Arial, Helvetica, "Nimbus Sans L", sans-serif;
}


Je souhaite centrer les images si elles ne prennent pas toute la largeur de l aperçu:

http://www.voilou.fr/fiche-presentation-jeux.php?jeu=Kadokado

En passant la souris sur les aperçu dans les jeux d'action, l'image est à gauche et j'aimerai la centrer.

Dans les autres jeux, l'image étant aussi large que le cadre, il n'y a pas de prob.

Merci pour votre aide!
Sinon en faisant:

#tplPreviewText

{

/*width:420px;*/

text-align: justify;

font: normal 12px/1.2em Arial, Helvetica, "Nimbus Sans L", sans-serif;

}


Cela me donne non pas un centrage, mais le cadre s'adapte à l'image.

Le problème est que si le texte est plus long que l'image cela déborde...c'est pour cela que j'avais spécifié une largeur fixe, qui était auparavant la largeur de mes images.
Bonjour Laurie-Anne Smiley smile

Alors voila ce que j'ai fait:

#tplPreviewJeux {
  position: absolute;
  top: 0px;
  left: 0px;
  background-color: #ffffff;
  border:1px solid #444444;
  font-size: 11px;
  color: #4B4B4B;
  padding: 12px 15px 0px 15px;
  width:420px;
}

#tplPreviewTitle {
  font-size: 16px;
  color:#CCC;
}

#tplPreviewBody {
  position: relative;
}

#tplPreviewImage {
  margin: 8px auto 0 auto;   
  text-align:center;
}

#tplPreviewText
{
/*width:420px;*/
text-align: justify;
font: normal 12px/1.2em Arial, Helvetica, "Nimbus Sans L", sans-serif;
}


effectivement la largeur reste comme je le souhaite.

Par contre tu m'as dis de mettre text-align: center dans #tplPreviewText, mais cela m'a juste centrer le texte...or je veux centrer l'image!

J'ai donc mis cela dans #tplPreviewImage mais cela n'a rien changé, cette satané image veut pas se centrer Smiley confus
Sujet clos
Aller à