Sujets similaires

Bonjour/bonsoir,

Voilà je refais appel à vous parce que j'ai un énorme décalage au niveau de mon qeel [résolu]Décalage de mon qeel 1779901633

, voyez plutot : http://pooop-s.forumgratuit.org/forum

En bas mes groupes sont déformés, je voudrais mettre les images des groupes sur l'image "Groupes", tout en gardant l'autre image "who's here?" à droite de celle ci.

J'espère que ce n'est pas grave de refaire une autre demande .. Merci enormément Smack Smack

Mon template :

Code:: 
<table border="0"><tr><td><img src="http://img15.hostingpics.net/pics/695209groupes.png"><td valign="top"><img src="http://img15.hostingpics.net/pics/517180whoshere.png" align="right" alt="" /><tbody><tr><td width="150" valign="top"><center></td>
<tr><td width="150" valign="top"><div class="transition-tfax">

<img width="48" height="48" src="http://img15.hostingpics.net/pics/45376321717bubkaBananaTwins.png" alt="" />
<div class="block_transitionx">
<h3>Débutant</h3>
<span>
Limitation à un collage. Aucune finition, et aucune technique. Aucun acquis. <br />
<a href="#profil">Voir le groupe</a>
</span>
</div>
</div>
</td>
<tr><td width="150" valign="top"><div class="transition-tfax">
<img width="48" height="48" src="http://img15.hostingpics.net/pics/14102821720bubkaOrange1.png" alt="" />
<div class="block_transitionx">
<h3>Futur apprenti</h3>
<span>
Des bases manquant de travail, aucun approfondissement et pas de finitions.<br />
<a href="#profil">Voir le groupe</a>
</span>
</div>
</div></td>
<tr><td width="150" valign="top"><div class="transition-tfax">
<img width="48" height="48" src="http://img15.hostingpics.net/pics/80617321723bubkaPeasHeart.png" alt="" />
<div class="block_transitionx">
<h3>Apprenti</h3>
<span>
Les bases sont comprises et maîtrisées au minimum. Manque d'originalité et bannières trop fades. <br />
<a href="#profil">Voir le groupe</a>
</span>
</div>
</div></td>
<tr><td width="150" valign="top"><div class="transition-tfax">
<img width="48" height="48" src="http://img15.hostingpics.net/pics/56122421718bubkaIceCream.png" alt="" />
<div class="block_transitionx">
<h3>Futur grapheur</h3>
<span>
Maîtrise des bases. Fond, inscrutation et écritures bien réalisées, mais pouvant être amélioré. <br />
<a href="#profil">Voir le groupe</a>
</span>
</div>
</div></td>
<tr><td width="150" valign="top"><div class="transition-tfax">
<img width="48" height="48" src="http://img15.hostingpics.net/pics/52473621722bubkaPearTwo.png" alt="" />
<div class="block_transitionx">
<h3>Grapheur</h3>
<span>
Le graphisme est maîtrisé. Beaucoup de travail, de l'originalité et des finitions. <br />
<a href="#profil">Voir le groupe</a>
</span>
</div>
</div></td>
<tr><td width="150" valign="top"><div class="transition-tfax">
<img width="48" height="48" src="http://img15.hostingpics.net/pics/25587321719bubkaMarmaladeCubes.png" alt="" />
<div class="block_transitionx">
<h3>Professionnel</h3>
<span>
Perfection (Incrustation, Typographie, Finitions, Originalité, Travail ...) <br />
<a href="#profil">Voir le groupe</a>
</span>
</div>
</div></td>
<tr><td width="150" valign="top"><div class="transition-tfax">
<img width="48" height="48" src="http://img15.hostingpics.net/pics/51323021716bubkaBanana.png" alt="" />
<div class="block_transitionx">
<h3>Directrices</h3>
<span>
Comme le nom l'indique, elle dirigent le forum. Ouvre les nouveautés et annonces. <br />
<a href="#profil">Voir le groupe</a>
</span>
</div>
</div></td></tr>

