Sujets similaires

Dernière édition par #_Holigan le Jeu 02 Sep 2010, 15:50, édité 1 fois

Bon x)
Bonjour à tous !

J'ai plusieurs problèmes de codage. A vrai dire, ça a l'air fini, pas très original, un peu grossier, mais fini.

Pour un premier codage, j'estime m'être pas trop trop mal débrouillé x)
Mais attendez de voir le code \(^0^)/

- J'ai eu un mal de chien à positionner toutes mes boîtes. Deux boîtes au même niveau peuvent être à 20% de la hauteur comme à 450%. Je comprends pas.
- Un espace me tape sur les nerfs : j'iamerai bien empêcher toute cette perte de place en bas, sous le queel [entre lui & les nouveaux messages etc].
- impossible de changer le fond des tableaux insérés pour corriger les bugs des variables [anniversaires & connectés dernièrement]. En utilisant background-color je colore sous ce bleu clair. C'est quoi son nom alors ? x)
- Le code est sûrement bourré d'erreurs et de simplifications possibles. Je me suis plus qu'embrouillée entre les div et les span, entre les position, absolute ou relative.

Voilà donc l'adresse :
http://art-of-cats.forums-actifs.com/forum.htm

Spoiler:

Et le HTML [juste la partie modifiée]

Code:: <div id="queel">
<div id="fondqueel">
<p>Design par

   Codage par

   Do not RIP.</p>
   </div>

<img class="imagequeel" src="http://img243.imageshack.us/img243/1281/aoc.png" alt="Mais qui est là ?" />

</div>

<div id="enligne">



<span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {CHATTERS_LIST}


<div class="rejoindrecb">
<div id="chatbox_popup"></div>
<script type="text/javascript">
//<![CDATA[
insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
//]]>
</script>


</span>

</div>
</div>

<div id="stats">
<div class="hautstats">
<span class="gensmall"><span class="gensmall"><span id="utilisateursenligne">{TOTAL_USERS_ONLINE}</span>
<script type="text/javascript">document.getElementById('utilisateursenligne').innerHTML=document.getElementById('utilisateursenligne').innerHTML.replace(/utilisateur en ligne/,"chat qui se balade par ici.");
document.getElementById('utilisateursenligne').innerHTML=document.getElementById('utilisateursenligne').innerHTML.replace(/utilisateurs en ligne/,"chats qui se baladent par ici");
document.getElementById('utilisateursenligne').innerHTML=document.getElementById('utilisateursenligne').innerHTML.replace(/Enregistré/,"habitué");
document.getElementById('utilisateursenligne').innerHTML=document.getElementById('utilisateursenligne').innerHTML.replace(/Enregistrés/,"habitués");
document.getElementById('utilisateursenligne').innerHTML=document.getElementById('utilisateursenligne').innerHTML.replace(/Invisible et/,"caché,");
document.getElementById('utilisateursenligne').innerHTML=document.getElementById('utilisateursenligne').innerHTML.replace(/Invisibles et /,"cachés,");
document.getElementById('utilisateursenligne').innerHTML=document.getElementById('utilisateursenligne').innerHTML.replace(/Invité/,"visiteur");document.getElementById('utilisateursenligne').innerHTML=document.getElementById('utilisateursenligne').innerHTML.replace(/Invités/,"visiteurs");</script></span>

   <span class="gensmall"><span id="recordutilisateurs">{RECORD_USERS}</span><script type="text/javascript">
document.getElementById('recordutilisateurs').innerHTML=document.getElementById('recordutilisateurs').innerHTML.replace(/Le record du nombre d'utilisateurs en ligne est de/,"Au dernier grand rassemblement nous étions");</script>
</span>

</div>

<div class="basstats">
<span class="gensmall"><span id="enregistresconnectes">{LOGGED_IN_USER_LIST}</span>
<script type="text/javascript">document.getElementById('enregistresconnectes').innerHTML=document.getElementById('enregistresconnectes').innerHTML.replace(/Utilisateurs enregistrés/,"On peut voir");</script></span>
</div></div>

<div id="anniversaires"><table><span style="antibug">{L_WHOSBIRTHDAY_TODAY}
{L_WHOSBIRTHDAY_WEEK}</span></table></div>
<div id="connectes">
<span class="gensmall"><span id="totalmessages">{TOTAL_POSTS}</span><script type="text/javascript">
document.getElementById('totalmessages').innerHTML=document.getElementById('totalmessages').innerHTML.replace(/Nos membres ont posté un total de/,"Ici, on a déjà miaulé");
document.getElementById('totalmessages').innerHTML=document.getElementById('totalmessages').innerHTML.replace(/messages/,"fois !");</script>

   <span id="totalmembres">{TOTAL_USERS}</span><script type="text/javascript">
document.getElementById('totalmembres').innerHTML=document.getElementById('totalmembres').innerHTML.replace(/Nous avons/,"Nous comptons d'ailleurs"); document.getElementById('totalmembres').innerHTML=document.getElementById('totalmembres').innerHTML.replace(/membres enregistrés/,"matous.");</script>

   <span id="dernierutilisateur">{NEWEST_USER}</span><script type="text/javascript">
document.getElementById('dernierutilisateur').innerHTML=document.getElementById('dernierutilisateur').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Et le dernier arrivé est");</script></span>
<div class="groupes">

<div id="legendegroupes">
<span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></div>
</div>
<div id="connectesdernierement">
<table><span style="antibug">{L_CONNECTED_MEMBERS}</span></table>
</div>
</div>

Et le CSS :

Code:: #queel{
margin : 20px;
bottom : 100px;
font-family: "Arial", Times New Roman,Century Schoolbook L, serif;
font-variant: small-caps;
font-size: 10px;
font-style: italic;
color : #FFFFFF;
}

