Page d'acceuil

par ^^lilice^^ Dim 23 Jan 2011 - 10:14

Bonjour,
j'ai trouvé un très bon tuto,ici sauf que j'aimerais le copier mais ne pas avoir que deux "bulles" mais Quatre/cinq. J'aimerais l'aide de quelqu'un pour m'aider à avoir le bon code afin de le mettre en place.
Cordialement
^^lilice.

Ps: je ne suis pas vraiment douée avec les codes HTML désolée.

par ge80 Dim 23 Jan 2011 - 10:24

Bonjour

Pour recevoir de l'aide, il faudrait détailler un peu et avoir un mini code de départ.

Plusieurs membres pourront vous aider mais il faut plus d'informations.

cordialement
ge

par ^^lilice^^ Dim 23 Jan 2011 - 11:25

Bonjour,
que voulez vous que je détail ? Ah oui, mon forum c'est Black horse.
Pour les "bulles" j'aimerais des bulles de même taille couleur bleu et écriture bleu clair.

Ca va comme détail ?
Cordialement
^^lilice

par ge80 Dim 23 Jan 2011 - 11:32

Vous pouvez nous donner le début code de votre zone accueil et aussi si vous avez un type de contenu de bulles alors nous le donner (images, texte...)

par ^^lilice^^ Dim 23 Jan 2011 - 11:41

Je n'ai pas de début de code. J'ai trouvé ce sujet intéressant et je voulais le réalisé.
J'aimerais du texte avec un titre et une description. Un peu comme dans le sujet quoi !

par ge80 Dim 23 Jan 2011 - 13:23

JE vois que vous partez de ce code

Code:: <table class="forumline table1 bg3" cellspacing="1" width="100%"><tbody><th colspan="1" rowspan="1" class="thTop forabg" width="28%">TON TITRE</th><th colspan="1" rowspan="1" class="thTop forabg" width="43%">TON TITRE</th><th colspan="1" rowspan="1" class="thTop forabg" width="29%">TON TITRE</th> </tr> </td> <td class="row3" colspan="1" rowspan="1" align="center" valign="top"> TON TEXTE</td> <td class="row3" colspan="1" rowspan="1" align="center">TON TEXTE. </td> <td class="row3" colspan="1" rowspan="1" align="center">TON TEXTE. </td> <tr><th class="thTop forabg" colspan="1" rowspan="1">TON TITRE</th> <th class="thTop forabg" colspan="1" rowspan="1">TON TITRE </th><th class="thTop forabg" colspan="1" rowspan="1">TON TITRE </th></tr> <td class="row3" colspan="1" rowspan="1" align="center">TON TEXTE. </td> <td class="row3" colspan="1" rowspan="1" align="center">TON TEXTE. </td> <td class="row3" colspan="1" rowspan="1" align="center">TON TEXTE. </td> </table>

Est-ce bien celui-ci qui est sur votre forum ?

Il serait le point de départ.

par ^^lilice^^ Dim 23 Jan 2011 - 13:29

Ah oui, j'ai oublier de l'enlever. Si vous voulez, je peux partir de rien.

par ge80 Dim 23 Jan 2011 - 13:41

Non ceci peut être un départ.

Je vais vous proposer une solution.

par ^^lilice^^ Dim 23 Jan 2011 - 13:43

Oki merci beaucoup pour cette aide ainsi que toutes les autres que vous m'avez si souvent fournises.

par ge80 Dim 23 Jan 2011 - 14:34

Voici un squelette de départ.

A copier dans un message ou en tant que message d'accueil.

Code:: <center> <table width="90%"> <tr> <td width="33%"> <fieldset><legend align=top> titre 1</legend>CONTENU 1</fieldset> </td> <td width="33%"> <fieldset><legend align=top> titre 2</legend>CONTENU 2</fieldset> </td> <td> <fieldset><legend align=top> titre 3</legend>CONTENU 3</fieldset> </td> </tr> </table> </center>

