Aide spécifique Qui est en ligne sur xooit

Date d'inscription: 01/08/2010

Bonjour !
Je suis de retour avec mes demande d'aide spé Very Happy

Cette fois ci , je voudrais refaire mon Qeel Very Happy

Adresse de votre forum : newteen
Justification de la demande d'aide spécifique : J'y arrive pas toute seule

alors voila j'ai fait un petit code mais il n'est pas au point

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Qui est en ligne</title>

<body>
<style type="text/css">
body
{
width: 800px;
min-height : 300px;
max-height : 400px;
border : dashed 1px;
border-radius: 10px;
background-color:transparent;
}

#tab1_col1{
position: absolute
left:6px;
top:40px;
min-width: 100px;
min-height : 300px;
padding:12px;
background-image:"http://i42.servimg.com/u/f42/11/72/51/74/qeel10.png" ;
border-radius: 10px;
}

#tab1_col2{
min-width: 100px;
min-height : 300px;
background-image:/ ;
border-radius: 10px;
}

span{
float:left;
padding:1px;
}

.bloc_texte{
position: static;
width :500px;
height:260px;
background-color:#CECEFF;
border:1px dashed black;
border-radius: 10px;
}

.titre{
font-family: "Arial Black", Arial, Verdana, serif;
font-size:11px;
width :200px;
height:30px;
background-color:#666699;
border:1px solid black;
border-radius:10px;
color:#363652;
padding:1px;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

</script>

</head><table>
<td id="tab1_col1">
<img src="http://i42.servimg.com/u/f42/11/72/51/74/qeel10.png" />
</td>

<td id="tab1_col2">
<span><h1 class="titre">Les stat's</h1><div class="bloc_texte" id="1">
<p>Les Newteen-girls ont posté un total de 38 036 messages
Nous avons 64 N*G dans la communauté Newteen !
L’utilisateur enregistré le plus récent est XXXXXX
Il y a en tout X utilisateurs en ligne : X Enregistrés, X Invisible, X Invité et X Moteurs de recherche

Le record du nombre d’utilisateurs en ligne est de 26 le 28/02/2011 23:17:16
N*Girls en ligne : Choupiinette, Nariska, Natividad, Newteen, tite-abeille76, Google, Yahoo! </p>
                                 </div></span>
<span><h1 class="titre">Les Groupes</h1><div class="bloc_texte" id="1">
      <p>l'équipe : [ Adminette(s) ] [ Modératrice ] [ Correctrice ] [ Manager ] <br>
      Les membres : [ VIP N♀ ] [ NG * ] [ NG ✖ ] [ NG ♦ ] [ NG ♠ ] [ NG ♣ ] [ NG ♥ ] [ NG ♪ ] [ NG ★ ] [ Nouvelle ] [ De passage ] [ Présente toi ] </p>
                                 </div></center></span>
</td>
</table>

</div></body>

C'est pas Top , mais a mon niveau c'est tout ce que j'arrive a faire ^^
Merci d'avance pour l'aide que vous pourrez m'apporter !

Date d'inscription: 31/12/2009

Coucou Newteen Smile

Ta demande est bien validée et prise en compte. Quelqu'un de compétent dans le domaine du codage viendra très bientôt s'occuper de toi ^^
Cependant, serait-il possible d'avoir l'adresse de ton forum ?

Merci d'avance.

Sujet: Re: Aide spécifique Qui est en ligne sur xooit Jeu 29 Sep 2011 - 9:03

Coucou Miss Very Happy

Devine quoi, c'est moi qui vais t'aider Very Happy

Alors, pour commencer, pour le qeel, c'est dans les templates. Ce que tu me donnes là c'est le rendu que tu aimerais ?

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 01/08/2010

Hello

MErci Olympic & Merci Miettes Very Happy

Oui enfin a peu pret, avec un tableau a on onglet avec les onglets sur la même ligne,
et puis une jolie forme pour les nom des groupes et tout ça

le templates c'est celui ci ?
viewonline_body tpl

Code:

<table width="100%" cellspacing="2" cellpadding="2" border="0" align="center">
<tr>
<td align="left"><span class="nav"><a href="{U_INDEX}" class="nav">{L_INDEX}</a></span></td>
</tr>
</table>

<table width="100%" cellpadding="4" cellspacing="1" border="0" class="forumline">
<tr>
<th width="35%" class="thCornerL" height="25"> {L_USERNAME} </th>
<th width="25%" class="thTop"> {L_LAST_UPDATE} </th>
<th width="40%" class="thCornerR"> {L_FORUM_LOCATION} </th>
</tr>
<tr>
<td class="catSides" colspan="3" height="28"><span class="cattitle"><b>{TOTAL_REGISTERED_USERS_ONLINE}</b></span></td>
</tr>

<tr>
<td width="35%" class="{reg_user_row.ROW_CLASS}"> <span class="gen"><a href="{reg_user_row.U_USER_PROFILE}" class="gen">{reg_user_row.USERNAME}</a></span> </td>
<td width="25%" align="center" nowrap="nowrap" class="{reg_user_row.ROW_CLASS}"> <span class="gen">{reg_user_row.LASTUPDATE}</span> </td>
<td width="40%" class="{reg_user_row.ROW_CLASS}"> <span class="gen"><a href="{reg_user_row.U_FORUM_LOCATION}" class="gen">{reg_user_row.FORUM_LOCATION}</a></span> </td>
</tr>

<tr>
<td colspan="3" height="1" class="row3"><img src="http://img1.xooimage.com/files/_/ti/_-2f2a.gif" width="1" height="1" alt="."></td>
</tr>
<tr>
<td class="catSides" colspan="3" height="28"><span class="cattitle"><b>{TOTAL_GUEST_USERS_ONLINE}</b></span></td>
</tr>

<tr>
<td width="35%" class="{guest_user_row.ROW_CLASS}"> <span class="gen">{guest_user_row.USERNAME}</span> </td>
<td width="25%" align="center" nowrap="nowrap" class="{guest_user_row.ROW_CLASS}"> <span class="gen">{guest_user_row.LASTUPDATE}</span> </td>
<td width="40%" class="{guest_user_row.ROW_CLASS}"> <span class="gen"><a href="{guest_user_row.U_FORUM_LOCATION}" class="gen">{guest_user_row.FORUM_LOCATION}</a></span> </td>
</tr>

</table>

<table width="100%" cellspacing="2" border="0" align="center" cellpadding="2">
<tr>
<td align="left" valign="top"><span class="gensmall">{L_ONLINE_EXPLAIN}</span></td>
<td align="right" valign="top"><span class="gensmall">{S_TIMEZONE}</span></td>
</tr>
</table>

<br />

<table width="100%" cellspacing="2" border="0" align="center">
<tr>
<td valign="top" align="right">{JUMPBOX}</td>
</tr>
</table>

Sujet: Re: Aide spécifique Qui est en ligne sur xooit Mer 5 Oct 2011 - 12:45

Coucou

(désolée de répondre si tard

)

Donc, tu aimerais les onglets cote à cote c'est ça ? (on va se baser sur le code que tu as fait en html et on va intégrer les éléments du QEEL xooit dedans ^^ ) (ça devrait aller vite )

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 01/08/2010

Oui déjà les onglet cote à cote Smile

Que l'image change quand je change l'image dans le panneau admin aussi sans que j'ai a retouché au template aussi Very Happy

et les groupes en liste avec des couleurs un peux comme les groupes sur le qeel du lycée virtuel (http://lycee-virtuel.francais.tv/) enfin dans le meme genre Very Happy

Sujet: Re: Aide spécifique Qui est en ligne sur xooit Jeu 6 Oct 2011 - 11:11

Coucou

Alors quelques souci dans le css déjà :

Code:

#tab1_col1{
position: absolute
left:6px;

il manque un ; du coup => zioup ! ça bloque la suite

Code:

#tab1_col2{
min-width: 100px;
min-height : 300px;
background-image:/ ;
border-radius: 10px;
}

Met le background image en commentaire. si tu laisses comme ça, le codage est perdu.

Ensuite, pour les onglets, on va donner un nom à nos span

Code:

et dans le css, on va remplacer ça :

Code:

span{
float:left;
padding:1px;
}

par ça

Code:

span.onglet{
float:left;
padding:1px;
}

Ensuite, tu me rappelles la structure d'un tableau ? là, ton code est faux ^^

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 01/08/2010

Oups j'ai oublié les "tr" dans le tableau ^^'

il manque autre chose pour qu'il soit juste ?

J'ai modifié les chose que tu m'as indiqué , mais du coup le cadre a onglet passe derriere la photo , j'ai essayé de bidouillé mais je n'ai pas trouvé =/

Voila le code corrigé , en espérant n'avoir rien oublié

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Qui est en ligne</title>

<body>
<style type="text/css">
body
{
width: 800px;
min-height : 300px;
max-height : 400px;
border : dashed 1px;
border-radius: 10px;
background-color:transparent;
}

#tab1_col1{
position: absolute;
left:6px;
top:40px;
min-width: 100px;
min-height : 300px;
padding:12px;
background-image:"http://i42.servimg.com/u/f42/11/72/51/74/qeel10.png" ;
border-radius: 10px;
}