<table cellspacing="2" cellpadding="2" width="750" style="background: url('http://img15.hostingpics.net/pics/528068qeel.png'); width: 750px; height: 477px;">
<tbody><tr><td><div class="tableqeel1"><span class="gensmall"><div style="font-size: 11px; line-height: 12px; text-align: justify;"><br>
<span id="mb_inscrits">{TOTAL_USERS}<script type="text/javascript">document.getElementById('mb_inscrits').innerHTML=document.getElementById('mb_inscrits').innerHTML.replace(/membres enregistrés/,"personnes inscrites sur Graph Perle,");</script></span> <span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres ont posté un total de/,"qui aiment taper sur leurs claviers... Ils ont poster environ");</script></span>. <span id="newest">{NEWEST_USER}<script type="text/javascript">document.getElementById('newest').innerHTML=document.getElementById('newest').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"La dernière personne à s'être inscrit sur GP est");</script></span>, nous lui souhaitons la bienvenue parmi nous !<br/>
<span id="online">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/ Enregistré/," grapheur(s)");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/Invité/, "sécheur(s) de cours");document.getElementById('online').innerHTML=document.getElementById('online').innerHTML.replace(/utilisateur en ligne/, "graph perlien(s)");</script></span> <br/>
<span id="onlineuser">{LOGGED_IN_USER_LIST}<script type="text/javascript">document.getElementById('onlineuser').innerHTML=document.getElementById('onlineuser').innerHTML.replace(/Utilisateurs enregistrés/,"Les grapheurs disponible en ce moment sur GP sont");</script></span>{RECORD_USERS}.</div></span></div></td>

<td><div class="tableqeel2"><span class="gensmall"><div style="height: 110px; overflow: auto;">
<table cellspacing="2" cellpadding="2" align="center" style="text-align: justify;" class="listlastconnected">
<tbody><tr><td class="row1">{L_CONNECTED_MEMBERS}</td></tr></tbody></table></div></span></div></td></center>

Tu devrais peut être les mettre dans un conteneur, de la taille que tu souhaite, nan ? Comme ça, tu ajuste les images dans ce conteneur, puis tu peux positionner le bloc en question à l'endroit qui lui est réservé.

Code:: .conteneur {
width: 200px;
height: 200px;
}

Ensuite, tu peux ajuster les images à l'intérieur de ce cadre

Code:: .conteneur img {
display: inline-block;
float: left;
}

Enfin, je sais pas, il faudrait essayer. :3

Je n'ai pas bien compris .. :s Quand vous dites "les mettres dans un conteneur" vous voulez dire leur mettre une div ?

Oui. ^^ Et redimenssionner le div après. (: Enfin, c'est peut être pas la meilleure idée, faudrait attendre d'autres avis. x)

J'ai essayé, mais là ca déplace juste l'image de fond, pas les groupes..

Si j'ai bien compris, le but est de mettre les images des groupes dans le cadre prévu à cet effet, c'est bien ça ?

Si oui, essaye de remplacer tl'image sur laquelle tu essaye de positionner les éléments en un div, avec l'image en question en background. Et met directement tes infobulles dedans. :O

Code:: <div style="background-image: url('http://img15.hostingpics.net/pics/695209groupes.png');">
<div class="infobulle">
<img src="image.png" />
<span>Contenu</span>
</div>
<div class="infobulle">
<img src="image.png" />
<span>Contenu</span>
</div>
<div class="infobulle">
<img src="image.png" />
<span>Contenu</span>
</div>
</div>

Coucou, merci beaucoup pour vos réponse Very Happy

Par contre là je ne sais vraiment pas comment bidouiller le contenu et tout ... La codeuse qui était censée faire le design n'est plus disponible, et il est prévu pour ce soir .. Je ne comprends pas beaucoup le codage et là je suis vraiment perdue dans tout ces codes .. [résolu]Décalage de mon qeel 3517359236

Est ce que vous pouvez à partir de mon template, m'expliquer ce qui se passe ? Sinon de modifier en gardant mon template d'origine ? parce que je ne sais pas comment modifier le contenu et tout comme sur votre exemple .. Embarassed

Si ce n'est pas trop demandé Embarassed

Merci !

Bonjour Xibition !

(T'es au courant qu'il y a écrit poop dans l'adresse de ton forum ? O.o)

Pour l'urgence du design, on n'y peut pas grand chose XD

*Attention, à partir de ce moment là, je suis beaucoup moins aimable parce que j'ai entrepris de résoudre le problème et... voilà quoi*

Sinon, pour ce qui est du problème, c'est essentiellement parce qu'il a été codé à la truelle (et je pèse mes mots ><) : ni les tableaux ni les lignes ne sont fermés (pas de < / tr > ni de < / table > ). A ce stade là, on ne peut pas faire grand chose à part du raccommodage, ou demander à la codeuse d'origine de s'en occuper (vu qu'elle code n'importe comment, elle doit savoir comment rajouter des conneries pour que ça marche par magie)

Je n'ai pas envie de corriger tout le code (c'est une horreur) mais voici un raccommodage rapide, qui est simplement la mise en pratique de ce qu'a proposé Damudo :

Première étape, tu remplaces la ligne :

Code:: <img src="http://img15.hostingpics.net/pics/695209groupes.png">

Par ceci :

Code:: <div class="BlocGroupes">
<div class="BlocGroupesContent">
<div class="transition-tfax">
   <img width="48" height="48" src="http://img15.hostingpics.net/pics/45376321717bubkaBananaTwins.png" alt="" />
   <div class="block_transitionx">
         <h3>Débutant</h3>
         <span>
         Limitation à un collage. Aucune finition, et aucune technique. Aucun acquis. <br />
         <a href="#profil">Voir le groupe</a>
         </span>
   </div>
