Sujets similaires

Dernière édition par BiBiche le Sam 06 Mar 2010, 10:37, édité 2 fois

Bonjour, bonjour,

Voilà mon problème c'est que je sais me servir de feuilles CSS et les personaliser mais je ne sais pas trop comment en créer et donc en faisant ma page d'accueil à partir de feuille css déjà créées je me suis retrouvée bloquée pour créer de nouveaux effets...
(je travaille sur un forum en phpBB2 et sous IE)

Voici ce que j'ai pu générer:
amélioration de page d'acceuil & QEEL 112358.27891

amélioration de page d'acceuil & QEEL 112358.27891

-> Je voudrais changer ma navigation pour qu'elle ressemble à ça, sans pour autant qu'elle prenne plus de place. Que dois-je donc rajouter comme code pour transformer ma navigation?>> amélioration de page d'acceuil & QEEL 112358.27892

amélioration de page d'acceuil & QEEL 112358.27892

-> Ensuite je voudrais une marge entre mon cadre plus clair et mon texte, dois-je simplement ajouter des "margin" comme ceci à mon paragraphe qui code mon cadre:

Code:: .fondcadre {
background-color:#F5F5F5;
margin-left : Xpx;
margin-right : Xpx;
}

-> Questions variées de compréhension de code:
"font-variant: small-caps;" code pour des petites majuscules?

Code:: -moz-border-radius-topleft: 20px;
-webkit-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-radius-topright: 20px;

ça code quelles caractéristiques????

Mon CSS:

Code:: .fondcadre {
background-color:#F5F5F5;
}

.titre1 {
vertical-align: top;
}

.titre {
background-image: url("http://imgoxy02.free.fr/file/112358.26778.jpg");
-moz-border-radius-topleft: 20px;
-webkit-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-radius-topright: 20px;
}

Mon en-tête pour la naviguation:

Code:: <table width="100%" border="0">
<tr><td align="center" width="20%" class="titre1"><div class="titre">Navigation</div> <div class="fondcadre">
<a href="http://cpaf.forumactif.org/les-regles-du-forum-f23/les-regles-du-forum-t10.htm" target="_blank">Règlement</a> 
<a href="http://cpaf.forumactif.org/nos-jeunes-padawans-f17/" target="_blank">Présentation</a> 
<a href="http://cpaf.forumactif.org/les-rygles-du-forum-f23/la-charte-du-cpaf-t2.htm" target="_blank">Charte</a> 
<a href="http://cpaf.forumactif.org/les-rygles-du-forum-f23/la-faq-du-cpaf-t1.htm" target="_blank">FAQ</a> 
<a href="http://cpaf.forumactif.org/les-regles-du-forum-f23/adherer-a-un-groupe-t19.htm" target="_blank">Groupes</a> 
<a href="http://cpaf.forumactif.org/ficotheque-f7/comment-faire-votre-fiche-auteur-t16.htm" target="_blank">Fiche Auteur</a> 
<a href="http://cpaf.forumactif.org/l-auteur-ses-fics-et-ses-droits-f26/la-charte-des-droits-des-auteurs-de-fics-daf-t143.htm" target="_blank">Droits des Auteurs de Fics</a> 
 <A href="http://community.livejournal.com/cpaf_lj/"><IMG src="http://imgoxy02.free.fr/file/112358.26488.png"></A> <A href="http://www.facebook.com/"><IMG src="http://imgoxy02.free.fr/file/112358.26487.png"></A> <A href="http://www.fanfiction.net"><IMG src="http://imgoxy02.free.fr/file/112358.26811.png"></A> <A href="http://www.mappemonde.net/carte/CPAF-in-The-World/monde.html"><IMG src="http://imgoxy02.free.fr/file/112358.26810.png"></A></div></td>

J'ajoute en question pour le QEEL car j'ai quelques soucis avec les images que je dois mettre en fond, car mon problème est qu'elles se chevauchent et je ne voudrais pas, ce qui fait que ça donne ceci (voir image ci dessous), et j'aimerai savoir comment faire pour qu'elles se colent normalement (sans espace car j'ai essayé en ajoutant un "br" avant le code de l'image en bas et sans chevauchement ce que j'ai maintenant!!)