#tab1_col2{
min-width: 100px;
min-height : 300px;
/** background-image:/;**/
border-radius: 10px;
}

span.onglet{
float:left;
padding:1px;
}

.bloc_texte{
position: static;
width :500px;
height:260px;
background-color:#CECEFF;
border:1px dashed black;
border-radius: 10px;
}

.titre{
font-family: "Arial Black", Arial, Verdana, serif;
font-size:11px;
width :200px;
height:30px;
background-color:#666699;
border:1px solid black;
border-radius:10px;
color:#363652;
padding:1px;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

</script>

</head>
<table>
<tr>
<td id="tab1_col1">
<img src="http://i42.servimg.com/u/f42/11/72/51/74/qeel10.png" />
</td>

<td id="tab1_col2">
<span class="onglet"><h1 class="titre">Les stat's</h1><div class="bloc_texte" id="1">
<p>Les Newteen-girls ont posté un total de 38 036 messages
Nous avons 64 N*G dans la communauté Newteen !
L’utilisateur enregistré le plus récent est XXXXXX
Il y a en tout X utilisateurs en ligne : X Enregistrés, X Invisible, X Invité et X Moteurs de recherche

Le record du nombre d’utilisateurs en ligne est de 26 le 28/02/2011 23:17:16
N*Girls en ligne : Choupiinette, Nariska, Natividad, Newteen, tite-abeille76, Google, Yahoo! </p>
                                 </div></span>
<span class="onglet"><h1 class="titre">Les Groupes</h1><div class="bloc_texte" id="1">
      <p>l'équipe : [ Adminette(s) ] [ Modératrice ] [ Correctrice ] [ Manager ] <br>
      Les membres : [ VIP N♀ ] [ NG * ] [ NG ✖ ] [ NG ♦ ] [ NG ♠ ] [ NG ♣ ] [ NG ♥ ] [ NG ♪ ] [ NG ★ ] [ Nouvelle ] [ De passage ] [ Présente toi ] </p>
                                 </div></center></span>
</td>
</tr>
</table>

</div></body>

Sujet: Re: Aide spécifique Qui est en ligne sur xooit Sam 8 Oct 2011 - 11:31

Minutes papillon ^^

On va maintenant correctement placé le texte. Pour cela, on va devoir modifier cette partie du CSS

Code:

.bloc_texte{
position: static;
width :500px;
height:260px;
background-color:#CECEFF;
border:1px dashed black;
border-radius: 10px;
}

tout d'abord, on va dire au texte de se mettre en position absolue. C'est à dire que c'est nous qui allons lui imposer une place. On va donc remplacer

Code:

position: static;

par

Code:

position: absolute;

Ensuite, on va prendre la largeur de l'image du qeel : 250px. On va donc dire : "je veux que mon bloc texte soit à 280px (on prévoit un peu plus pour que ça ne soit pas collé) du bord gauche de l'image". On va donc ajouter cette ligne dans le css

Code:

left:280px;

ça prend forme ^^

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 01/08/2010

c'est modifié Smile

je te remet le code a chaque fois ?
Dans le doute je le met cette fois mais c'est pour les prochaine fois Smile

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Qui est en ligne</title>

<body>
<style type="text/css">
body
{
width: 800px;
min-height : 300px;
max-height : 400px;
border : dashed 1px;
border-radius: 10px;
background-color:transparent;
}

#tab1_col1{
position: absolute;
left:6px;
top:40px;
min-width: 100px;
min-height : 300px;
padding:12px;
background-image:"http://i42.servimg.com/u/f42/11/72/51/74/qeel10.png" ;
border-radius: 10px;
}

