CSS qui ne s'applique pas aux images
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
CSS qui ne s'applique pas aux images
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.
D'avance merci aux personnes qui se pencheront sur mon problème.
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:
- Code:
.prez1 {width: 490px;
margin-left: auto;
margin-right: auto;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 5px;
background: #EEEEC6;
line-height: 16px;}
.prez2 {margin-left: 25px;}
.postbody {margin-left: 10px;
margin-right: 10px;
text-align: justify;}
- Message en lui-même:
- Code:
<img src="http://media.giphy.com/media/DfzVdbj45WcU0/giphy.gif" class="prez2" /><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>
D'avance merci aux personnes qui se pencheront sur mon problème.
Dernière édition par Cameo. le Dim 6 Oct 2013 - 19:02, édité 1 fois
Cameo.- Nouveau membre
- Messages : 10
Inscrit(e) le : 04/10/2013
Re: CSS qui ne s'applique pas aux images
Bonjour,
Je pense que vous avez oublier la position:absolute; dans le css.
Cordialement,
Phinolex.
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;
}
Cordialement,
Phinolex.
Re: CSS qui ne s'applique pas aux images
Ç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. : )
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. : )
Cameo.- Nouveau membre
- Messages : 10
Inscrit(e) le : 04/10/2013
Re: CSS qui ne s'applique pas aux images
Je m'en doutais. ._.'Cameo. a écrit:Ça ne fonctionne absolument pas
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>
- 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;
}
Re: CSS qui ne s'applique pas aux images
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;
}
Re: CSS qui ne s'applique pas aux images
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 ! : )
Cameo.- Nouveau membre
- Messages : 10
Inscrit(e) le : 04/10/2013
Sujets similaires
» opacité images et images cliquables
» Les images http:// ne s'affichent plus contrairement aux images https:// qui s'affichent correctement.
» Mettre un slider d'images a la place de son images dans "Qui est en ligne ?"
» Problème d'affichage des images servimg : les images n'apparaissent plus sur les forums!
» Absence d'images dans la rubrique "Images partagées récemment"
» Les images http:// ne s'affichent plus contrairement aux images https:// qui s'affichent correctement.
» Mettre un slider d'images a la place de son images dans "Qui est en ligne ?"
» Problème d'affichage des images servimg : les images n'apparaissent plus sur les forums!
» Absence d'images dans la rubrique "Images partagées récemment"
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum