[Résolu] Repositionner une image du point d'accroche home

[Bourdel]

Bonjour, je voudrais centrer l'image que j'ai mise dans le point d'accroche home sans que cela déplace les blocs en dessous. Comment je pourrais faire?

 

Screen de ce que j'ai actuellement : 

 

Voilà merci d'avance

Edited January 20, 2015 by Bourdel (see edit history)

[Bourdel]

J'ai bidouillé, j'ai réussi à le centrer mais l'image n'est plus responsive design alors que quand elle est à gauche ça l'est

[FMR]

Bonjour,

Sans un minimum d'information, impossible de vous aider. (une image, ça ne sert à rien, y a pas de code dedans)

Bonne continuation.
Cordialement.

[Bourdel]

J'ai ajouté ça dans global.css :

 

li.htmlcontent-item-1.col-xs-4

{

  max-width: 100%;

  height:auto;

}

 

Cela correspond à l'image que je vous ai montré.

 

j'ai essayé de le centrer en le décalant à droite :

 

li.htmlcontent-item-1.col-xs-4

{

  max-width: 100%

  height:auto;

  margin-left:388px;

}

 

mais plus responsive design

 

Comment puis-je faire ? 

 

[FMR]

li.htmlcontent-item-1.col-xs-4

{

  max-width: 100%;

  height:auto;

  margin:auto 0;

}

Remplacer le 0, dans margin, par le nombre de pixels que vous voulez en haut ET en bas.
Exemple: "margin: auto 5px;" ajoutera 5 pixels au dessus, ET 5 en dessous.

Edited January 19, 2015 by FMR (see edit history)

[Bourdel]

Hmm l'image reste à gauche. 

 

Deja essayé également avec :

 

margin-right:auto;

margin-left:auto;

 

juste en dessous du code que j'ai rajouté, ll y a :

 

.col-xs-1,

.col-xs-2,

.col-xs-3,

.col-xs-4,

.col-xs-5,

.col-xs-6,

.col-xs-7,

.col-xs-8,

.col-xs-9,

.col-xs-10,

.col-xs-11 {

  float: left; }

 

peut etre pour ça que ça fonctionne pas?

Edited January 19, 2015 by Bourdel (see edit history)

[FMR]

Un lien vers le site, que je vois le code ? Parce que là, ca va durer 50 ans, sinon...

[Bourdel]

Voilà http://corrinecouppe.fr

[FMR]

Correction :

li.htmlcontent-item-1.col-xs-4 {

    height: auto;

    max-width: 100%;

}

.col-xs-4 {

    float: none;

    text-align: center;

}

 
Enjoy !
Bonne continuation.

[Bourdel]

Le texte s'est bien aligné mais l'image est toujours à gauche.

 

Doit manquer un bout de code dans li.htmlcontent-item-1.col-xs-4

[FMR]

Mon code marche parfaitement. A vous de remplacer l'ancien par celui-ci, puis de vider votre cache.
Bonne continuation.

[Bourdel]

J'ai remplacé et vidé le cache et pourtant l'image n'a pas bougé :/

[FMR]

Non, vous ne l'avez pas remplacé entièrement... seulement la 1ere partie...

Global.css ligne 667, vous avez :

.col-xs-4 {

    width: 33.3333%;

}

que je vous ai dit de remplacer par :
 

.col-xs-4 {

    float: none;

    text-align: center;

}
 

Faut TOUT lire, et TOUT faire, sinon, ça sert à rien.

EDIT : Finalement, remplacez bien avec le text-align, désolé.

Edited January 19, 2015 by FMR (see edit history)

[Bourdel]

Bah pourtant mon image n'est toujours pas centré, elle s'est beaucoup agrandi ...

 

Hmm pourtant je crois bien voir suivi les étapes...

[FMR]

Désolé du double post.
Finalement, j'ai bien regardé ça de plus prêt, et en fait, y a juste à mettre/remplacer dans global.css, pour que ca marche, par :

.col-xs-4 {

    float: none;

    text-align: center;

}

Pour ce qui est de la ligne :

li.htmlcontent-item-1.col-xs-4 {

    height: auto;

    max-width: 100%;

}

Vous pouvez carrément la supprimer. Elle sert à rien, et ce sera plus propre.
Désolé d'avoir eu autant de mal, sale journée.

Bonne continuation.

Edited January 19, 2015 by FMR (see edit history)

[Bourdel]

Ah voilà c'est mieux merci !  

 

Mais cette fois-ci le bloc facebook s'allonge alors qu'il doit etre à coté des blocs d'informations 

[FMR]

Normal, il est ancré dans la partie qui était divisé en 3 (33.333333%), qu'on a supprimé pour que l'image puisse être en grand.
Remplacez dans Global.css :
 

#cmsinfo_block {

    border-left: 1px solid #d9d9d9;

    float: right;

    width: 66.667%;

}

ET
 

#facebook_block, #cmsinfo_block {

    background: none repeat scroll 0 0 #f2f2f2;

    float: left;

    min-height: 361px;

    overflow: hidden;

    padding-left: 29px;

    padding-right: 29px;

}

[Bourdel]

C'est beaucoup mieux merci !

 

Mias normal que le bloc facebook remonte après 2 zooms de la page? 

[FMR]

Oui, normal que ça bouge, si on donne pas des longueur précises au bloc.
Il suffit d'ajouter  "width: 33.333%;" à la ligne #facebook_block, #cmsinfo_block {}
Ce qui donnera :
 

#facebook_block, #cmsinfo_block {

    background: none repeat scroll 0 0 #f2f2f2;

    float: left;

    min-height: 361px;

    overflow: hidden;

    padding-left: 29px;

    padding-right: 29px;

    width: 33.333%;

}

Mais honnêtement, très peu utilise le zoom du navigateur, et au delà de 2 fois zoom, presque personne.
Les sites ne sont pas fait pour ça, mais pour être lisible sans zoom !

[Bourdel]

Merci je mets donc en résolu  

[Oron]

Bonjour

 

Cliquez sur le bouton Mark Solved sur la meilleur réponse ça l'affiche en haut du topic

1 bouton vert sur la réponse et un bouton vert devant le sujet du topic.