Un tableau avec trois cellules également réparties (33 %) (largeur 100 % pour le tableau.)

fieldset pour le contenu de la cellule.

Pour la mise en forme, que voulez-vous ?

par ^^lilice^^ Dim 23 Jan 2011 - 14:44

La mise en forme ? J'ai pas très bien compris votre question désoéle.

par ge80 Dim 23 Jan 2011 - 14:58

^^lilice^^ a écrit:La mise en forme ? J'ai pas très bien compris votre question désoéle.

Vous avez le codage d' un rectangle simple avec un affichage brut ou de base.
Voulez-vous des arrondis, un fond avec une couleur ou tout simplement comment voulez vous voir l'affichage ?

par ^^lilice^^ Dim 23 Jan 2011 - 15:10

Ah, d'accord. J'aimerais bien fond bleu clair, texte noir. Les coins arrondis si possible.

par ge80 Dim 23 Jan 2011 - 15:34

Un exemple à commenter (vos goûts)

Code:: <center> <table width="90%"> <tr> <td width="33%"> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend align=top style="height:30px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 1</fieldset> </td> <td width="33%"> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend align=top style="background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > titre 22</legend> CONTENU 2 </fieldset> </td> <td> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend align=top style="background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > titre 3</legend> Texte assez grand </fieldset> </td> </tr> </table> </center>

par ^^lilice^^ Dim 23 Jan 2011 - 15:39

Là l'écriture sera t'elle noire ? Ou puis-je la changer de mon propre chef ?
Serait il possible d'en avoir 2 autre en plus ?

par ge80 Dim 23 Jan 2011 - 16:04

Dans le cas d'une mise en forme plus complexe alors il est conseillé de passer par la feuille de style (CSS).

Vous pouvez changer comme vous voulez.

J'ai fait un tableau avec six cellules.

background-color -> couleur de fond
border -> taille de la bordure
border-radius -> rayon de la bordure
color -> couleur du texte ( 000000 pour du noir)
padding -> les espacements

Code:: <center> <table width="90%"> <tr> <td width="33%"> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 1</fieldset> </td> <td width="33%"> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend align=top style="background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > titre 22</legend> CONTENU 2 </fieldset> </td> <td> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend align=top style="background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > titre 3</legend> Texte assez grand </fieldset> </td> </tr> <tr> <td> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 4</fieldset> </td> <td> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 5</fieldset> </td> <td> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 6</fieldset> </td> </tr> </table> </center>

par ^^lilice^^ Dim 23 Jan 2011 - 16:08

Et ça, je le mets dans Page d'acceuil ou Feuille de CSS ?

par ge80 Dim 23 Jan 2011 - 16:11

Ce code est à copier dans le message de la page d'accueil mais il n'est pas terminé. Vous pouvez l'essayer dans un simple message sur votre forum.

Si vous voulez des informations de survol avec la souris (infobulle) alors, dans ce cas, il est préférable de passer par la feuille de style en complément du codage.

par ^^lilice^^ Dim 23 Jan 2011 - 16:14

Si j'ai bien compris, je met ça dans la page d'accueil et j'essaye de le terminer.
Sauf si j'ai des infobulles, dans ce cas, je le met en CSS ?
C'est ça ?

par ge80 Dim 23 Jan 2011 - 16:19

Non je continue à vous aider pour essayer de déterminer votre codage.

Je vous montre les possibilités puis je modifie en fonction de ce que vous voulez.
.

