AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Les Structures de Formes [HTML/CSS]

    Partagez
    Angel Ezekiel
    MasculinAge : 24Messages : 1350

    le Sam 25 Juin 2011 - 12:58

    Bonjours , je vais aujourd'hui vous parler de quelque chose pouvant vous servir partout en web et surtout en forum vu qu'on est sur un forum . Souvent je vois des commandes de fiche, de page d'accueil … Le tout est en fait basé sur les structures . Afin de pouvoir aider certain qui désire s'améliorer , je vais vous expliquer deux façons de faire des structures .

    1.Définition

    Une structure est ce qui va permettre de mettre votre page html en forme comme vous le désirez .Vous pourrez ainsi gérer l'apparence grâce au css . C'est le principe entre le html et le css:
    Le Html sert pour le fond
    Le Css sert pour la forme
    C'est pour cela que la structure la plus soft est du css alors que vous avez l'habitude de faire des structures en Html . Mais celles-ci sont beaucoup plus lourdes et indéchiffrable .
    Forumactif n'utilise que du Html pour sa structure ou peut être un peu de structure Css pour les widgets vu comment ils fonctionnent mais je n'en suis pas sur .

    2. La structure en Html : le tableau
    C'est la base que beaucoup utilise pour les qeel,les pages d'accueil ou même la gestion des catégories avec les apparences . C'est ce que j'utilise principalement pour les catégories et le qeel car c'est dans des templates qui utilisent déjà ce style . Par contre ma page d'accueil utilise la seconde structure .

    Je vais vous prendre un tableau simple et vous expliquer chaque partie du code.

    Code:
    <table>//C'est la balise d'ouverture du tableau//
      <tr>//c'est la balise d'ouverture de la ligne//
          <th>Nom</th>//C'est une cellule en-tête d'où le th//
          <th>Age</th>
          <th>Pays</th>
      </tr>//c'est la balise de fin du tableau//

      <tr>
          <td>Carmen</td>//C'est une cellule normal d'où les td//
          <td>33 ans</td>
          <td>Espagne</td>
      </tr>
      <tr>
          <td>Michelle</td>
          <td>26 ans</td>
          <td>Etats-Unis</td>
      </tr>
    </table>//C'est la balise de fin du tableau//

    voilà la structure en html avec le tableau . Vous pouvez ensuite gérer des tableaux de tableaux et mettre du css avec soit une class si vous le faite avec votre page css sinon avec style pour l'avoir directement . Le gros problème est que ça devient très lourd . Chaque ligne doit avoir des colonnes identiques . D'un côté c'est le principe du tableau

    Code:
    <td colspan="2"></td> //permet de fusionner deux cellules de façon horizontale//
    <td rowspan="2"></td>//permet de fusionner deux cellules de façon verticale//

    3.La Structure en Css : Le Float
    voilà ce que j'utilise pour mes pages d'accueil et principalement en html pur avec site web . Le float est une caractéristique en css comme le color qui permet de mettre votre partie en flottant . Pour cela c'est très simple.

    Dans votre fiche Css
    Code:
    .floatg{
    float:left;
    }

    .floatd{
    float:right;
    }

    Ensuite dans votre Html , il suffit de faire un
    Code:
    <div class= «floatg»></div> ou floatd

    Maintenant vous pouvez tout séparer en deux . Il suffit de gérer avec des div et des div class et vous pouvez structurer votre page html . Sur des sites basiques on utilise les float pour le corps du site où on a le menu d'un côté et les informations de l'autres .

    J'ai essayé d'être le plus clair possible en espérant que cela puisse aider.



    Sui'
    MasculinAge : 24Messages : 1865

    le Dim 26 Juin 2011 - 19:49

    Hey!!

    Un tutoriel pratique pour ceux qui débutent mais Riku à déjà mis en place des explications détaillés sur les tableaux -> Ici

    Par contre en ce qui concerne la troisième partie "La Structure en Css : Le Float", elle serait intéressante si elle était plus détailler avec un exemple de tableau "simple" à faire avec cet méthode et le procéder.
    Pour le coup la tu balance un bout de code css et un code html qui risque surement d'étonner ceux qui débute ^^.

    Merci du partage tout de même.



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    Angel Ezekiel
    MasculinAge : 24Messages : 1350

    le Dim 26 Juin 2011 - 20:31

    Le Float ne sert pas pour faire des "tableaux" mais bien pour faire des structures qu'on fait habituellement avec des tableaux ce qui entrainent une habitude du langage .



    Sui'
    MasculinAge : 24Messages : 1865

    le Dim 26 Juin 2011 - 20:42

    Oui sa j'ai compris merci xD, je me suis mal exprimer, je voulais dire sa, que sa donne l'impression que c'est fait à partir des balise "table" comme les gabarits -> ici

    Mais si t'estime que t'es explication suffise alors oublie mon conseil ^^.



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    Angel Ezekiel
    MasculinAge : 24Messages : 1350

    le Dim 26 Juin 2011 - 20:51

    Je vais peut être voir après pour faire quelques "gabarit" avec des floats que je mettrais dans un autre topic alors



    Sui'
    MasculinAge : 24Messages : 1865

    le Mer 13 Juil 2011 - 22:37

    Re =D

    J'ai trouver ce petit tutoriel/schéma pour le float enfin avec sa j'ai enfin compris comment organiser mon css ^^".

    Boîtes flottantes

    Sa peut toujours servir ^^.



    Merci beaucoup Woo pour ce kit *-*

    Sui' Art's
    Contenu sponsorisé

    Aujourd'hui à 7:03


      La date/heure actuelle est Dim 11 Déc 2016 - 7:03