amélioration de page d'acceuil & QEEL 112358.27905

amélioration de page d'acceuil & QEEL 112358.27905

Mon CSS:

Code:: .statistiques{
border:0px;
background-image: url("http://imgoxy02.free.fr/file/112358.27904.jpg");
background-repeat: no-repeat;
background-position: center;
height:270px;}

.groupes{
background-color:#F0F0F0;
-moz-border-radius : 10px 10px 10px 10px;
height: 30px;
padding-right: 8px;
padding-left: 8px;
padding-bottom: 0px;
font-size: 13px;
text-align:center;
text-decoration: none !important;}

Mon template:

Code:: 
<table cellspacing="2" cellpadding="2" width="800" border="0" class="statistiques">
<tr>
<td width="15%"></td>
<td width="50%">
 <center>
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=1">Administratrices</a> <img src="http://i31.tinypic.com/mugck1.jpg">
<a href="http://cpaf.forumactif.org/groupcp.forum?g=6">Modératrices</a> <img src="http://i31.tinypic.com/mugck1.jpg">
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=12">Auteur du moment</a> <img src="http://i31.tinypic.com/mugck1.jpg">
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=8">Auteurs</a> <img src="http://i31.tinypic.com/mugck1.jpg">
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=9">Lecteurs</a> <img src="http://i31.tinypic.com/mugck1.jpg">
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=5">Reviewers</a> 
{TOTAL_POSTS}. {TOTAL_USERS} 
{NEWEST_USER} 
{TOTAL_USERS_ONLINE} 
{LOGGED_IN_USER_LIST}</center> 
<td width="2%"></td>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="700" align="center" style="text-align: justify">
{L_CONNECTED_MEMBERS}</table>
<img src="http://imgoxy02.free.fr/file/112358.27903.jpg">

Par avance merci pour vos lumières !!

Bonzour~

BiBiche a écrit:: -> Je voudrais changer ma navigation pour qu'elle ressemble à ça, sans pour autant qu'elle prenne plus de place. Que dois-je donc rajouter comme code pour transformer ma navigation?>>

Il y a un tutoriel là dessus, je ne sais plus trop il est où mais je te le cherche~ sinon je vais te l'expliquer.
EDIT: Bon je trouve pas XD

Code:: #menu a:link, #menu a:visited{
margin-left : ?px;
margin-right : ?px;
font-family : georgia, verdana, "times new roman", serif;
color: #xxxxxx;
background-color: #xxxxxx;
border-left: ?px solid #xxxxxx;
border-right: ?px solid #xxxxxx;
border-top: ?px solid #xxxxxx;
border-bottom: ?px solid #xxxxxx
font-size: ?px;
margin-top: ?px;
margin-bottom: ?px;
-moz-border-radius: ?px;
-webkit-border-radius: ?px
}

#menu a:hover, #menu a:hover:visited{
color: #xxxxxx;
font-size: ?px;
background-color: #xxxxxx;
border-left: ?px solid #xxxxxx;
border-right: ?px solid #xxxxxx;
border-top: ?px solid #xxxxxx;
border-bottom: ?px solid #xxxxxx
-moz-border-radius: ?px;
-webkit-border-radius: ?px
}

J'ai pris le code de mon forum en supprimant quelques parties et en ajoutant des ? et des x. La première partie est le lien tel qu'on le voit. La deuxième partie c'est lorsqu'on passe la sourit sur le lien. Les ? sont un nombre de pixels, notamment pour les bordures ou les arrondis comme j'explique plus bas dans mon message. Les xxxxxx sont des codes de couleur. Tu peux le personnaliser autant que tu veux, ajouter ou enlever des class que tu trouve dans le cours de base de CSS de Orange~

Ensuite, dans ta page d'acceuil, tu mets ça:

Code:: <div id="menu">
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a> 
<a href=""></a></div>