#tab1_col2{
min-width: 100px;
min-height : 300px;
/** background-image:/;**/
border-radius: 10px;
}

span.onglet{
float:left;
padding:1px;
}

.bloc_texte{
position:absolute;
left:280px;
width :500px;
height:250px;
background-color:#CECEFF;
border:1px dashed black;
border-radius: 10px;
}

.titre{
font-family: "Arial Black", Arial, Verdana, serif;
font-size:11px;
width :200px;
height:30px;
background-color:#666699;
border:1px solid black;
border-radius:10px;
color:#363652;
padding:1px;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

</script>

</head>
<table>
<tr>
<td id="tab1_col1">
<img src="http://i42.servimg.com/u/f42/11/72/51/74/qeel10.png" />
</td>

<td id="tab1_col2">
<span class="onglet"><h1 class="titre">Les stat's</h1><div class="bloc_texte" id="1">
<p>Les Newteen-girls ont posté un total de 38 036 messages
Nous avons 64 N*G dans la communauté Newteen !
L’utilisateur enregistré le plus récent est XXXXXX
Il y a en tout X utilisateurs en ligne : X Enregistrés, X Invisible, X Invité et X Moteurs de recherche

Le record du nombre d’utilisateurs en ligne est de 26 le 28/02/2011 23:17:16
N*Girls en ligne : Choupiinette, Nariska, Natividad, Newteen, tite-abeille76, Google, Yahoo! </p>
                                 </div></span>
<span class="onglet"><h1 class="titre">Les Groupes</h1><div class="bloc_texte" id="1">
      <p>l'équipe : [ Adminette(s) ] [ Modératrice ] [ Correctrice ] [ Manager ] <br>
      Les membres : [ VIP N♀ ] [ NG * ] [ NG ✖ ] [ NG ♦ ] [ NG ♠ ] [ NG ♣ ] [ NG ♥ ] [ NG ♪ ] [ NG ★ ] [ Nouvelle ] [ De passage ] [ Présente toi ] </p>
                                 </div></center></span>
</td>
</tr>
</table>

</div></body>

Sujet: Re: Aide spécifique Qui est en ligne sur xooit Lun 10 Oct 2011 - 11:59

Oui oui je préfère que tu le remettes à chaque fois Smile

Parce que parfois je modifie plus que ce que je te dis Smile

Donc je dois voir où tu en es toi ^^

Donc, à priori tout est bien placé maintenant ? Sauf le bloc en pointillé qui ne s'arrête pas en dessous de l'image. On va donc régler ça ^^ Il faut que tu prennes en compte : la hauteur de l'image + la hauteur des titres en haut (stat + groupe) + quelques px Smile

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 01/08/2010

Je voudrai les onglets a coté de l'image aussi et l'image en haut du cadre Smile

et pour le cadre autour, comme l'image fera pas toujours la même hauteur selon les cadres il y aurai pas un moyen pour que le cadre s'adapte en fonction de l'image ?

( Si c'est pas possible je ferai en sorte que l'image ai toujoues la meme longueurs quand je fait mes design )

Sujet: Re: Aide spécifique Qui est en ligne sur xooit Mar 11 Oct 2011 - 11:54

Tout est possible choupinette Smile

On y va :

1/ On va supprimer le position absolute de tab1_col1

2/ On va donner un nom d'id au tableau du qeel

Code:

3/ Et ce n'est pas sur "body" qu'on va appliquer les propriéts que tu as choisi, mais sur le table#qeel

Code:

table#qeel
{
width: 800px;
min-height : 400px;
max-height : 400px;
border : dashed 1px;
border-radius: 10px;
background-color:transparent;
}

4/ On dit au case du tableau que leur contenu s'aligne en haut

Code:

table#qeel tr{
vertical-align:top;
}

