|
 Nye-Hael 
{ Membre }
 Messages : 100
 | Bonjour ! ~ C'est encore moi. J'ai un problème avec le code qui me permet de pouvoir mettre des images pour illustrer mes forums. En effet, dans le code de base, l'image était directement intégrée au template (compliqué pour varier la chose). J'ai depuis modifié le bazar qui donne désormais ceci : - Code:
-
<div class="forum"> <table><tr><td><table><tr><td><div class="derstat2"><span class="forum_icone"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></span> <span class="stats">{catrow.forumrow.TOPICS} sujets ; {catrow.forumrow.POSTS} messages</span><span class="last">{catrow.forumrow.LAST_POST}</span></div></td><td><div class="forumlink2" style="margin-bottom:-15px"><a class="forumlink2" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><br /> <div style="background-color:grey"><span class="description">{catrow.forumrow.FORUM_DESC}</span></div></td></tr></table> <div style="margin-left:3px"><div class="sousforum2">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div></td><td><div class="illustest1"></div></td></tr></table> </div> - Code:
-
/* TEST CATEGORIE DEBUT */
.forumlink2 {
text-align:center;
padding:5px;
font-style:italic;
font-family:Georgia;
font-size:12px;
background-color:#a8bed5;
color: #3b536c!important;
text-transform:uppercase;
letter-spacing:2px;
-webkit-transition: all 1s;
-moz-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
}
.illustest1{
background-color: #9a94aa;
width: 150px;
height: 200px;}
.illustest2{
width: 150px;
height: 200px;}
.forumlink2:hover{
letter-spacing: 4px;
font-family:georgia;
color: #3b536c;}
.derstat2 {
height:127px;
width:140px;
background-color:#ffffff;
text-align:center;
padding:10px;
color: #96a4b3;
border-radius: 70px 70px 70px 70px;
}
.sousforum2 {
background-color:#6499BB;
padding:10px;
width:624px;
height:30px;
overflow:auto;
color:#6499BB;
}
/* TEST CATEGORIE FIN */ Petit screen du monstre : https://i.servimg.com/u/f55/13/92/87/40/screen11.png Seulement, je sais pas comment faire, quel code monter pour pouvoir choisir mes illustrations (quand illu il y aura) et donc éviter d'avoir à en intégrer juste une seule au template. Merci d'avance pour votre aide ! | | |
|
 | |
Nihil 
{ Modérateur }
Messages : 1216
| Il y a plusieurs manières de faire, mais toutes me semble un peu "sales" au niveau du code... Pense à donner le lien de ton forum quand c'est possible (même sous balise hide si tu ne veux pas que les gens le voit).
Une des solutions serait de mettre l'image dans la description de chaque forum, et ensuite de décaler l'image en CSS. | | |
|
| | |
Nye-Hael
{ Membre }
Messages : 100
| Bonsoir,
Désolée pour le lien du forum, le voici : http://i-m-radioactive.forumactif.org/
Si j'ai bien compris, l'idée serait de créer une classe en CSS avec le positionnement de l'image ? | | |
|
| | |
Nye-Hael
{ Membre }
Messages : 100
| Bonsoir,
Juste pour prévenir que la demande est encore d'actualité et que je n'ai fait aucun progrès jusque lors.
Merci d'avance | | |
|
| | |
Nihil
{ Modérateur }
Messages : 1216
| - Nye-Hael a écrit:
- Si j'ai bien compris, l'idée serait de créer une classe en CSS avec le positionnement de l'image ?
Oui c'est ça ^^ Attention si à des endroits dans ton CSS pour la description tu as des "overflow: hidden", ça cacherait une image positionnée en dehors de la description. | | |
|
| | |
Nye-Hael
{ Membre }
Messages : 100
| C'était bien l'overflow:hidden; qui masquait mon image, mais maintenant, je me retrouve avec un enboîtement de plusieurs overflows les uns dans les autres, et mon image se retrouve dans la description, même quand je la sors du code que j'ai bidouillé : - Code:
-
<div class="description"> <div class="descriptext"> Située entre les chaînes de Svartalfheim et d'Angrboda, celle ville mystique n'ouvre ses portes qu'aux rares ayant quelque chose à raconter et à voir. Surplombant l'ensemble du monde, l'on dit que sa cité fut la plus belle, à l'égal de Muninn et sa jumelle Huginn, jusqu'à la Terrible Chute. Elle est la ville de l'espoir et des rêves, lieux où les hommes et les dieux forgèrent leurs biens les plus précieux. </div> </div> <span class="illustest2"><span style="display: block; width: 150px; height: 200px; background: url('http://i57.servimg.com/u/f57/16/06/42/02/alfhei11.png') center center no-repeat;"></span></span> Et voici mon magnifique enchâssement d'overflows : https://i.servimg.com/u/f57/16/06/42/02/bleh10.png | | |
|
| | |
Nihil
{ Modérateur }
Messages : 1216
| Alors pour l'enchâssement d'overflows (des plus magnifiques, j'en convient  ) Il faut que tu enlèves dans le css pour .description la ligne overflow: auto ^^ Néanmoins pour garder un overflow si la description texte est trop longue, tu peux mettre l' overflow: auto pour .descriptext. Tu peux essayer de mettre ça pour ton CSS pour le placement de l'image : - Code:
-
.illustest2 {
position: absolute;
left: 495px;
top: -40px;
}
C'est pas une solution propre, on pourrait le faire autrement en javascript, mais je ne sais pas si ça ne serait pas tout aussi "sale" en JS haha ^^ | | |
|
| | |
Nye-Hael
{ Membre }
Messages : 100
| On n'est pas loin, maintenant le truc c'est d'arriver à faire sortir l'image de la description. Parce que même là, elle a l'air décidée d'y rester
(oui, il était beau mon enchâssement d'overflow) (et il est revenu d'ailleurs) | | |
|
| | |
Nihil
{ Modérateur }
Messages : 1216
| Voilà à quoi ça ressemble chez moi : https://i.imgur.com/6vi3vlj.png
Comment est ton résultat ?
J'ai testé sur Firefox, Chrome et IE ^^ | | |
|
| | |
Nye-Hael
{ Membre }
Messages : 100
| ... Ma page s'était mal actualisée et je ne l'avais pas vu XD
Un immense merci pour ton aide ! ♥ | | |
|
| | |
Contenu sponsorisé
| |
| | |
|