Les a href représentent des liens. Entre les "" tu mets le lien de par exemple les règlements, le contexte, etc. Là j'ai mit 5 liens, tu peux en ajouter d'autres~ N'oublie pas de mettre la balise br entre chaque lien sinon ils ne seront pas un sous l'autre~

Tu peux changer le menu par n'importe quoi, comme navigation, banane... mais bon moi j'utilise menu pour la simplicité xD

BiBiche a écrit:

-> Questions variées de compréhension de code:
"font-variant: small-caps;" code pour des petites majuscules?

Code:: -moz-border-radius-topleft: 20px;
-webkit-border-radius-topleft: 20px;
-moz-border-radius-topright: 20px;
-webkit-border-radius-topright: 20px;

ça code quelles caractéristiques????

Le small caps donne des petites majuscules effectivement.
Le deuxième code sert à mettre des bordures arrondies sur mozilla firefox. LE webkit sert à faire de même pour google chrome et safari.

Je n'ai pas regardé encore attentivement les autres questions qui suivent, je fais ça immédiatement Wink

EDIT: Bon donc, je n'ai pas compris la question du cadre oo
Sinon pour ton QEEL, dans le CSS essaie de mettre ça:

Code:: .statistiques{
border:0px;
background-image: url("http://imgoxy02.free.fr/file/112358.27904.jpg");
background-repeat: no-repeat;
background-position: center;
height:300px;}

.groupes{
background-color:#F0F0F0;
-moz-border-radius : 10px 10px 10px 10px;
height: 30px;
padding-right: 8px;
padding-left: 8px;
padding-bottom: 0px;
font-size: 13px;
text-align:center;
text-decoration: none !important;}

Sujet: Re: amélioration de page d'acceuil & QEEL Lun 01 Mar 2010, 14:44

Merci bcp !!

Par contre, j'ai toujours un pb avec le QEEL ! La dernière fois il n'apparaissait pas les membres connectés les dernières 24h et tout s'agencer bien sur mon forum test...
Cependant, sur mon forum normal, les membres connectés depuis 24h apparaissent et là tout bug !

Dans mon code CSS, l'image du bas est codée pour se mettre en dessous du cadres {L_CONNECTED_MEMBERS} et du coup ça coupe mon design de QEEL et impossible de bidouiller le code pour que mon image se mette en fond et que {L_CONNECTED_MEMBERS} se place par dessus mon image comme pour la partie statistique de mon css qui s'agnce très bien...

Quelq'un aurait-il la solution?

De plus, sur mon forum teste, les couleurs que j'avais encodées marchées très bien, mais une fois le code transposé sur mon forum normal, les couleurs ne fonctionnent plus !!

Merci par avance !

Code:: 
<table cellspacing="2" cellpadding="2" width="800" border="0" class="statistiques">
<tr>
<td width="15%"></td>
<td width="50%">
 <center>
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=1">Administratrices</a> <img src="http://i31.tinypic.com/mugck1.jpg">
<a href="http://cpaf.forumactif.org/groupcp.forum?g=6">Modératrices</a> <img src="http://i31.tinypic.com/mugck1.jpg">
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=12">Auteur du moment</a> <img src="http://i31.tinypic.com/mugck1.jpg">
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=8">Auteurs</a> <img src="http://i31.tinypic.com/mugck1.jpg">
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=9">Lecteurs</a> <img src="http://i31.tinypic.com/mugck1.jpg">
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=5">Reviewers</a> 
{TOTAL_POSTS}. {TOTAL_USERS} 
{NEWEST_USER} 
{TOTAL_USERS_ONLINE} 
{LOGGED_IN_USER_LIST}</center> 
<td width="2%"></td>
</tr>
</table>

<table border="0" cellspacing="0" cellpadding="0" width="300" align="center" style="text-align: justify">
{L_CONNECTED_MEMBERS}</table>
<img src="http://imgoxy02.free.fr/file/112358.27908.jpg">

Sujet: Re: amélioration de page d'acceuil & QEEL Sam 06 Mar 2010, 10:46

