Page d'Accueil

[Grisouillette27]

Bonjour !

Je cherche un tuto pour pouvoir faire une page d'accueil comme ceci : http://guerredesclans.activebb.net/

Quelqu'un pourrait m'aider ??

Merci Beaucoup !

[Invité]

Bonjour,

Vous parlez du message d'accueil ou bien de la mise en page de l'index? Dans un cas, comme dans l'autre il y a énormément de travail dessus et vous ne trouverez pas de tuto contenant tous les élément utilisés. Il y a des modifications de templates, beaucoup de codes Html et CSS.
De plus, attention, copier une mise en forme dans sa totalité c'est du plagiat!

Cordialement.

[Grisouillette27]

Déjà merci de m'aider !

Je voulais parler de la mise en page ! J'aimerai faire juste 2 cadres, un avec le Staff du fow', petit, et l'autre avec les new, plus grand.
C'est vraiment si compliqué que ça ??

[tupac]

Bonsoir

Bon d'accord je retire mes cadre a deux balles (s'en-va ce cacher)

[Invité]

Ce n'est pas archi-compliqué, on devrait y arriver. Ces cadres sont composés à partir de ce code:

Code:

<fieldset><legend align=top> Sous-titre</legend>CONTENU</fieldset>

Pour ajouter du style, on ajoute un "class" que l'on va reporter dans la feuille de style. Pour vous montrer je met les class "truc" et "machin" , à vous de trouver des noms qui vous permettrons de vous souvenir ce que ça modifie .

Code:

<fieldset class="truc"><legend class="machin" align=top> Sous-titre</legend>CONTENU</fieldset>

Pour obtenir des bordures rouges, un fond gris pour le titre et toir pour le texte, on ajoute dans la feuille CSS :

Code:

.truc { border : 2px solid #ff0000;
background: #000000;}
.machin {background : d6d6d6;}

A vous de me dire ce que vous voulez ( couleur de fond, bord en pointillés épais ou fins, dimensions ...) pour que je vous aide à trouver les attributs CSS à ajouter.

Ensuite, si vous voulez les deux cadres cote à cote, il faudra les mettre dans un tableau.

Cordialement.

[Grisouillette27]

Merci !
Alors, pour le fond j'aimerai #C7C7C7, avec des bords fins. Pour les dimension, Serait-il possible que la 1er Fasse les trois quart de la page et l'autre, le 1 quart ?
Je ne sais pas trop si je m'exprime bien....

Cordialement

[Invité]

:lol!: C'était une autre voie de recherche Tupac! il ne fallait pas éditer ton message .

Si j'ai bien compris on va faire un tableau dans la page d'accueil:
<table> pour dire "je fais un tableau".
<tr> "je mets une ligne"
<td> "je fais une case"
Et je n'oublie pas de refermer les balises.
Dans ce tableau on va ajouter des "width" pour définir la largeur de chaque case. 3/4 - 1/4 ça fait 75% - 25% . Donc on en arrive à ce résultat:

Code:

  <table  width="100%"><tr><td width="75%">MON  CODE</td><td width="25%">MON  CODE</td></tr></table>

A la place de MON CODE, on insère ce qu'on a fait au début en mettant le texte voulu:

Code:

<fieldset class="truc"><legend class="machin" align=top> Le Staff</legend>CONTENU</fieldset>

et

<fieldset class="truc"><legend class="machin" align=top> Les News</legend>CONTENU</fieldset>

Ce qui donne:

Code:

  <table  width="100%"><tr><td width="75%"><fieldset class="truc"><legend class="machin" align=top> Le Staff</legend>CONTENU</fieldset></td><td width="25%"><fieldset class="truc"><legend class="machin" align=top> Les News</legend>CONTENU</fieldset></td></tr></table>

Il ne reste plus qu'à ajouter les codes CSS:
"border" permet de déterminer l'épaisseur le style et la couleur des bords.
Les 3 lignes avec "border-radius" sont là pour arrondir les angles.
"background" correspond à la couleur de fond.
"Padding" règle la marge entre le cadre et le texte.

Code:

.truc {
border : 1px solid #000;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
background: #C7C7C7;
padding: 5px;}

.machin {
background : #C7C7C7;
border : 1px solid #000;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
padding: 3px;}

On s'approche du résultat?

[Grisouillette27]

Je ne suis pas sure d'avoir tout bien compris...^^'
Le code qui commence par <table white[...] Il faut le mettre sur la page d'accueil ?
Et l'autre sur la Feuille de Style ?

[Invité]

Bonsoir,

Vous avez bien compris !

Ce code va dans le message d'accueil:

Code:

  <table  width="100%"><tr><td width="75%"><fieldset class="truc"><legend class="machin" align=top> Le Staff</legend>CONTENU</fieldset></td><td width="25%"><fieldset class="truc"><legend class="machin" align=top> Les News</legend>CONTENU</fieldset></td></tr></table>

Et celui-ci dans la feuille de style CSS:

Code:

.truc {
border : 1px solid #000;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
background: #C7C7C7;
padding: 5px;}

.machin {
background : #C7C7C7;
border : 1px solid #000;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
padding: 3px;}

Cordialement.

[Grisouillette27]

Désolé du retard...

Alors, j'ai fait ce que vous m'aviez dit, et voici ce que ça me donne

Spoiler:

Pourtant, j'ai fait exactement comme vous m'aviez dit... je crois...

[Invité]

Bonsoir,

Oui, oui c'est très bien, maintenant pour que ça s'affiche normalement, il faut activer le Html sur votre forum . Voici le tutoriel: https://forum.forumactif.com/t285442-activation-du-html-3-points-de-controle . Normalement, après cela ça devrait fonctionner.

Cordialement.

[Grisouillette27]

Merci Beaucoup de votre aide.

J'ai activé le HTML mais, ca na rien changé...

[Invité]

Bonsoir,

Essayez de ré-enregistrer votre message d'accueil. Copiez le contenu vérifiez bien que l'icône au dessus de la fenêtre est :+html: , collez le contenu et enregistrez. Il n'y a pas de raison que ça ne fonctionne pas, on va trouver d'où vient le soucis .

Spoiler:

Cordialement.

[Grisouillette27]

Merci Beaucoup, ça marche !!

J'ai recopier les codes et voila, ça marche. Je te remercie beaucoup !!

Je voulais savoir aussi : Pour les membres du Staff, comment faire pour que au moment ou l'on passe notre souris dessus, une image apparaisse avec leur nom ?

Cordialement

[Invité]

Bonjour,

Une fois n'est pas coutume, je cite le message de Convivialité:

Bonjour

ce que tu veux faire est une infobulle

voici un sujet qui peut t'intéresser

https://forum.forumactif.com/t291783-comment-faire-une-infobulle?highlight=infobulle

si ça ne suffit pas , tape infobulle dans le moteur de recherche du forum et tu auras d'autre réponses

https://forum.forumactif.com/search?search_keywords=infobulle


Amicalement

Cordialement.

[Anzu]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif