Utilisation des codes

[Honeey L.]

Bonsoir,
Voilà je suis toute nouvelle dans la création d'un forum. Je visite beaucoup de forums et je vois comment les forums sont vraiment superbes. La plupart de ses forums utilisent les codes HTLM etc. Moi je n'y connais absolument RIEN
Si quelqu'un aurait quelques astuces de codes à me donner ce serait gentil voir si ce n'est pas trop demandé de m'aider à finir mon forum parce que je suis vraiment dépasser avec tout ça

Merci d'avance.

[Lixyr]

Tu as plein de site pour ça. Il te suffit de chercher sur internet. Le plus connu étant : Le Site du Zéro

Mais tu as également des guides : Le Guide du Langage HTML

Mais pour la suite, ce serait plus simple si tu demandais tes codes directement.

[Honeey L.]

L'une des choses que je voudrais par exemple est de mettre mon texte sur fond de couleur comme ici par exemple
vampire city
J'adore ce genre de mise en page mais je ne sais pas du tout comment faire.

PS: Merci pour tes deux sites, ils m'aident bien =D

[ge80]

Bonjour
Voici un squelette illustrant la mise en forum

Code:

                                <div style="border: 3px solid rgb(8, 7, 7); background-color: CornFlowerBlue;" justify="">
                                <blockquote>
                                  <div align="justify"><br />
                                  <font style="font-size: 35pt; font-family: georgia; text-shadow: rgb(0, 0, 0) 1px 1px 1px; letter-spacing: -3px;"><font  color="Black">TITRE</font></font><br />
                                  <br />
                                  <br />
                                  <ul>
Le texte.
                                    <br />
                                    <br />
                                  </ul>
                                  </div>
                                </blockquote>
                                </div>

Il suffit d'insérer ce code dans une cellule d'un tableau ou alors de fixer sa dimension.

Disponible pour plus d'infos
Cordialement
Ge

[Honeey L.]

Merci, j'aime bien aussi ce code ;D

[ge80]

Pour le titre

Code:

<div style="background-color: rgb(55, 93, 129); text-align: center;"><font face="georgia" size="7"><font color="Black">TITRE </font></font></div>

Il suffit de coller cela dans un message et vous aurez le rendu visuel.
Reste à compléter et à comprendre.

Disponible pour plus
Ge

[Honeey L.]

C'est le code que je cherchais en plus !
Merci beaucoup !
Je vais vous embêter encore un peu désolée d'avance mais comment fait on pour avoir un fond comme ceci :
varda protect
C'est le petit cadre ou il a l'icône qui m'intéresse

[Lixyr]

Quel petit cadre ?

[ge80]

Bonjour
J'ai la même question que Lixyr Yrna.

Cordialement
Ge

[Honeey L.]

Désolée du temps de réponse. Celui pour écrire l'histoire.
Et j'aurais voulu savoir aussi, comment fait on pour avoir ce "cadre"
california-high
Le "cadre" avec la barre qui défile. J'ai cherche ce code partout sans le trouver

[ge80]

Je pense que vous voulez dire la zone texte avec ascenseur, NON ?

[Honeey L.]

Oui c'est cela ! =D

[ge80]

Ok
C'est simple.

Un tableau contenant des cellules.
Utilisation de bords arrondis
Utilisation de la propriété overflow pour l'effet barre verticale.
Rien de bien complexe.

Je regarderai et vous donnerez des explications.
Réponse demain ou par un autre "aideur".

[Honeey L.]

Je n'ai pas tout compris, désolé
Mais merci beaucoup de votre aide. J'attends votre réponse ou celle d'un autre "aideur"

[ge80]

Le message est constitué d'une table (tableau) avec des cases (cellules)
Dans ces cellules sont placés le texte, l'image, et le titre.

Le reste n'est qu'une histoire de style pour faire les arrondis, les couleurs...

Demain, je fais un guide qui vous servira mais aussi aux autres.
J'espère que cela sera plus compréhensible que ce message

Bonne nuit.

Ge

Edit : de retour....
Cette forme vous convient-elle ?
Évidemment c'est un exemple et vous pourrez tout modifier.

image:

J'attends votre avis pour faire un guide.

