Placement d'un élément dans une fiche de sujet

[Runa Moon]

Détails techniques

Version du forum : phpBB2
Poste occupé : Administrateur
Navigateur(s) concerné(s) : //
Personnes concernées par le problème : //
Problème apparu depuis : //
Lien du forum : https://les-mondes-sauvages.forumsrpg.com/

Description du problème

Bonjour, bonsoir,

Je suis en train d'essayer de coder une fiche pour mes sujets et voilà : je n’arrive pas à fixer mes crédits en bas de mon code. Ils se placent automatiquement sous ma zone de texte, et je ne sais pas comment faire pour qu'ils restent fixes, sachant que l'image et la zone de texte devront pouvoir être scrollées.

Je vous mets le fameux code ici :

Code:

<center><div style="width: 600px; height: 900px; background-image: url(https://zupimages.net/up/20/05/o907.png) ; font-family: georgia; color:dimgray"></br></br><div style="text-shadow: 1px 1px 2px white; font-size: 30px; color:silver"><em>Contexte</em></div></br></br><img src="https://zupimages.net/up/20/05/7di8.png"/></br></br>
<div style="background-color:#DBDBD7; width: 550px; text-align: justify; font-size: 12px; border: 2px solid grey;">CONTEXTE</div><i>codage et graph' by Galatée</i></div></center>

Merci d'avance !

[Scoubifitz]

Bonsoir,

En donnant une hauteur au texte , et non à l'ensemble ...
Exemple avec beaucoup de texte :

Code:

<div style="width: 600px; margin:auto;text-align:center; background-image: url(https://zupimages.net/up/20/05/o907.png) ; font-family: georgia; color:dimgray"> <div style="text-shadow: 1px 1px 2px white; font-size: 30px; color:silver"><em>Contexte</em></div> <img src="https://zupimages.net/up/20/05/7di8.png"/> <div style="background-color:#DBDBD7;width:550px;margin:auto;height:370px;overflow:auto;text-align:justify;padding:5px;font-size:12px;border:2px solid grey;">CONTEXTE<br> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. <br> Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br> Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. <br> Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Curabitur vel blandit massa. Fusce lacinia commodo metus eget consequat. <br> Duis ut malesuada sapien. Vestibulum augue risus, condimentum non rutrum ac, ultrices ut justo. Proin mauris libero, feugiat ac tempor in, volutpat a libero. Donec pellentesque nunc dolor, non rhoncus massa fermentum quis. Vestibulum massa nunc, gravida eget tellus sit amet, accumsan convallis odio. Phasellus ac vulputate dolor, et semper purus. Fusce at porttitor dui. Praesent pulvinar libero condimentum, tempor nulla et, vestibulum risus. Vivamus non elementum purus, sed interdum nunc. Nam hendrerit sed sapien sit amet scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia malesuada elit, a laoreet est aliquet ac. Nullam ac augue at erat tristique sodales. <br> Phasellus facilisis dolor eget tellus varius gravida. Donec suscipit eros quam, vel mattis erat ultrices quis. Donec ac viverra dolor, ac accumsan ex. Sed rhoncus mollis velit vel facilisis. Aliquam fermentum nec felis nec porttitor. Morbi enim ipsum, sagittis interdum hendrerit feugiat, tempus vitae lectus. Vestibulum eleifend felis sit amet tortor sagittis aliquet. Duis lacinia tristique urna, eu iaculis urna pretium et. Sed ut placerat nibh. </div> <div style="padding:5px"><i>codage et graph' by Galatée</i></div> </div>

[Runa Moon]

Merci d'avoir répondu, mais c'est justement ce que je cherche à éviter (surtout que ça je sais le faire ^^).

Je voudrais créer une div qui engloberait l'image ET le texte, et les ferait bouger en même temps.

[Scoubifitz]

Mea culpa ,

il faut donc englober l'image et le texte et donner la hauteur au scroll ...

Code:

