Je n'arrive pas à centrer mon image et mon texte dans le contenu
Fermé
cs_garance
Messages postés
29
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
21 janvier 2015
-
20 janv. 2015 à 16:43
gnondpom - 22 janv. 2015 à 05:44
gnondpom - 22 janv. 2015 à 05:44
A voir également:
- Excel centrer une image dans une cellule
- Aller à la ligne dans une cellule excel - Guide
- Liste déroulante excel - Guide
- Déplacer une colonne excel - Guide
- Verrouiller cellule excel - Guide
- Excel cellule couleur si condition texte - Guide
2 réponses
Kopros
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
20 janv. 2015 à 21:20
20 janv. 2015 à 21:20
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 !
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
20 janv. 2015 à 21:22
20 janv. 2015 à 21:22
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 :)
Kopros
Messages postés
597
Date d'inscription
mardi 25 septembre 2007
Statut
Membre
Dernière intervention
3 février 2020
89
20 janv. 2015 à 21:26
20 janv. 2015 à 21:26
Arf... J'peux aller m'faire fout*e avec ma pédagogie de m....
:o))
:o))
inspiring
Messages postés
1813
Date d'inscription
vendredi 28 janvier 2011
Statut
Membre
Dernière intervention
31 décembre 2018
265
Modifié par inspiring le 20/01/2015 à 21:35
Modifié par inspiring le 20/01/2015 à 21:35
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.
cs_garance
Messages postés
29
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
21 janvier 2015
21 janv. 2015 à 15:51
21 janv. 2015 à 15:51
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
cs_garance
Messages postés
29
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
21 janvier 2015
21 janv. 2015 à 16:03
21 janv. 2015 à 16:03
Bon ben ca marche pas lol !!!
L'image se centre mais le texte passe sous l'image et se justifie à GAUCHE !!
L'image se centre mais le texte passe sous l'image et se justifie à GAUCHE !!
cs_garance
Messages postés
29
Date d'inscription
lundi 1 novembre 2004
Statut
Membre
Dernière intervention
21 janvier 2015
21 janv. 2015 à 21:56
21 janv. 2015 à 21:56
PROBLEME RESOLU
MERCI MERCI
MERCI MERCI
