CSS qui ne s'applique pas aux images

[Cameo.]

Bonsoir !
Je viens vous voir en dernier recourt car j'ai beau chercher pourquoi mon code ne fonctionne pas, je ne comprends pas. xD

Voulant rendre plus esthétique l'affichage d'un sujet, j'ai décidé de mettre une image tout en haut de mon sujet. J'ai appliqué une class pour pouvoir la centrer comme je voulais mais impossible de le faire sans "tricher" par le margin (comprenez sans avoir à calculer moi-même la marge à laisser pour que le bord de l'image coïncide avec le bord du cadre qui entoure le texte). Pour comprendre je vous renvoie à ce screen.

CSS correspondant au screen 1:

Message en lui-même:

Dans ce CSS vous pouvez donc voir que je règle moi-même le margin de l'image. J'ai essayé sans succès de la centrer "automatiquement" avec un position, un text-align center ou un margin-left & margin-right auto. Mais rien ne fonctionne, que j'applique la class directement à l'image ou que je l'encadre d'une div. Dans tous les cas j'obtiens ce résultat. Je ne sais plus quoi faire pour que l'alignement soit bien pris en compte autrement que par la méthode du calcul de margin (méthode qui m'embête un peu pour des futurs personnalisations).

D'avance merci aux personnes qui se pencheront sur mon problème.

[phinolex1]

Bonjour,

Je pense que vous avez oublier la position:absolute; dans le css.

Code:

prez1 {
  position:absolute;
  width: 490px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  background: #EEEEC6;
  line-height: 16px;
}

.prez2 {
  position:absolute;
  margin-left: 25px;
}
 
.postbody {
  position:absolute;
  margin-left: 10px;
  margin-right: 10px;
  text-align: justify;
}

J'espère vous avoir aider.

Cordialement,
Phinolex.

[Cameo.]

Ça ne fonctionne absolument pas, désolé. xD

Le cadre avec le texte superpose l'image qui elle-même superpose la signature. Merci de t'être penché sur mon problème en tout cas. : )

[phinolex1]

Ça ne fonctionne absolument pas

Je m'en doutais. ._.'

J'ai une autre solution :

Code:

<div class="prez2" ></div>
<div class="prez1">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo sapien non nunc tincidunt, a molestie sapien volutpat. Maecenas convallis lacus in suscipit blandit. Fusce consectetur diam sed diam auctor fringilla. Nam in nunc augue. Etiam a mauris nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed cursus enim non ornare rutrum. Etiam tortor mi, dictum et justo at, pharetra gravida nunc. Nam euismod eros non neque adipiscing, non facilisis lectus imperdiet. Duis ut viverra nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit odio.
 
Nam lorem mauris, tempor id eleifend id, tempus ac orci. Curabitur nec sem dolor. Suspendisse molestie sollicitudin faucibus. Donec eget justo dictum ante pulvinar ultrices nec eget nunc. Suspendisse sed convallis nunc. Aenean vestibulum urna vel lectus hendrerit facilisis. Proin ullamcorper, libero nec luctus posuere, erat diam vulputate est, ac pharetra odio sapien a turpis. Phasellus sed erat eget nisi egestas pharetra. Duis feugiat sit amet tortor ac aliquam. Donec ac quam at tellus mattis imperdiet. In faucibus quis justo quis ornare. Cras egestas sapien justo, vel fringilla risus varius at. Nullam nisl purus, congue quis erat nec, porttitor pulvinar est. Fusce et nunc ultricies, gravida elit id, eleifend sem. Sed quis viverra nulla, non ultrices neque.

</div>

CSS :

Code:

.prez1 {
  position:absolute;
  width: 490px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 5px;
  padding-right: 5px;
  padding-bottom: 5px;
  background: #EEEEC6;
  line-height: 16px;
}
 
.prez2 {
  position:absolute;
  margin-left: 25px; /* À modifier afin de centrer correctement l'image */
  width: 500px; /* Taille de votre image */
  height: 281px; /* Taille de votre image */
  background-image: url(http://media.giphy.com/media/DfzVdbj45WcU0/giphy.gif); /* votre image */
}
 
.postbody {
  position:absolute;
  margin-left: 10px;
  margin-right: 10px;
  text-align: justify;
}

Je doute que ce sois bon. Pourriez-vous me passer le lien de votre forum s'il vous plaît ?

[Scoubifitz]

Bonsoir,

Code:

<div class="prez1"><img src="http://media.giphy.com/media/DfzVdbj45WcU0/giphy.gif" /><div class="prez2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed commodo sapien non nunc tincidunt, a molestie sapien volutpat. Maecenas convallis lacus in suscipit blandit. Fusce consectetur diam sed diam auctor fringilla. Nam in nunc augue. Etiam a mauris nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed cursus enim non ornare rutrum. Etiam tortor mi, dictum et justo at, pharetra gravida nunc. Nam euismod eros non neque adipiscing, non facilisis lectus imperdiet. Duis ut viverra nulla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac velit odio.
        
Nam lorem mauris, tempor id eleifend id, tempus ac orci. Curabitur nec sem dolor. Suspendisse molestie sollicitudin faucibus. Donec eget justo dictum ante pulvinar ultrices nec eget nunc. Suspendisse sed convallis nunc. Aenean vestibulum urna vel lectus hendrerit facilisis. Proin ullamcorper, libero nec luctus posuere, erat diam vulputate est, ac pharetra odio sapien a turpis. Phasellus sed erat eget nisi egestas pharetra. Duis feugiat sit amet tortor ac aliquam. Donec ac quam at tellus mattis imperdiet. In faucibus quis justo quis ornare. Cras egestas sapien justo, vel fringilla risus varius at. Nullam nisl purus, congue quis erat nec, porttitor pulvinar est. Fusce et nunc ultricies, gravida elit id, eleifend sem. Sed quis viverra nulla, non ultrices neque.</div></div>

Code:

.prez1 {
width: 500px;
margin: auto;
background: #EEEEC6;
line-height: 16px;
}
.prez2{
padding:0 10px 10px;
text-align: justify;
}
.postbody {
margin-left: 10px;
margin-right: 10px;
text-align: justify;
}

Explication : une première div de la largeur de l'image , l'image dans cette div , une 2e div sous l'image avec les padding nécessaires et contenant le texte .

[Cameo.]

Merci à vous pour votre aide. La première méthode ne fonctionne pas du tout (à cause de la valeur absolute je pense), les textes se superposent. En revanche la deuxième méthode fonctionne nickel. Ce n'est pas tellement la méthode que je voulais à la base (oui je tenais à ma class dans l'image xD) mais comme ça fonctionne, je m'en contente. Merci à vous, problème résolu ! : )