#fondqueel{
position : absolute;
z-index: 1;
margin-top: 90px;
width: 800px;
float : left;
padding :10px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;

}

.imagequeel
{
z-index: 2;
position : relative;
left : 160px;
bottom : 50px;
margin : 20px;

}

#anniversaires{
z-index : 4;
position : absolute;
left : 59%;
top : 585%;
width : 345px;
padding :10px;
font-family: "Arial", Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
}

#enligne{
position : relative;
float : right;
z-index : 5;
bottom : 260px;
height: 150px;
width : 200px;
margin-top : 12px;
margin-right : 40px;
padding : 10px;
background-color: #A1D5E6;
border : 1px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
overflow : auto;
font-family: "Arial", Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;

}
.rejoindrecb{
z-index : 5;
background-color : #DAEDF3;
border : 1 px dotted #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-size: 12px;
text-align: center;
color : #FFFFFF;
}

#stats
{
z-index : 1;
position : relative;
width : 350px;
height: 170px;
left : 50px;
float : left;
bottom : 75px;
margin-top: 20px;
padding : 20px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
overflow : auto;
font-family: "Arial", Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;}

#connectes
{
z-index : 3;
position : relative;
float : right;
width: 550px;
height: 170px;
bottom: 240px;
margin-right : 40px;
padding :20px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-family: "Arial", Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;}

#connectesdernierement{
z-index : 5;
position : relative;
float : right;
width: 220px;
height: 130px;
padding :20px;
bottom: 50px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius-topleft: 20px ;
-webkit-border-radius-topleft: 15 px;
font-family: "Arial", Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
overflow : scroll;
color : #FFFFFF;}

#legendegroupes{

z-index : 6;
position : absolute;
width : 250px;
left : 3%;
top : 38%;
}

Merci beaucoup à qui m'aidera !
J'utilise Firefox sous Linux Ubuntu Hardy Heron.
Mais j'ai réussi à installer NotePad.
Le forum est en PHPB2.

Si ce "problème" est considéré comme une commande [ce que je ne souhaite pas : j'aimerai faire moi même, juste que l'on me montre où sont mes erreurs =) ] je comprendrai qu'il soit locké n__n

EDIT :
Nouveau problème, en fonction sûrement des résolutions d'écran on obtiend par exemple ceci :

Spoiler:

Joli xD

Code:: <div id="fondqueel">
<p>Design par<br />
Codage par <br />
Do not RIP.</p>
</div>

<img class="imagequeel" src="http://img243.imageshack.us/img243/1281/aoc.png" alt="Mais qui est là ?" />

</div>

Que referme le deuxième </div> ?

Code:: <span class="gensmall"><span class="gensmall"><span id="utilisateursenligne">{TOTAL_USERS_ONLINE}</span>

un span en trop, tu peux en enlever un ^^

Dans le CSS enlève les guillements à Arial ô_o
Le positionnement absolu se fait (par défaut) par rapport au coin gauche supérieur de la page alors que relative se fait par rapport à des éléments (une image par exemple) Smile

Oui je l'avais dit c'était assez ...
assez sympa x)

En utilisant relative, des fois il m'était impossible de placer l'élément où je voulais : il ne voulait pas aller plus loin que la continuité d'un autre élément What a Face

J'avais bien compris ce principe, mais je vois pas comment l'utiliser à bon escient. Et j'ai mon truc des anniversaires qui décide de se balader au niveau des forums maintenant u__u

J'aurais peut être du faire un "fond" de queel en absolu et tout mettre en relative ?
Comment savoir à quoi est relatif le positionnement ?

Je vais corriger ça déjà

Les guillemets j'avais trouvé ça sur un site Embarassed