Voilà donc le code corrigé

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Qui est en ligne</title>

<body>
<style type="text/css">

table#qeel
{
width: 800px;
min-height : 300px;
max-height : 400px;
border : dashed 1px;
border-radius: 10px;
background-color:transparent;
}

table#qeel tr{
vertical-align:top;
}

#tab1_col1{
left:6px;
top:40px;
min-width: 100px;
min-height : 300px;
padding:12px;
background-image:"http://i42.servimg.com/u/f42/11/72/51/74/qeel10.png" ;
border-radius: 10px;
}

#tab1_col2{
min-width: 100px;
min-height : 300px;
/** background-image:/;**/
border-radius: 10px;
}

span.onglet{
float:left;
padding:1px;
}

.bloc_texte{
position:absolute;
left:280px;
width :500px;
height:250px;
background-color:#CECEFF;
border:1px dashed black;
border-radius: 10px;
}

.titre{
font-family: "Arial Black", Arial, Verdana, serif;
font-size:11px;
width :200px;
height:30px;
background-color:#666699;
border:1px solid black;
border-radius:10px;
color:#363652;
padding:1px;
}

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

</script>

</head>
<table id="qeel">
<tr>
<td id="tab1_col1">
<img src="http://i42.servimg.com/u/f42/11/72/51/74/qeel10.png" />
</td>

