Je n'arrive pas à centrer mon image et mon texte dans le contenu
cs_garance
Messages postés
29
Date d'inscription
Statut
Membre
Dernière intervention
-
gnondpom -
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
HTML
http://www.votre-faire-part.com/test/carte-enveloppe-blanche-350.htm
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
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
A voir également:
- Excel centrer une image dans une cellule
- Déplacer une colonne excel - Guide
- Aller à la ligne dans une cellule excel - Guide
- Excel cellule couleur si condition texte - Guide
- Bloquer une cellule excel - Guide
- Liste déroulante excel - Guide
2 réponses
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 !
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 !
Bonjour,
Alors:
HTML
CSS
Dans l'idée que les images sont de même dimensions
voila voila :)
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 :)
OH!
Oui et non, un peu de pédagogie ne fait jamais de mal :)
Il y a quelques petits points à reprendre sur le code mais rien de vraiment essentiel. Le site est bien fait donc je pense que cette personne maitrise un tant soit peu le codage et devrait pouvoir comprendre ce bout de code posté sans plus d'explication que les commentaires inclus.
Oui et non, un peu de pédagogie ne fait jamais de mal :)
Il y a quelques petits points à reprendre sur le code mais rien de vraiment essentiel. Le site est bien fait donc je pense que cette personne maitrise un tant soit peu le codage et devrait pouvoir comprendre ce bout de code posté sans plus d'explication que les commentaires inclus.
Ne vous prenez pas la tête pour moi !! J'adore qu'on m'explique car je suis super nulle. Je fais tout pas après pas. Je n'ai aucune notion en CSS et c'est grâce à vous, des personnes généreux que j'arrive à avancer !! Je vais tout tester mais mes images n'ont pas la même taille et je pense que je vais un peu galérer mais c'est comme ca qu'on apprend. Encore merci à tous les 2. Vraiment