Si vous voulez des info bulle alors je vous fait une version avec deux parties :
Une partie (dans l'accueil) en codage HTML et avec peu de style (mise en forme)
Une autre dans la CSS pour la mise en forme.

Le codage ci-dessus n'a pas de partie à mettre en feuille de style.
Soit code à coller dans un message ou dans la partie accueil.

par ^^lilice^^ Dim 23 Jan 2011 - 16:20

D'accord. Et les Infobulle, c'est quoi en faite ? C'est quand on passe la sourie sur une image, on a des informations sur la personne ?

par ge80 Dim 23 Jan 2011 - 16:22

Regarder le lien que vous avez mis au début de votre sujet.
Le staff est en infobulle

Le voulez-vous ou non ?

par ^^lilice^^ Dim 23 Jan 2011 - 16:26

Ah oui, ça me plairait vraiment si ce n'est pas trop vous demander.

par ge80 Dim 23 Jan 2011 - 16:29

C'est un plaisir Wink

Je fait une version avec CSS donc modification de tout le codage jusqu'à maintenant

Patienter Wink

Il y a-t-il des modifications à faire sur la version en cours ?

par ^^lilice^^ Dim 23 Jan 2011 - 16:33

Juste deux ou trois "bulles" en plus et écriture en noir si je ne peux pas le faire de mon propre chef.

par Dïxïnhö Dim 23 Jan 2011 - 19:43

J'ai suivi ce tutoriel mais quand je met un texte long dans un cadre, ça dépasse du cadre
Comment faire ?

par ge80 Dim 23 Jan 2011 - 19:49

C'est tout à fait normal.

Le codage n'est pas terminé.

Vous pouvez placer votre code à la suite et je regarderai la modification pour votre codage.

En ce moment, entre deux aides, je développe la partie avec CSS qui sera plus cool et simple à faire évoluer.

par Dïxïnhö Dim 23 Jan 2011 - 20:38

Voila mon code

Code:: <center> <table width="90%"> <tr> <td width="33%"> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend> Bienvenue {USER&#8288;NAME} sur FIFA 11 Pro. FIFA 11 PRO est un forum de simulation sur FIFA 2011, le dernier opus de EA Sport. Tu as toujours voulu devenir manager de foot , et de créer l'équipe de tes rêves ? Tu trouveras ceci que sur FIFA 11 PRO qui est en même temps une famille et vous donne la chance de faire des connaissances et partager le bonheur et le malheur entre ses membres. Rejoins nous sur FIFA 11 PRO et ecris la légende ! </fieldset> </td> <td width="33%"> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 1</fieldset> </td> <td> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 1</fieldset> </td> </tr> <tr> <td> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 4</fieldset> </td> <td> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 5</fieldset> </td> <td> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 6</fieldset> </td> </tr> </table> </center>

par ge80 Dim 23 Jan 2011 - 21:15

J'ai modifié, sur une seule cellule, les hauteurs fixes en hauteurs maximales.

Code:: display: block; max-height: 110px; overflow:auto;

Avec apparition d'ascenseurs verticaux pour une hauteur de 110 pixels..

La version avec CSS sera plus simple !

Code:: <center> <table width="90%"> <tr> <td width="33%"> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend> Bienvenue {USER&#8288;NAME} sur FIFA 11 Pro. FIFA 11 PRO est un forum de simulation sur FIFA 2011, le dernier opus de EA Sport. Tu as toujours voulu devenir manager de foot , et de créer l'équipe de tes rêves ? Tu trouveras ceci que sur FIFA 11 PRO qui est en même temps une famille et vous donne la chance de faire des connaissances et partager le bonheur et le malheur entre ses membres. Rejoins nous sur FIFA 11 PRO et ecris la légende ! </fieldset> </td> <td width="33%"> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 1</fieldset> </td> <td> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 1</fieldset> </td> </tr> <tr> <td> <fieldset style="height:100px; background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 4</fieldset> </td> <td> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 5</fieldset> </td> <td> <fieldset style="background-color:#7FB6EC; border : 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;"><legend style="padding: 5px; height:25px; padding-top:10px; padding-left:10px; padding-right:10px; background-color:#395DC1; border: 5 px solid #fff; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;" > -Titre 1-</legend>CONTENU 6</fieldset> </td> </tr> </table> </center>

par Dïxïnhö Dim 23 Jan 2011 - 21:38

ça marche merci beaucoup

Page d'acceuil

Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil

Re: Page d'acceuil