<td id="tab1_col2">
<span class="onglet"><h1 class="titre">Les stat's</h1><div class="bloc_texte" id="1">
<p>Les Newteen-girls ont posté un total de 38 036 messages
Nous avons 64 N*G dans la communauté Newteen !
L’utilisateur enregistré le plus récent est XXXXXX
Il y a en tout X utilisateurs en ligne : X Enregistrés, X Invisible, X Invité et X Moteurs de recherche

Le record du nombre d’utilisateurs en ligne est de 26 le 28/02/2011 23:17:16
N*Girls en ligne : Choupiinette, Nariska, Natividad, Newteen, tite-abeille76, Google, Yahoo! </p>
</div></span>
<span class="onglet"><h1 class="titre">Les Groupes</h1><div class="bloc_texte" id="1">
<p>l'équipe : [ Adminette(s) ] [ Modératrice ] [ Correctrice ] [ Manager ] <br>
Les membres : [ VIP N? ] [ NG * ] [ NG ? ] [ NG ? ] [ NG ? ] [ NG ? ] [ NG ? ] [ NG ? ] [ NG ? ] [ Nouvelle ] [ De passage ] [ Présente toi ] </p>
</div></center></span>
</td>
</tr>
</table>

</div></body>

Logiquement, ça me parait bon. Si c'est ok de ton coté, on va intégrer les variables xooit

_________________

SoP Story :: 2ème votes éliminatoires

Date d'inscription: 01/08/2010

Super

c'est bon pour moi Very Happy

Prête pour intégrer les variables !

Sujet: Re: Aide spécifique Qui est en ligne sur xooit Jeu 13 Oct 2011 - 9:28

Alors c'est partie Smile

On va commencer par les stats' Smile

Remplacer le texte

Quand je regarde ton forum, c'est déjà fait. Je suppose donc que nous n'avons pas à le refaire (on va réutiliser les codes ^^)

Je te laisse donc faire cette partie seule, c'est à dire, remplacer ça

Code:

<p>Les Newteen-girls ont posté un total de 38 036 messages
Nous avons 64 N*G dans la communauté Newteen !
L’utilisateur enregistré le plus récent est XXXXXX
Il y a en tout X utilisateurs en ligne : X Enregistrés, X Invisible, X Invité et X Moteurs de recherche

Le record du nombre d’utilisateurs en ligne est de 26 le 28/02/2011 23:17:16
N*Girls en ligne : Choupiinette, Nariska, Natividad, Newteen, tite-abeille76, Google, Yahoo! </p>

avec les variables de xooit

(n'hésite pas à t'aider de ce sujet [clic])

_________________

SoP Story :: 2ème votes éliminatoires