Mauvais site alors.
j'enlève, j'enlève !

EDIT :
Bon x)
Voilà mon CSS "amélioré", tu as déjà réglé un de mes problèmes ! Je n'ai plus l'énooorme espace en bas. merci du fond du coeur x).
Mais j'aimerai régler au plus vite celui des éléments qui se promènent en fonction des navigateurs é__è

Spoiler:

Code:: .bodyline {
-moz-border-radius:20px;
-webkit-border-radius: 20px;
}

textarea, .textarea.post, input.post {
-moz-border-radius-topright:10px;
-moz-border-radius-bottomleft:10px;
-webkit-border-radius 10px 0px 10px 0px;
}

.forumline{
background-color: #ffffff;
-moz-border-radius-topright: 20px ;
-moz-border-radius-topleft: 20px ;
-webkit-border-radius 20px 0px 20px 0px;
;
}

a { text-decoration: none; }

a.forumlink{
background-color:#A1D5E6;
border-bottom: 2px dotted #FFFFFF;
text-align: center;
font-variant : small-caps;
display:block;
-moz-border-radius: 0px 15px 15px 0px;
}

#fondqueel{
position : absolute;
z-index: 1;
margin-top: 80px;
width: 800px;
float : left;
padding :10px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;

}

.imagequeel
{
z-index: 2;
position : relative;
left : 160px;
bottom : 33px;
margin : 20px;

}

#anniversaires{
z-index : 4;
position : absolute;
top : 566%;
left : 59%;
width : 345px;
padding :10px;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
}

#enligne{
position : relative;
float : right;
z-index : 5;
height: 150px;
width : 200px;
margin-top : 20px;
margin-right : 40px;
padding : 10px;
background-color: #A1D5E6;
border : 1px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
overflow : auto;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;

}
.rejoindrecb{
z-index : 5;
background-color : #DAEDF3;
border : 1 px dotted #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-size: 12px;
text-align: center;
color : #FFFFFF;
}

#stats
{
z-index : 1;
position : relative;
width : 350px;
height: 170px;
left : 50px;
float : left;
bottom : 50px;
margin-top: 20px;
padding : 20px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
overflow : auto;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;}

#connectes
{
z-index : 3;
position : relative;
float : right;
width: 550px;
height: 170px;
bottom: 30px;
margin-right : 40px;
padding :20px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;}

#connectesdernierement{
z-index : 5;
position : relative;
float : right;
width: 220px;
height: 130px;
padding :20px;
bottom: 50px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius-topleft: 20px ;
-webkit-border-radius-topleft: 15 px;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
overflow : scroll;
color : #FFFFFF;}

#legendegroupes{

z-index : 6;
position : absolute;
width : 250px;
left : 3%;
top : 38%;

Le template est modifié correctement donc [merci encore =3 ]

ah o_ô Ben j'ai jamais vu de guillements dans le CSS sauf pour les url. Pour les polices on aligne ça avec des virgules, normalement.

J'ai pas très bien assimilé le positionnement non plus XD D'après ce que j'en ai lu ce serait par rapport aux éléments qui sont au-dessus ou en-dessous (tout dépendra de l'ordre des éléments dans ton code).

Alors, j'ai regardé dans mon livre de CSS (il est en américain et je l'ai depuis la 5ème *_*), le positionnement relative c'est : position the box relative to its normal position, donc ça confirme bien ce que je disais ° °'
absolute : position the box relative to the containing box.
static : position the box where it should normally be placed (là tu vas te dire que c'est pour toi ça XD)
Par contre je suis vraiment pas orientée position, z-index et template alors... >< j'ai juste regardé ton code pour voir déjà s'il y avait des div/span non fermées/ouvertes. Je vais faire des tests avec ton template sur mon forum de test je te donnerai des nouvelles si j'arrive (ou non) à régler ton problème Smile

EDIT : Aha j'ai trouvé pour les anniversaires, c'est dans le CSS :

Code:: #anniversaires{
z-index : 4;
position : absolute;
left : 59%;
top: 585%
width : 345px;
padding :10px;
font-family: "Arial", Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
}

Si tu enlèves le top tu vas voir que les anniversairs s'affichent dans le cadre =D Après à toi de le repositionner correctement Wink

J'ai encore un problème x)

Tout à l'heure il y avait trop d'espace, maintenant pas assez.
Que faire ? x)

J'ai essayé de modifier les relative/absolute en réfléchissant, toujours du mal à savoir quoi ets relatif à quoi hélas u__u
C'ets du ... pifomètre complet.
J'espère que les gens ont moins de problèmes en fonction des résolutions, mais (avant de modifier, ça doit toujours continuer quand même) j'étais passée sur mon mac et là ... o.O
Le truc tout explosé x)
Un bout là un autre par là bas etc x)

