Tableau page d'accueil.

[miss-rpg]

Bonsoir =)
Je voudrais bien changer la page d'accueil de mon forum qui n'est pas très originale.. En fait, je m'y connais pas du tout en CSS & en HTML donc je voudrais quelque chose semblable à ça : http://pretty-school.forumpro.fr/ Par contre, je voudrais pas la case "Staff" et "crédits" mais je voudrais une case "Réseaux sociaux"
Merci d'avance !

[Invité]

Bonjour,

Bonjour,

Je rappelle que Le Forum des Forums de Forumactif n'a absolument pas vocation à devenir un forum de commandes.
Il est avant tout un lieu où une réponse donnée dans un sujet doit pouvoir aider plusieurs personnes.

Si vous souhaitez apprendre et réaliser vous-même votre présentation ou si vous avez un problème avec une partie de votre codage, vous êtes sur le bon forum. En revanche si vous voulez une présentation "prêt à installer", merci de vous orienter vers les forums spécialisés en codage.

Réalisez un schéma de ce que vous souhaitez, que ce soit votre projet de message d'accueil . Aidez-vous des tutoriels existants pour commencer un code (faites votre possible, si vous n'y arrivez vraiment pas, on peut partir du tout début).
> Le CSS / Le html comment ça marche?

Cordialement.

[miss-rpg]

En fait, j'ai essayé d'apprendre mais il y a des choses que je n'arrive pas à faire comme ; les liens utiles et le titre qui sort du fond "P.S, vous connaissez ?" et aussi le tableau où il y a les nouveautés et ça change de couleur pour chaque new.
Les autres choses, j'peux les faire moi meme, j'ai juste besoin d'aide pour faire ce genre de chose car je ne trouve pas..

[miss-rpg]

UP !

[Invité]

Bonjour,

Pour le titre qui sort du fond, je pense qu'il s'agit d'un fieldset:

Code:

<fielset><legend> le titre</legend>le contenu</fieldset>

Pour les news, ce doit être un petit tableau avec aucun espacement des cellules et un bord de couleur définit pour chaque cellule:

Code:

<table cellSpacing="0"><tr><td style="border-left: 2px solid #ff0000;">contenu 1</td></tr>
<tr><td style="border-left: 2px solid #00ff00;">contenu 2</td></tr></table>

C'est le même principe pour les liens utiles avec une class CSS permettant de modifier au survol.

Code:

<table cellSpacing="0"><tr><td class="liensutiles">contenu 1</td></tr>
<tr><td class="liensutiles">contenu 2</td></tr></table>

Avec dans la feuille CSS:

Code:

.liensutiles{
border-left: 3px solid #000;}
.liensutiles :hover{
border-left: 3px solid #fff;}

Pour le titre par dessus les liens, je ne sais pas comment cela est réalisé, peut être avec une div, mais je n'en suis pas certaine.

Cordialement.

[miss-rpg]

En fait, j'ai essayé pour les liens rapides & le titre qui sort du fond mais ça ne fonctionne pas. En fait, pour le titre qui sort du fond.. il n'y a aucun fond .. Et en ce qui concerne les liens, ça ne fait rien, j'ai collé les deux codes & j'ai essayé mais quand je survole, rien ne se passe.

[Invité]

Ok

Et comme ceci?

Code:

<fieldset style="background-color: lightgrey; border: none; width: 200px;"><legend>le titre</legend>le contenu</fieldset>

Pour les liens utiles:

Code:

<table cellSpacing="0" style="background-color: lightgrey;"><tr><td class="liensutiles">contenu 1</td></tr>
<tr><td class="liensutiles">contenu 2</td></tr></table>

Le CSS:

Code:

.liensutiles{
border-left: 3px solid red;}
.liensutiles:hover{
border-left: 3px solid yellow;
color: yellow;}

Cordialement.

[miss-rpg]

Oh merci super !
Par contre, je voudrais bien savoir comment faire (pour les liens utiles) les deux cadres là l'un à coté de l'autre où ils sont tous regroupés.. ^^'
Merci d'avance !

[Invité]

En faisant un grand tableau avec 2 petits tableaux dedans, ça fonctionne:

Code:

<table><tr><td><table cellSpacing="0" style="background-color: lightgrey;border: 4px solid orange;"><tr><td class="liensutiles">lien 1</td><tr></tr><td class="liensutiles">lien 2</td></tr></table></td><td><table cellSpacing="0" style="background-color: lightgrey;border: 4px solid orange;"><tr><td class="liensutiles">lien 1</td><tr></tr><td class="liensutiles">lien 2</td></tr></table></td></tr></table>

J'ai mis des couleurs au hasard, il faudra les modifier pour les adapter à votre design .

Cordialement.

[miss-rpg]

Merci ! =)

Mais par contre, je voudrais bien que les liens soient centrés et que le petit truc qui change de couleur soit dans l'autre coté. ^^ (comme dans le forum que j'ai montré)