Bonjours, alors j'ai toujours un pb de QEEL

Alors j'ai en parti résolu mon pb ci dessus mais j'en ai qui persiste, je vous montre:

voici mon code:

Code:: .statistiques{
border:0px;
background-image: url("http://imgoxy02.free.fr/file/112358.27907.jpg");
background-repeat: no-repeat;
background-position: center;
height:283px;}

.connectes{
border:0px;
background-image: url("http://imgoxy02.free.fr/file/112358.27908.jpg");
background-repeat: no-repeat;
background-position: center;
height:223px;}

.groupes{
-moz-border-radius : 10px 10px 10px 10px;
height: 40px;
padding-right: 5px;
padding-left: 5px;
padding-bottom: 0px;
font-size: 13px;
text-align:center;
text-decoration: none !important;}

Code:: 
<table cellspacing="2" cellpadding="2" width="800" border="0" style="text-align:"justify" class="statistiques">
<tr>
<td width="25%"></td>
<td width="50%">
 <center>{TOTAL_POSTS}. {TOTAL_USERS} 
{NEWEST_USER} 
{TOTAL_USERS_ONLINE} 
{LOGGED_IN_USER_LIST} 
{L_CONNECTED_MEMBERS}</center> 
<td width="2%"></td>
</tr>
</table>

<table cellspacing="2" cellpadding="2" width="800" border="0" class="connectes">
<tr>
<td width="25%"></td>
<td width="50%">
{L_WHOSBIRTHDAY_TODAY} 
<center><a href="http://cpaf.forumactif.org/groupcp.forum?g=1">Administratrices</a>
<a href="http://cpaf.forumactif.org/groupcp.forum?g=6">Modératrices</a> 
<a href="http://cpaf.forumactif.org/groupcp.forum?g=12">Auteur du moment</a>
<a href="http://cpaf.forumactif.org/groupcp.forum?g=8">Auteurs</a>
 <a href="http://cpaf.forumactif.org/groupcp.forum?g=9">Lecteurs</a>
<a href="http://cpaf.forumactif.org/groupcp.forum?g=5">Reviewers</a></center>
<td width="2%"></td>
</tr>
</table>

Et voici ce que j'obtiens sur mon forum test par rapport à mon forum normal:
forum test >>

amélioration de page d'acceuil & QEEL 112358.27952

forum normal (là où ça foire)>>

amélioration de page d'acceuil & QEEL 112358.27954

Je comprends par pourquoi cela me fait des cadres avec un fond le tout aligné à gauche alors que sur mon forum test cela ne le fait pas. La seule chose qui diffère c'est que sur mon forum test, il n'apparait pas les membres connectés depuis 24H !!

Quelqu'un aurait-il un élément de réponse ??? Je vous jure que je m'arrache les cheveux avec ce code^^ Merci par avance !

Sujet: Re: amélioration de page d'acceuil & QEEL Sam 06 Mar 2010, 14:22

Est-ce qu'on peut aussi avoir les codes de ton fo test *ou du forum qui bug, si tu nous a donné celui du fo test* pour pouvoir comparer?

Et je n'ai pas tout à fait compris le deuxième problème ._." celui du post juste avant, avec les membres connectés et les couleurs

Sujet: Re: amélioration de page d'acceuil & QEEL Sam 06 Mar 2010, 18:24

Euh, c'est le même code pour les deux forums !!! Ou alors j'ai pas compris la question, qu'est ce que vous voulez exactement?

Sujet: Re: amélioration de page d'acceuil & QEEL Sam 06 Mar 2010, 18:29

Simplement avoir les codes des deux forums, parce qu'il y a peut-être quelques petites différences~ souvent c'est là que réside le problème si le code marche sur un forum mais pas sur l'autre.

Sujet: Re: amélioration de page d'acceuil & QEEL Mer 17 Mar 2010, 17:53

Bonjour ^^

Le problème est-il résolu ?

amélioration de page d'acceuil & QEEL

amélioration de page d'acceuil & QEEL

Sujets similaires

Sujets similaires

Partenaires Or