Spoiler:

Code:: #fondqueel{
position : absolute;
z-index: 1;
margin-top: 80px;
width: 50%;
float : left;
padding :10px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-variant : small-caps;
color : #FFFFFF;
font-size: 10px;

}

.imagequeel
{
z-index: 2;
position : relative;
left : 12%;
margin : 20px;

}

#stats
{
z-index : 1;
position : relative;
float : left;
width : 350px;
height: 170px;
padding : 20px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
overflow : auto;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;}

#connectes
{
z-index : 1;
position : relative;
float : right;
width: 550px;
height: 170px;
padding :20px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;}

#enligne{
position :relative;
z-index : 1;
float : right;
height: 150px;
width : 200px;
margin : 20px;
padding : 10px;
background-color: #A1D5E6;
border : 2px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
overflow : auto;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;

}

.rejoindrecb{
z-index : 3;
background-color : #DAEDF3;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-size: 12px;
text-align: center;
color : #FFFFFF;
}

#connectesdernierement{
z-index : 1;
position : relative;
float : right;
width: 220px;
height: 130px;
padding :20px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius-topleft: 20px ;
-webkit-border-radius-topleft: 15 px;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
overflow : scroll;
color : #FFFFFF;}

#anniversaires{
z-index : 2;
position : absolute;
left : 65%;
width : 300px;
padding :10px;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
}

#legendegroupes{

z-index : 6;
position : absolute;
width : 250px;
left : 3%;
top : 38%;
}

Sujet: Re: Codage Epique d'un QUEEL Ven 03 Sep 2010, 13:18

Non il ne s'agit pas d'un up >.<
J'ai "améliorer" le problème, mais impossible de faire mieux. Le queel n'est plus "explosé" de partout, mais il se décale d'un cran, très bête & génant.
J'ai fait de mon mieux, passé les pixels en pourcent en espérant qu'ainsi il s'adapterai, mais rien n'y fait ^^'

La capture :

Voilà donc la "nouvelle" vesion du QUEEL [merci encore à Air, tu m'a vachement fait avancer mon schmilblique x) ]

Spoiler:

Code:: #fondqueel{
position : absolute;
z-index: 1;
margin-top: 80px;
left : 17%;
width: 50%;
float : left;
padding :10px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-variant : small-caps;
color : #FFFFFF;
font-size: 10px;

}

.imagequeel
{
z-index: 2;
position : relative;
left : 17%;
margin : 20px;

}

#stats
{
z-index : 1;
position : relative;
float : left;
width : 20%;
height: 170px;
padding : 1%;
margin-left : 6%;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
overflow : auto;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;}

#connectes
{
z-index : 1;
position : relative;
float : right;
width: 50%;
height: 170px;
margin-right : 6%;
padding :1%;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;}

#enligne{
position :relative;
z-index : 1;
float : right;
height: 150px;
width : 200px;
margin-top : 5%;
margin-right : 3%;
padding : 1%;
background-color: #A1D5E6;
border : 2px solid #FFFFFF;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
overflow : auto;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
color : #FFFFFF;

}

.rejoindrecb{
z-index : 3;
background-color : #DAEDF3;
-moz-border-radius:15px;
-webkit-border-radius: 15px;
font-size: 12px;
text-align: center;
color : #FFFFFF;
}

#connectesdernierement{
z-index : 1;
position : relative;
float : right;
width: 220px;
height: 130px;
padding :20px;
background-color: #A1D5E6;
border : 3px solid #FFFFFF;
-moz-border-radius-topleft: 20px ;
-webkit-border-radius-topleft: 15 px;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
overflow : scroll;
color : #FFFFFF;}

#anniversaires{
z-index : 2;
position : absolute;
left : 60%;
width : 300px;
padding :10px;
font-family: Arial, Times New Roman,Century Schoolbook L, serif;
font-size: 14px;
}

#legendegroupes{

z-index : 6;
position : absolute;
width : 250px;
left : 3%;
top : 38%;
}

Sujet: Re: Codage Epique d'un QUEEL Lun 13 Sep 2010, 17:06

Bonjour,

Votre problème est-il résolu ?
Si oui, merci de cocher dans "icône du sujet" l'icône Codage Epique d'un QUEEL 87671resolu3

en éditant votre 1er post.

Sujet: Re: Codage Epique d'un QUEEL Lun 20 Sep 2010, 12:30

Bonjour,
Est-ce que le problème a été résolu ? Si oui merci de le signaler avec la balise "résolu"
Ce dossier risque sinon de partir à la corbeille, si nous devons encore relancer

Codage Epique d'un QUEEL

Codage Epique d'un QUEEL

Sujets similaires

Sujets similaires

Partenaires Or