[Invité]

Bonsoir,

Tout ceci se fait via la feuille CSS, on remplace left par right et on ajoute une propriété pour centrer le texte:

Code:

.liensutiles{
border-right: 3px solid red;
text-align: center;}
.liensutiles:hover{
border-right: 3px solid yellow;
color: yellow;
text-align: center;}

Cordialement.

[miss-rpg]

Merci n_n
J'ai une question, comment mettre un tableau l'un à coté de l'autre sans retour à la ligne car là, je n'y arrive pas. ^^'
Et une autre petite question (désolée x)) ; Comment mettre le tire qui sort du fond + l'effet des nouveautés dans un seul tableau ?

Merci d'avance !

[Invité]

Bonjour,
Pour mettre deux tableaux cote à cote, il faut les mettre dans un tableau:

Code:

<table><tr><td>code du premier tableau</td><td> code du second tableau</td></tr></table>

Comment mettre le titre qui sort du fond + l'effet des nouveautés dans un seul tableau ?
En cumulant les deux codes tout simplement:

Code:

<fieldset style="background-color: lightgrey; border: none; width: 200px;"><legend>le titre</legend><table cellSpacing="0"><tr><td style="border-left: 2px solid #ff0000;">news 1</td></tr>
<tr><td style="border-left: 2px solid #00ff00;">news 2</td></tr></table></fieldset>

Cordialement.

[miss-rpg]

Merci beaucoup ! ^^
En fait, j'ai un petit problème.. J'ai essayé de faire les tableaux moi meme mais j'ai un petit problème avec le positionnement.. On voit bien grace à cette capture ( https://2img.net/r/hpimg11/pics/98567293hg.png ) que les 3 cadres l'un au dessus de l'autre ne sont pas bien positionnés & centrés. En particulier le deuxième & le troisième..

Merci de m'aider !

[Invité]

Il me faudrait le code de votre message pour savoir d'où vient le soucis . Vous pouvez le placer entre le balises hide ( caché) si vous le souhaitez.

Cordialement.

[miss-rpg]

Le voici ! =)

[Invité]

La première ligne de votre premier tableau est incomplète <table width> , il manque la dimension. J'ai remplacé par <table width="90%"> . La seconde partie de votre message comprend beaucoup de tableaux les uns dans les autres, il est possible de simplifier le code en ne faisant qu'un seul tableau avec 2 lignes et 3 colonnes. Ce qui permet de mieux aligner les choses.


Cordialement.

[miss-rpg]

Merci c'est super ! Par contre, il y a trop d'espace entre le tableau "ACO c'est quoi" et "Nouveautés" et aussi entre "Evenement du mois" et "Vote pour nous'. En fait, je voudrais que les deux tableaux "Nouveautés" et "Evenements du mois" soient un peu plus grands sans laisser trop d'espaces entre les tableaux.

Merci d'avance !

[Invité]

A ce moment là,dans le second tableau, il faut transformer les px en pourcent , ça fonctionnera peut etre mieux. A vous de jouer avec les pourcentages pour trouver le bon réglage .


Cordialement.

[miss-rpg]

J'ai essayé mais je n'y arrive pas du tout, j'ai meme tout déformer à force de réessayer à chaque fois.. Vous pouvez me le régler vous meme ? ><
Merci d'avance !

[Invité]

Bonsoir,