[Honeey L.]

Oui c'est parfait !=D

[ge80]

Code:


Quelques commentaires : ne pas implanter ce code !
<!— centrage  -->
                      <center>
 <!-- Conteneur -->
                      <fieldset>
<!—legende du conteneur avec taille et fonte de caracteres-->
<legend>
<span>
<font face="Georgia"><font color="red">Légende</font></font></span>
</legend>
<span style="font-size: 10pt; line-height: 100%;">
<br>
<!— tableau avec un cellule  englobant un deuxième tableau -->
<table>
      <tbody>
            <tr>
                <td align="left">
                <center>
<!—tableau avec deux cellules  -->
                  <table style="width: 441px; height: 166px;">
                        <tbody>
                          <tr>
<!— cellule 1 pour une image  -->
                              <td>
                                <div><img src="http://tsi80.probb.fr/users/2212/78/75/05/smiles/183382.gif" /><br>
                                <br>
                                <br>
                                  </div>
                                  </td>
<!— fin cellule 1 -->
<!— cellule 2 pour le texte  -->
                                  <td>
                                    <div>
                                        <div style="margin: auto; text-align: center; width: 100%;">*<font color="red">TEXTE..... </font></div>
                                            <div align="justify">Text<br/>EEEEE<br>EEEEEE<br>EEEEE<br>EEEEEEE<br>EEEEEEEE<br><br></div>
                                    </div>
                                    </td>
<!— fin cellule 2 -->
                                  </tr>
                                </tbody>
                              </table>
<!— fin tableau avec deux cellules  -->
                              </center>
                              </td>
                            </tr>
                          </tbody>
                        </table>
<!— fin tableau englobant  -->
                        <br>
                        </span>
                    </fieldset>
<!— fin Conteneur -->
          </center>
                                <br>
                                <br>
<center>

Code à tester et commenter.

Code:


<center><fieldset style="border: 5px solid blue; width: 250px;"><legend><span style="font-size: 14px; line-height: normal;"><font face="Georgia"><font color="red">TITRE</font></font></span></legend><span style="font-size: 20pt; line-height: 100%;"><table><tbody><tr><td align="left"><center><table style="width: 441px; height: 200px;"><tbody><tr><td><div style="border: 5px solid black; padding: 5px; width: 100px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px;"><img src="http://tsi80.probb.fr/users/2212/78/75/05/smiles/183382.gif" /></div></td><td><div style="border: 5px solid black; padding: 5px; width: 280px; height: 150px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; overflow: auto;"><div style="margin: auto; text-align: center; width: 100%;">*<font color="blue">TEXTE..... </font></div><div align="justify">Text
EEEEE
EEEEEE
EEEEE
EEEEEEE
EEEEEEEE
                                   
</div></div></td></tr></tbody></table></center></td></tr></tbody></table></span></fieldset></center>

Les explications viendront ensuite si cela vous convient

Mais il se fait tard, la suite demain

Cordialement
gE

[Honeey L.]

Oui je pense que j'aurais besoin d'explications, en tout cas merci beaucoup ! =D

[ge80]

Aucun problème mais il est trop tard.
Essayez le code dans un message pour vérifier que la disposition vous convient bien.

A demain

Répondez si c'est ok sinon exprimez vos désirs.
Je ne parle pas des détails mais de l'allure générale.

[Honeey L.]

Je viens d'essayer le code est oui c'est bien ce que je voulais et ça me plaît bien. Merci beaucoup =D

[ge80]

Retour sur la mise en page

Explications

Code:

<!—centrage global -->
  <center>
 <!-- Conteneur -->
 <fieldset  style="border: 5px solid black;
          width: 470px;">
<!—légende du conteneur avec taille et fonte de caractères-->
<legend>
<span style="font-size: 20px;
    line-height: normal;">
<font face="Georgia"><font color="red">TITRE</font></font></span>
</legend>

 Un texte dans le conteneur <br/>
                    </fieldset>
<!—fin Conteneur -->
</center>

Code:


 <center> <fieldset  style="border: 5px solid black; width: 470px;"><legend><span style="font-size: 20px;  line-height: normal;"><font face="Georgia"><font color="red">TITRE</font></font></span></legend>
 Un texte dans le conteneur <br/></fieldset> </center>