</div>
<div class="transition-tfax">
   <img width="48" height="48" src="http://img15.hostingpics.net/pics/14102821720bubkaOrange1.png" alt="" />
   <div class="block_transitionx">
         <h3>Futur apprenti</h3>
         <span>
         Des bases manquant de travail, aucun approfondissement et pas de finitions.<br />
         <a href="#profil">Voir le groupe</a>
         </span>
   </div>
</div>
<div class="transition-tfax">
   <img width="48" height="48" src="http://img15.hostingpics.net/pics/80617321723bubkaPeasHeart.png" alt="" />
   <div class="block_transitionx">
         <h3>Apprenti</h3>
         <span>
         Les bases sont comprises et maîtrisées au minimum. Manque d'originalité et bannières trop fades. <br />
         <a href="#profil">Voir le groupe</a>
         </span>
   </div>
</div>
<div class="transition-tfax">
   <img width="48" height="48" src="http://img15.hostingpics.net/pics/56122421718bubkaIceCream.png" alt="" />
   <div class="block_transitionx">
         <h3>Futur grapheur</h3>
         <span>
         Maîtrise des bases. Fond, inscrutation et écritures bien réalisées, mais pouvant être amélioré. <br />
         <a href="#profil">Voir le groupe</a>
         </span>
   </div>
</div>
<div class="transition-tfax">
   <img width="48" height="48" src="http://img15.hostingpics.net/pics/52473621722bubkaPearTwo.png" alt="" />
   <div class="block_transitionx">
         <h3>Grapheur</h3>
         <span>
         Le graphisme est maîtrisé. Beaucoup de travail, de l'originalité et des finitions. <br />
         <a href="#profil">Voir le groupe</a>
         </span>
   </div>
</div>
<div class="transition-tfax">
   <img width="48" height="48" src="http://img15.hostingpics.net/pics/25587321719bubkaMarmaladeCubes.png" alt="" />
   <div class="block_transitionx">
         <h3>Professionnel</h3>
         <span>
         Perfection (Incrustation, Typographie, Finitions, Originalité, Travail ...) <br />
         <a href="#profil">Voir le groupe</a>
         </span>
   </div>
</div>
<div class="transition-tfax">
   <img width="48" height="48" src="http://img15.hostingpics.net/pics/51323021716bubkaBanana.png" alt="" />
   <div class="block_transitionx">
         <h3>Directrices</h3>
         <span>
         Comme le nom l'indique, elle dirigent le forum. Ouvre les nouveautés et annonces. <br />
         <a href="#profil">Voir le groupe</a>
         </span>
   </div>
</div>
</div>
</div>

Tu rajoutes ceci dans ton CSS :

Code:: .BlocGroupes {
background:url('http://img15.hostingpics.net/pics/695209groupes.png') top center no-repeat;
width:292px;
height:281px;
position:relative;
}

.BlocGroupesContent {
padding:80px 40px 10px 50px;
text-align:center;
}

Et dans la classe .transition-tfax de ton CSS, tu rajoutes display:inline;

Ensuite, dans ton template, tu vires tout ce qu'il y a entre :

Code:: <img src="http://img15.hostingpics.net/pics/517180whoshere.png" align="right" alt="" />

et

Code:: <table cellspacing="2" cellpadding="2" width="750" style="background: url('http://img15.hostingpics.net/pics/528068qeel.png'); width: 750px; height: 477px;">

Et tu remplaces par ça

Code:: </td></tr></table>

A la fin de ton code de QEEL (dernière ligne avant le END disable_viewonline), remplace aussi

Code:: <table cellspacing="2" cellpadding="2" align="center" style="text-align: justify;" class="listlastconnected"><tbody><tr><td class="row1">{L_CONNECTED_MEMBERS}</td></tr></tbody></table></div></span></div></td></center>

Par

Code:: <table class="listlastconnected">{L_CONNECTED_MEMBERS}</table></div></span></div></td></tr></table>

Ca corrigera au moins un faible pourcentage des horreurs de ce code.

Maintenant je vais aller me rincer les yeux, ils saignent.

omg vous ne savez pas à quel point je vous aime en ce moment [résolu]Décalage de mon qeel 2176505670

Merci beaucoup , mais sérieusement vous me sauvez [résolu]Décalage de mon qeel 1001172573

Hello (:
Je vois que le problème est résolu, par conséquent je classe ! (:
Merci de l'avoir signalé [résolu]Décalage de mon qeel 926145

[résolu]Décalage de mon qeel

[résolu]Décalage de mon qeel

Sujets similaires

Sujets similaires

Partenaires Or