C'est impossible que je le fasse à votre place, tout simplement parce que je ne suis pas dans votre tête, donc je ne peux pas obtenir le résultat que vous voulez ...
Votre message est composé de 2 tableaux dont vous pouvez régler la largeur grâce à <table width="90%">. Vous pouvez augmenter ou diminuer le pourcentage, ou même le remplacer par un nombre de px.
Le premier tableau à l'air de convenir puisque vous ne l'avez pas mentionné jusque là.
Le second tableau est composé de 2 lignes et 3 colonnes,chaque colonne mesure un tiers de la largeur du tableau:

Code:

<table width="90%">
<tr>
<td width="30%">...</td><td width="30%">...</td><td width="30%">...</td>
</tr>
<tr>
<td width="30%">...</td><td width="30%">...</td><td width="30%">...</td>
</tr></table>

Dans chacune des cases ( entre <td> et </td>, il y a un fieldset permettant de mettre le titre à moitié sur le fond.

Code:

<fieldset style="propriétés"><legend>le titre</legend> le contenu</fieldset>

Les propriétés width et height permettent de régler la largeur et la hauteur de vos fieldset. Regardez mon forum test et dites moi ce que vous changeriez.

Cordialement.

[miss-rpg]

Merci beaucoup pour toutes vos explication, j'ai réussi à avoir ce que je voulais ! ^^

Maintenant, je voudrais bien savoir comment faire (pour les news) un tableau ou on peu monter & descendre (où il y a la barre là avec une fléche en haut et en bas comme celle qu'on a dans les pages web, je sais pas comment on l'appelle.). Merci d'avance !

[Invité]

Une barre de défilement?
Autour du code de vos news, placez:

Code:

<div style="max-height: Hauteur voulue; overflow-y: auto;"> le code des news </div>

Remplacez Hauteur voulue par la hauteur de votre case news.

Cordialement.

[miss-rpg]

Voici mon code, ça ne fonctionne pas :/

Code:

<td width="30%"><div style="max-height:1; overflow-y: auto;"><fieldset style="background-color: #FFDE85; border: none; width: 95%;padding: 1px;"><legend><img src="http://img11.hostingpics.net/pics/409593news.png" border="0" alt="" /></legend> le contenue</fieldset> </div>
</td>

[Invité]

Pour que la barre apparaisse il faut que le contenu soit plus long . Pour la hauteur, il faut un nombre de pixel:

<td width="30%"><fieldset style="background-color: #FFDE85; border: none; width: 95%;padding: 1px;"><legend><img src="https://2img.net/r/hpimg11/pics/409593news.png" border="0" alt="" /></legend><div style="max-height:100px; overflow-y: auto;"> le contenu texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte </div></fieldset>
</td>

Cordialement.

[miss-rpg]

Merci ! Ca fonctionne très bien ! =D
J'ai une autre question ;Comment faire pour qu'il y ait un petit espace avec le tableau et le reste du texte et qu'il reste aligné à gauche car moi, ça me donne ça alors que je veux un peu d'espace entre le texte et le tableau (comme si l'autre forum tout en haut) :

Spoiler:

Merci d'avance !

[Invité]

Bonsoir,

En ajoutant la propriété "padding" on peut faire une petite marge entre la ligne et le texte. Vos news sont encadrées par <td style=" ......;">et </td>, donc ajoutez padding: 3px; juste après le point-virgule et juste avant les guillemets. Si vous ne voulez que la marge à gauche, mettez padding-left: 3px; .

Cordialement.

[miss-rpg]

OH ! Merci ! J'ai réussi à faire une magnfiique page d'accueil grace à votre aide Isolde ! =3

J'ai tout de meme une question à vous poser : Dans le profil, je voudrais que tout les membres puisse modifier la case "Commentaires" pour écrire un petit mot à leur ami du forum (je ne comprends pas trop car ce champs ne peut pas etre supprimé du forum et il n'y a que les modos/admins et le membre à qui appartient ce profil qui peuvent l'éditer..)

[Invité]

Bonjour,

Attention! A chaque question son sujet pour faciliter les recherches ultérieures! Pensez-y la prochaine fois .

Dans le profil, seuls les modérateurs et administrateurs et/ou l'utilisateur lui même peuvent modifier les champs. Donc ce que vous souhaitez faire n'est pas possible.

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

Cordialement.

[miss-rpg]

Désolée mais je ne trouve pas ^^'
Si c'est impossible, pourriez-vous me dire comment supprimer le champs "commentaires" du profil ?