Je n'arrive pas à centrer mon image et mon texte dans le contenu [Fermé]

Signaler
Messages postés
29
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
21 janvier 2015
-
 gnondpom -
Bonjour à tous,
Je me tire les cheveux depuis plusieurs heures, voir depuis plusieurs jours car je n'arrive pas à mettre du texte à droite de mon image !
Mon image et son texte doivent être centrés dans le contenu
Je pense que c'est assez simple mais vu ma nullité je n'y arrive pas.
J'ai essayé le float etc mais je n'y arrive pas.
Quelqu'un peu m'aider svp .
CSS
http://www.votre-faire-part.com/test/css/carte-enveloppe.css
IMG.impression {
display: block;
margin-left: auto;
margin-right: auto
}


HTML
http://www.votre-faire-part.com/test/carte-enveloppe-blanche-350.htm
<img src="cartes-enveloppes/carte-blanche-350-gr.jpg" class="impression" alt="" title="" />
<p><u>Dimension de la carte simple</u><br/>
Format : 14 X 10.5 CM<br/>
Grammage : 350 gr<br/><br/>
<u>Caractéristique de l'enveloppe</u><br/>
Format : 11.4 x 16.2 cm<br/>
Grammage : 120 gr<br/></p>
<hr class="clear"/>
</div>


A savoir que sous cette image et son texte il y aura d'autres images et leur texte (pour éviter l'effet escalier que dois-je faire ?)
Help help
Garance

2 réponses

Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
83
Déjà pour les balises p c'est pas prévu de les mettre en page (enfin p'tet que si mais c'est tellement la galère, des fois j'ai l'impression que ça bug) je te conseille de mettre des div à la place.

Sinon t'as mis une balise div qui se ferme, mais pas celle qui ouvre. Mais je pense que c'est une erreur de copier/coller.

Si tu mets un margin auto à un élément, le margin va prendre toute la place qu'il peut. Un autre élément ne peut pas se mettre sur cette place, et va aller en dessous (ou à l'autre bout de la galaxie si on est sous IE6).
La solution c'est d'encastrer des balises. On part de celles qui sont le plus encastrées : l'img et la div avec le texte. Dans l'html elles sont au même niveau. Et vu que l'une doit être à côté de l'autre, il faut leur mettre un float: left à chacune.
Attention avec float : il faut mettre une autre div, qui a comme style clear: both, au même niveau que les float, pour que la div parent prenne de l'espace.

Ces 3 éléments là doivent être centrés, mais on peut pas le faire à cause du float. On les fourre donc dans une div, qui elle va être centrée avec les margin auto.

Enfin cette dernière div doit être dans une autre div encore (ou un autre truc, mais les div c'est la vie ! ^^ ) qui doit avoir une dimension (width) précisée (en général on met 100%).

Voilà, t'as plus qu'à faire le code !
Messages postés
1811
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
261
Bonjour,

Alors:

HTML

<div class="stabilizer">
<img src="cartes-enveloppes/carte-blanche-350-gr.jpg" class="impression" alt="" title="" />
<p><u>Dimension de la carte simple</u><br/>
  Format : 14 X 10.5 CM<br/>
  Grammage : 350 gr<br/><br/>
  <u>Caractéristique de l'enveloppe</u><br/>
  Format : 11.4 x 16.2 cm<br/>
  Grammage : 120 gr<br/></p>
</div><!--/*.stabilizer-->




CSS

/* pas de IMG.impression mais .impression ou img.impression -- les majuscules ne servent a rien*/
.stabilizer:after {content:"";display:table; width:100%}
.stabilizer.impression {
/*suppression du display:block et des margin*/
    float:left;
    }
.stabilizer p {
margin-top:30px;
margin-left:0;
}


Dans l'idée que les images sont de même dimensions
voila voila :)
Messages postés
29
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
21 janvier 2015

PROBLEME RESOLU
MERCI MERCI
Utilisateur anonyme >
Messages postés
29
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
21 janvier 2015

salut,

Tu pourrais faire profiter la communauté en expliquant comment tu as résolu ta question ? Ca peut aider ...

Cdt
Messages postés
29
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
21 janvier 2015

Oui TU AS RAISON
Donc je voulais mettre une image centrée dans mon contenu.
A droite de l'image un texte aligné sur la gauche et attention abracadabra

<div style="text-align:center;">
<img style="vertical-align:top;" src="cartes-enveloppes/carte-blanche-350-gr.jpg" />
<div style="display:inline-block;text-align:left;">
<ul>
<h5><b>Caractéristique de la carte</b></h5>
<li>Format : 14 X 10.5 CM</li>
<li>Grammage : 350 gr</li>
</ul>
<ul><h5><b>Caractéristique de l'enveloppe</b></h5>
<li>Format : 11.4 x 16.2 cm</li>
<li>Grammage : 120 gr</li>
</ul></div>
</div>

2 jours de tirage de tifs pour ces quelques lignes LOL !!
On en a de la patience n'est-ce pas !!
MERCI A TOUS, vraiment
Utilisateur anonyme >
Messages postés
29
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
21 janvier 2015

^^)
tirage de tifs? sur internet le format tiff est pas du tout recommandé!