Ressources
Lien 1 (FR)
lien 2 (EN)

Dans ce conteneur, nous plaçons le tableau avec dans une cellule l'image et dans l'autre le texte.
Ceci remplacera le code

Code:


 Un texte dans le conteneur <br/>

On observe :

Spoiler:

Construisons l'intérieur de ce conteneur.

Aide sur les tableaux en HTML Tableau en HTML

Code:

<span style="font-size: 10pt; line-height: 100%;">
<!—tableau avec un cellule  englobant un deuxième tableau -->
<table>
      <tbody>
            <tr>
                <td align="left">
                <center>
<!—tableau avec deux cellules  -->
                  <table style="width: 441px; height: 166px;">
                        <tbody>
                          <tr>
<!— cellule 1 pour une image  -->
                              <td>
                                    <div style="border: 5px
                                                        solid black;
                                                        padding: 5px;
                                                        width: 100px;
                                                        -moz-border-radius-topleft: 10px;
                                                        -moz-border-radius-topright: 10px;
                                                        -moz-border-radius-bottomright: 10px;
                                                        -moz-border-radius-bottomleft: 10px;">{lien de la photo avec balise img}
                                  </div>
                                  </td>
<!— fin cellule 1 -->
<!— cellule 2 pour le texte  -->
                                  <td>
                                      <div style="border: 5px solid blue;
                                                        padding: 5px;
                                                        width: XXpx;
                                                        height: YYpx;
                                                        -moz-border-radius-topleft: AApx;
                                                        -moz-border-radius-topright: AApx;
                                                        -moz-border-radius-bottomright: AApx;
                                                        -moz-border-radius-bottomleft: AApx;
                                                        overflow: auto;" >
                                        <div style="margin: auto; text-align: center; width: 100%;">*
                                            <font color="red">TEXTE..... </font></div>
                                        <div align="justify">Text
EEEEE
EEEEEE
EEEEE
EEEEEEE
EEEEEEEE
</div>
                                      </div>
                                    </td>
<!— fin cellule 2 -->
                                  </tr>
                                </tbody>
                              </table>
<!— fin tableau avec deux cellules  -->
                              </center>
                              </td>
                            </tr>
                          </tbody>
                        </table>
<!— fin tableau englobant  -->                   
                        </span>

Ce qui donne avec quelques valeurs adaptées aux images et avec bordures pour visualiser les zones...

Code:

<span style="font-size: 10pt; line-height: 100%;"><table border="3" style="width: 500px;"> <tbody> <tr> <td align="left"> <br/><center><table border="6" style="width: 100%; height: 200px;"> <tbody> <tr><td style="width: 200px;">  <div style="border: 5px  solid black;  padding: 5px;  -moz-border-radius-topleft: 10px;  -moz-border-radius-topright: 10px;  -moz-border-radius-bottomright: 10px;  -moz-border-radius-bottomleft: 10px;"><img src="http://www.google.fr/intl/en_com/images/srpr/logo1w.png" />

  </div>  </td><td><div style="border: 5px solid blue; padding: 5px; width: 300px; height: 200px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomright: 10px; -moz-border-radius-bottomleft: 10px; overflow: auto;" >  <div style="margin: auto; text-align: center; width: 100%;">*<font color="red">TEXTE..... </font></div>  <div align="justify">Text et images
<img src="http://www.gstatic.com/news/img/logo/fr_fr/news.gif" />
EEEEE
EEEEEE
EEEEE
EEEEEEE
EEEEEEEE
EEEEEEE
EEEEE
EEEEEE
EEEEE
<img src="http://maps.google.fr/intl/fr_fr/images/logos/maps_logo.gif" />
</div>  </div>  </td>  </tr> </tbody> </table>  </center> </td> </tr> </tbody> </table> 
 </span>

On observe :

Spoiler:

Tout ceci étant dans le conteneur précédent...

N'hésiter à faire préciser certains points obscurs.

Cordialement
Ge

[Honeey L.]

Je pense avoir tout saisi. En tout cas merci beaucoup pour votre aide !