<div style="width: 600px; margin:auto;text-align:center; background-image: url(https://zupimages.net/up/20/05/o907.png) ; font-family: georgia; color:dimgray"> <div style="text-shadow: 1px 1px 2px white; font-size: 30px; color:silver"> <em>Contexte</em> </div> <div style="height:600px;overflow:auto;padding:5px;"> <img src="https://zupimages.net/up/20/05/7di8.png"/> <div style="background-color:#DBDBD7;width:550px;margin:auto;text-align:justify;padding:5px;font-size:12px;border:2px solid grey;"> CONTEXTE<br> <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis gravida neque. Suspendisse egestas nulla quis massa ultricies, in ultricies erat commodo. Integer pretium, ligula euismod varius efficitur, justo metus lacinia nisl, id luctus velit dui ut magna. Proin pretium mauris sed dolor ullamcorper porta. Duis facilisis vulputate metus dapibus accumsan. Sed leo felis, aliquam nec interdum id, vulputate a neque. Integer gravida tortor tristique lorem ullamcorper, non lacinia mi feugiat. <br> Nullam interdum, nibh ac luctus iaculis, justo velit porttitor ligula, eu tincidunt dui ligula id elit. Sed turpis velit, elementum eu nisl nec, tincidunt egestas tellus. Donec sed nisi porttitor, commodo dui at, finibus mi. Praesent pellentesque euismod ex, sodales congue nisl facilisis sit amet. Proin blandit laoreet mi, sed tempor ipsum lacinia at. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tellus orci, aliquet tristique elementum quis, malesuada sit amet magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. <br> Phasellus velit libero, placerat eu nisi eget, ultrices porta dui. Morbi sapien sapien, placerat ac aliquet et, porta quis urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur a blandit leo, id mattis turpis. Suspendisse massa risus, pretium vitae ex ac, sodales finibus mauris. Etiam mollis diam sed elementum consequat. Nullam convallis ut tellus ac convallis. Nullam ac ex nec augue viverra egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean accumsan semper velit a aliquet. <br> Duis laoreet sollicitudin lorem, nec ornare felis bibendum non. Proin vitae metus accumsan odio cursus laoreet. Vivamus placerat posuere sapien, id pellentesque tellus. Curabitur mollis diam vitae sodales lobortis. Mauris volutpat enim rhoncus consectetur sollicitudin. Maecenas imperdiet ullamcorper lectus, quis ullamcorper massa finibus sed. In hac habitasse platea dictumst. Nulla at auctor quam, non varius lectus. Curabitur vel blandit massa. Fusce lacinia commodo metus eget consequat. <br> Duis ut malesuada sapien. Vestibulum augue risus, condimentum non rutrum ac, ultrices ut justo. Proin mauris libero, feugiat ac tempor in, volutpat a libero. Donec pellentesque nunc dolor, non rhoncus massa fermentum quis. Vestibulum massa nunc, gravida eget tellus sit amet, accumsan convallis odio. Phasellus ac vulputate dolor, et semper purus. Fusce at porttitor dui. Praesent pulvinar libero condimentum, tempor nulla et, vestibulum risus. Vivamus non elementum purus, sed interdum nunc. Nam hendrerit sed sapien sit amet scelerisque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed lacinia malesuada elit, a laoreet est aliquet ac. Nullam ac augue at erat tristique sodales. <br> Phasellus facilisis dolor eget tellus varius gravida. Donec suscipit eros quam, vel mattis erat ultrices quis. Donec ac viverra dolor, ac accumsan ex. Sed rhoncus mollis velit vel facilisis. Aliquam fermentum nec felis nec porttitor. Morbi enim ipsum, sagittis interdum hendrerit feugiat, tempus vitae lectus. Vestibulum eleifend felis sit amet tortor sagittis aliquet. Duis lacinia tristique urna, eu iaculis urna pretium et. Sed ut placerat nibh. </div> </div> <div style="padding:5px"> <i>codage et graph' by Galatée</i> </div> </div>

[Runa Moon]

Yay, c'est parfait ! Merci !