Sujets similaires

Bien le bonjour! Je reviens vous voir pour avoir des conseils et un peu d'aide, cette fois pour un QEEL personnalisé et... quelque peu récalcitrant.

Le forum : http://untold-legends.keuf.net/ ( Et oui! Encore! )

Bon alors déjà, je ne sais pas si vous avez remarqué, mais certaines parties restent surlignées de noir. Sur mon forum test, c'est un genre de mauve, alors je croyais que c'était à cause des couleurs des cadres du forum, mais après tous les essais que j'ai fait, je suis pas arrivé à enlever ça. J'ai aussi essayé d'ajouter un fond, mais ça a pas fonctionné non plus.

Exemples : https://2img.net/r/ihimizer/img190/6873/blem1.png
https://2img.net/r/ihimizer/img585/1624/blem2.png

Sinon, j'aimerais que le cadre qu'on a survolé puisse rester là, au lieu de disparaître dès que la souris est partie du cadre. On m'a dit que c'était possible seulement avec du javascript, mais je sais pas comment ça marche. Y aurait un moyen de faire ça?

Et un dernier aspect, j'aimerais pouvoir écrire un petit texte dans le cadre bleu, rappelant aux membres qu'ils doivent survoler les noms des groupes pour voir leur description. Si jamais ça pose un problème et demande un fond pour chaque cadre, je peux me débrouiller ( on m'avait dit que les "cadres" se superposaient )

Résumé

Enlever le surlignage noir sur la liste des connectés des 24 heures et des anniversaires
L'onglet reste actif même si on ne le survole plus
Pouvoir écrire un texte dans le cadre bleu pour avertir les membres du contenu.

Désolé de vous en demander autant en si peu de temps, et surtout merci à ceux qui pourront m'apporter un peu d'aide. Je vous laisse les codes du QEEL à la suite.

Le bout du template ( dans Index_box )

Code:: 

<div id="qeel">

<div id="statistiques"><span class="gensmall">{TOTAL_POSTS}<br />
{TOTAL_USERS}<br />
{NEWEST_USER}</span></div>

<div id="informations">
<div id="anniversaires"><span class="annif"><table> {L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}</table></span></div>
<span class="gensmall">{TOTAL_USERS_ONLINE}<br />
{RECORD_USERS}<br />
<br />
{LOGGED_IN_USER_LIST}</span>
<table>{L_CONNECTED_MEMBERS}</table>
</div>

<div id="groupes">
<span class="g1"><span class="g1_infos">Ils sont les gens qui ont été exposés à l'énergie démoniaque de Soul Edge. Pour la plupart, ils possèdent des capacités extraordinaires, mais le prix à payer est tout aussi lourd. La plupart perdent la raison et le contrôle d'eux-même et s'attaquent aux gens pour compenser la carence en énergie démoniaque. Ils sont plus ou moins des partisans indirects de Soul Edge, puisqu'ils dépendent de son énergie. Chaque personne réagit différemment à l'infection, pouvant rester en parfait contrôle de leur corps, ou pouvant même se transformer en créatures monstrueuses. La plupart d'entre eux arrêtent de vieillir à partir d'un certain âge. Parmi eux, on compte notamment la tristement célèbre Tira, les mystérieux Raphael et Amy Sorel, ainsi que Cervantes.</span></span>
<span class="g2"><span class="g2_infos">Ce sont ceux qui pourchassent les Infectés. Leur mission est de les guérir de leur mal, un peu comme des exorcistes. Mais surtout, leur mission est surtout de détruire le mal à la source, en scellant Soul Edge ( et parfois même Soul Calibur! ). La plupart d'entre eux ne se connaissent pas et ont pour la plupart des méthodes différentes de mener à bien leur mission. Certains ont même déjà été exposés à l'énergie démoniaque, de près ou de loin. Les plus célèbres d'entre eux sont Kilik, Xianghua, ainsi que les soeurs Alexandra ; Cassandra et Sophitia.</span></span>
<span class="g3"><span class="g3_infos">Comme leur nom l'indique, ils ne prennent aucune position précise. Certains ne connaissent même pas l'existence des Épées, bien qu'ils aient pu y être exposés de près ou de loin. Ils ont tendance à vivre pour atteindre un objectif bien à eux. On retrouve entre autre Mitsurugi, Setsuka, Dampierre et Ivy parmi ces gens.</span></span>
<span class="g4"><span class="g4_infos">Étant autrefois un groupe de mercenaires, ils sont maintenant une puissante alliance de guerriers qui n'ont pour but que de purger le monde des Infectés qui représentent une menace pour l'humanité. Ils jugent que tout le monde mérite de vivre, et que les infectés ne sont pas responsables de leur malheur, et ne font rien à ceux qui ne représentent pas un danger. On remarque dans leur rang leur chef, Siegfried Schtauffen, ainsi que sa fidèle compagne et amie Hildegard Von Krone.</span></span>
</div>

</div>

La partie du CSS

Code:: /*QEEL*/
#qeel
{
width: 900px;
height: 660px;
overflow: hidden;
background: url(http://img846.imageshack.us/img846/7388/base3m.png) center no-repeat;
}

#statistiques
{
float: left;
width: 150px;
height: 150px;
overflow: auto;
margin-left: 85px;
margin-top: 133px;
}
#informations
{
width: 360px;
height: 150px;
overflow: auto;
margin-left: 320px;
margin-top: 165px;
}
#anniversaires
{
position: absolute;
width: 130px;
height: 40px;
margin-top: -40px;
margin-left: 200px;
}
.annif
{
display: block;
position: absolute;
width: 360px;
height: 0px;
overflow: hidden;
margin-top: 40px;
margin-left: -200px;
background: url(http://img214.imageshack.us/img214/1351/backannif.png)center no-repeat;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
filter: alpha(opacity=0);
}
#anniversaires:hover .annif
{
display: block;
position: absolute;
width: 360px;
height: 150px;
margin-top: 40px;
margin-left: -200px;
opacity: 1;
-moz-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
}

#groupes
{
clear: both;
float: right;
width: 500px;
height: 170px;
overflow: auto;
margin-right: 100px;
margin-top: 145px;
}
.g1
{
display: inline-block;
width: 80px;
height: 40px;
text-align: justify;
}
.g2
{
display: inline-block;
width: 110px;
height: 40px;
margin-left: 20px;
text-align: justify;
}
.g3
{
display: inline-block;
width: 70px;
height: 40px;
margin-left: 40px;
text-align: justify;
}
.g4
{
display: inline-block;
width: 110px;
height: 40px;
margin-left: 50px;
text-align: justify;
}
.g1_infos
{
position: absolute;
display: none;
width: 500px;
height: 130px;
margin-top: 40px;
}
.g2_infos
{
position: absolute;
display: none;
width: 500px;
height: 130px;
margin-top: 40px;
margin-left: -100px;
}
.g3_infos
{
position: absolute;
display: none;
width: 500px;
height: 130px;
margin-top: 40px;
margin-left: -250px;
}
.g4_infos
{
position: absolute;
display: none;
width: 500px;
height: 130px;
margin-top: 40px;
margin-left: -370px;
}
.g1:hover .g1_infos, .g2:hover .g2_infos, .g3:hover .g3_infos, .g4:hover .g4_infos
{
display: block;
font-size: 11px;
}

Bonjour,

Pour ce qui est du premier problème, tu n'as qu'à ajouté ça au CSS:

Code:: #informations .row1 {
background: none;
}

Ça fera en sorte que la classe .row1 du bloc #informations (telle que ajoutée par FA) n'est pas de couleur de fond. Wink

Pour les onglets, je pense pas qu'on puisse éviter de passer par JS pour avoir un tel résultat (ou par un :target CSS3 :O), mais dans tous les cas il est trop tard pour ça: je suis sûr que quelqu'un t'apportera la solution demain !

Bonne nuit !

Orange, tu es génial!
Merci, déjà ça règle un point! J'essayerai de me rappeler de ce truc!

Merci de ton coup de main, et j'attends impatiemment que quelqu'un puisse aider avec les onglets!

Salut,

En effet, comme l'as dit Orange c'est possible avec :target, comme tu peux le voir ici :

http://sann.in/forums/cssactif/test/tests.html

(j'ai repris ton code pour le modifier), mais ce n'est possible que lorsque l'utilisateur clique (pas hover).

Voici le code :

ton bout de templates (partie groupes):

Code:: <div id="groupes">
<a href="#test"><span class="g1">1<span id="test" class="g1_infos">Ils sont les gens qui ont été exposés à l'énergie démoniaque de Soul Edge. Pour la plupart, ils possèdent des capacités extraordinaires, mais le prix à payer est tout aussi lourd. La plupart perdent la raison et le contrôle d'eux-même et s'attaquent aux gens pour compenser la carence en énergie démoniaque. Ils sont plus ou moins des partisans indirects de Soul Edge, puisqu'ils dépendent de son énergie. Chaque personne réagit différemment à l'infection, pouvant rester en parfait contrôle de leur corps, ou pouvant même se transformer en créatures monstrueuses. La plupart d'entre eux arrêtent de vieillir à partir d'un certain âge. Parmi eux, on compte notamment la tristement célèbre Tira, les mystérieux Raphael et Amy Sorel, ainsi que Cervantes.</span></span></a>
<a href="#test2"><span class="g2">2<span id="test2" class="g2_infos">Ce sont ceux qui pourchassent les Infectés. Leur mission est de les guérir de leur mal, un peu comme des exorcistes. Mais surtout, leur mission est surtout de détruire le mal à la source, en scellant Soul Edge ( et parfois même Soul Calibur! ). La plupart d'entre eux ne se connaissent pas et ont pour la plupart des méthodes différentes de mener à bien leur mission. Certains ont même déjà été exposés à l'énergie démoniaque, de près ou de loin. Les plus célèbres d'entre eux sont Kilik, Xianghua, ainsi que les soeurs Alexandra ; Cassandra et Sophitia.</span></span></a>
<a href="#test3"><span class="g3">3<span id="test3" class="g3_infos">Comme leur nom l'indique, ils ne prennent aucune position précise. Certains ne connaissent même pas l'existence des Épées, bien qu'ils aient pu y être exposés de près ou de loin. Ils ont tendance à vivre pour atteindre un objectif bien à eux. On retrouve entre autre Mitsurugi, Setsuka, Dampierre et Ivy parmi ces gens.</span></span></a>
<a href="#test4"><span class="g4">4<span id="test4" class="g4_infos">Étant autrefois un groupe de mercenaires, ils sont maintenant une puissante alliance de guerriers qui n'ont pour but que de purger le monde des Infectés qui représentent une menace pour l'humanité. Ils jugent que tout le monde mérite de vivre, et que les infectés ne sont pas responsables de leur malheur, et ne font rien à ceux qui ne représentent pas un danger. On remarque dans leur rang leur chef, Siegfried Schtauffen, ainsi que sa fidèle compagne et amie Hildegard Von Krone.</span></span>
</div></a>

</div>

Et le css:

Code:: /*QEEL*/

#groupes
{
clear: both;
float: right;
width: 500px;
height: 170px;
overflow: auto;
margin-right: 100px;
margin-top: 145px;
background:red;
}
.g1
{
display: inline-block;
width: 80px;
height: 40px;
text-align: justify;
}
.g2
{
display: inline-block;
width: 110px;
height: 40px;
margin-left: 20px;
text-align: justify;
}
.g3
{
display: inline-block;
width: 70px;
height: 40px;
margin-left: 40px;
text-align: justify;
}
.g4
{
display: inline-block;
width: 110px;
height: 40px;
margin-left: 50px;
text-align: justify;
}
.g1_infos
{
position: absolute;
display: none;
width: 500px;
height: 130px;
margin-top: 40px;
}
.g2_infos
{
position: absolute;
display: none;
width: 500px;
height: 130px;
margin-top: 40px;
margin-left: -100px;
}
.g3_infos
{
position: absolute;
display: none;
width: 500px;
height: 130px;
margin-top: 40px;
margin-left: -250px;
}
.g4_infos
{
position: absolute;
display: none;
width: 500px;
height: 130px;
margin-top: 40px;
margin-left: -370px;
}
/*.g1:hover .g1_infos, .g2:hover .g2_infos, .g3:hover .g3_infos, .g4:hover .g4_infos
{
display: block;
font-size: 11px;
}*/

#test:target, #test2:target, #test3:target, #test4:target {
display:block;
}

En gros, lorsque l'on clique sur le lien avec comme attribut href #test, le span qui contient cet id s'affiche et pareil pour les autres etc

Smile

Merci pour tes explications et pour ces codes!

Néanmoins, je n'aime pas trop l'effet que ça donne, alors je crois que je vais laisser ça comme c'est déjà. C'est surtout que toute la zone est un lien, ça fait pas très esthétique, et j'aurais voulu que ça reste du hover X'D

Enfin, je garde le code en réserve, il pourra toujours me servir!
Merci beaucoup =)

----

Autrement, j'ai une nouvelle question, toujours sur le même forum.

J'ai repris le code d'Orange pour la connexion rapide pour faire une petite annonce au-dessus de la chatbox, pour rappeler ses règles aux membres. Je me suis servie d'une page HTML créée sur le forum pour l'installer.

Le truc, c'est que je voudrais que l'annonce soit visible uniquement aux membres. Y aurait-il un moyen de faire ça?

Voilà le code de la page

Code:: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>chatbox-rules</title>

<style>
/* FORMULAIRE DE CONNEXION RAPIDE AMÉLIORÉ de ORANGE pour CSSACTIF (css-actif.com) - Merci de ne pas retirer */

.cssactif_connexrapide {
/* Style général: à modifier à votre guise ! */
background:url(http://img11.hostingpics.net/pics/253916important.png) no-repeat left center
#050000; /* Ajoute une icône de fond no-répétée à gauche et une couleur de fond */
padding-left: 32px; /* Donne la marge pour l'icône de fond */
border: 1px solid #2e0808; /* Bordure du formulaire */
margin: 5px; /* Espacement entre le formulaire et le contenu voisin */
/*Arrondissement des bordures */
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

/* Ombre portée de la boîte */
-webkit-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.1);

/* Style du texte intérieur */
font-size: 11px;
color: #611515;
text-align: justify;
font-family: verdana;

}

.cssactif_connexrapide_form { /* Correspond à la cellule qui contient le formulaire comme tel */
text-align: center;

}
.cssactif_connexrapide_form input.post{ /* Correspond aux entrées de texte qui contiennent les informations de connexion */
margin-bottom: 3px; /* Marge qui empêche que les champs de se toucher */

/* Style des entrées: à modifier à votre guise ! */
background-color: #00090d;
border: 1px solid #2B889F;
padding: 3px;

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

-webkit-box-shadow: 0px 1px 0px 0px #00090d;
-moz-box-shadow: 0px 1px 0px 0px #00090d;
box-shadow: 0px 1px 0px 0px #00090d;

font-size: 11px;
color: #5DD9FF;
}

.cssactif_connexrapide_form input.mainoption{ /* Correspond au bouton "Connexion" */

/* Style du bouton: à modifier à votre guise ! */
background-color: #001017;

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

border: none;
border-bottom: 2px solid #2B889F;

}

.cssactif_connexrapide_form input.mainoption:active { /* Correspond au bouton "Connexion" lors du clic */

/* Style du bouton lors du clic: à modifier à votre guise ! */

border: none;
border-top: 2px solid #2B889F;
}

/* FIN du FORMULAIRE DE CONNEXION RAPIDE AMÉLIORÉ */
</style>

</head>
<body><table width="100%" border="0" cellspacing="0" cellpadding="5" class="cssactif_connexrapide">
<tr>
<td valign="top">Une chatbox est disponible pour vous. Néanmoins, elle est sujette à des règles que vous devrez respecter. Retenez que le blabla personnel est interdit, la chatbox est là pour s'amuser, pas pour vous fournir des services de psychologie ou d'aide sociale. Aussi, sachez que la plupart des gens sont in-character dessus, ne prenez donc pas personnel tout ce qu'on peut vous dire. C'est un endroit pour s'amuser et pour faire de petits RP rigolos à la Drunken Souls. Néanmoins, le RP box pour remplacer ou compléter les RP réguliers est interdit, tout comme le spam.
</td>
</tr>
</table>
</body>
</html>

et voilà le code où il figure dans le template index-body

Code:: <br /><div class="fond1"><iframe name="V partenaire" src="http://untold-legends.keuf.net/h4-gold-partners" width="100%" height="50" frameborder=0 scrolling="no"></iframe></div>
<br /><div class="fond1"><iframe name="chatbox" src="http://untold-legends.keuf.net/h8-chatbox-rules" width="100%" height="80" frameborder=0 scrolling="no"></iframe></div>

{CHATBOX_TOP}

Ploum !

Je n'ai actuellement pas le temps de vérifier en ce moment malheureusement, mais il y a un an de ça (je précise parce que FA change régulièrement son code), on pouvait faire le distingo entre connecté/pas connecté avec ce genre de code :

Code:: 
CODE MEMBRE CONNECTE



CODE MEMBRE NON CONNECTE

J'espère que ça pourra t'aider pour ton souci Wink

Ça fonctionne!!! Merci beaucoup!! Au moins on risquera pas de faire fuir les invités avec ce cadre-là XD ! ( qui reste essentiel, puisque certains membres nous prennent pour un service de psychologie en ligne .. XD )

Maintenant, reste plus qu'à savoir si je peux écrire du texte dans le cadre bleu pour indiquer aux membres qu'ils doivent survoler les noms des groupes pour voir leur description =o

Ravie de t'avoir aidé. En ce qui concerne ton second souci, a titre personnel, dans ce genre de cas, je crée un onglet "caché" qui s'affiche en premier et qui indique qu'il faut survoler le nom des groupes Wink

Il faudrait que je me penche sur ta gestion du problème, comme j'ai dit, pas le temps de tester XD

Merci beaucoup pour ton aide! Néanmoins, je vois pas trop comment créer cet onglet ( ou du moins comment faire en sorte qu'il s'affiche! )

Bonjour,

Voilà six jours que ce sujet n'a pas été actualisé. Ton problème est-il résolu ? Si nous n'avons pas de réponse dans trois jours, celui-ci sera archivé. Je te demanderai dans le cas contraire de donner des précisions si nécessaire afin d'aider nos codeurs.

Bon après-midi. Smile

Hmm, en fait non, j'aimerais savoir comment créer le-dit onglet ( ou plutôt, comment faire en sorte qu'il s'affiche par défaut ) =o

Bonjour,

Cinq nouveaux jours que cette demande n'a pas reçu de réponse. Pourrais-tu fournir davantage d'explications pour les codeurs ? Si rien n'est fait dans quatre jours, cette demande sera verrouillée, comme indiqué dans les règles.

Merci. Smile

Comme je ne crois pas que de nouvelles indications peuvent vraiment être faites, et que mes membres semblent bien comprendre le concept, je crois qu'on peut clôturer sans problème cette demander =)

Merci beaucoup pour votre aide!

Bonsoir !
Très bien, dans ce cas je déplace ce sujet !
N'hésite à rouvrir un autre sujet si tu as d'autres questions Un QEEL récalcitrant! 926145

Un QEEL récalcitrant!

Un QEEL récalcitrant!

Sujets similaires

Sujets similaires

Partenaires Or