Partage
  • Partager sur Facebook
  • Partager sur Twitter

Tableaux vs CSS : un combat de chaque instant...

Tableaux réservés aux données tabulaires uniquement

    11 décembre 2005 à 23:18:46

    Salut Benjii, dans l' esprit de ce que tu veux faire , il y a une super réalisation de background découpé a cette adresse .
    ++
    • Partager sur Facebook
    • Partager sur Twitter
      12 décembre 2005 à 11:57:52

      Moi aussi jai mon ami sur TOUT sa!

      Selon moi css est un peu trop compliquer pour aussi bien placer que les tableux car
      jai apri au debut en css mais plein de problems de flotant et tout! surtou si une personne est en 800x600quand le site es en 1024x728

      en tous cas pour linstant je vais me pratiquer avec les tableux car c'est ce que j'aime le plus pour linstant!
      • Partager sur Facebook
      • Partager sur Twitter
        12 décembre 2005 à 21:51:58

        Le problème c'est que vous ne comprenez pas de quoi on vous parle : on ne vous parle pas de choix ou de préférence, mais de bon sens et quasiment d'obligation (selon moi le CSS devrait être obligatoire pour la mise en page mais peut-être suis-je un peu radical...).

        Ce n'est pas tout de voir que telle ou telle technologie est plus simple, mais il faut y voir les enjeu que son utilisation va comporter :
        Dans un soucis d'accessibilité majoritairement (attention, accessibilité ne signifie pas seulement accès aux handicapés), de légèreté, mais aussi de facilité de modification ou d'adaptation, le CSS devrait être roi.

        Parce que coder un site ne signifie pas coder pour soi, mais développer une interface, pour le visiteur, qui se doit de respecter différentes règles qui ont chacune leur importance.

        Par le biais de ce topic j'aurais voulu en sensibiliser quelques uns à ce problème, les mêmes qui à l'heure actuelle défendent leur manière de coder : les tableaux, dans le cadre d'une mise en page, sont réprimendés par le W3C.
        Ceci ne signifie peut-être rien pour certains mais sachez quand même que c'est ce même W3C qui a permis l'uniformisation et la standardisation des téchnologies web telles que le XHTML et le CSS. Celà représente donc beaucoup : si personne ne suivait ces règles, nous serions encore à l'heure actuelle à une époque des plus anarchique dans le domaine de l'internet.

        Je ne vous demande donc pas votre avis à savoir si selon vous il faut ou non utiliser ces technologies mais j'affirme (haut et fort) que l'on doit les utiliser coûte que coûte, peu importe qu'il y ait tel ou tel avantage ou désavantage. Mais sachez seulement que si on a introduit des technologie comme le CSS, ce n'est surement pas pour faire un bond en arrière mais surtout pour se simplifier la vie : l'Homme est d'un naturel feignant... ;)
        • Partager sur Facebook
        • Partager sur Twitter
          13 décembre 2005 à 18:30:31

          Oui je suis d'accord avec toi!
          Seulement pour comprendre qu'il ne "faut" pas utiliser les tableaux pour la mise en page, il faut savoir le sens de la sémantique! Et également avoir fait le choix de la respecter!
          Car la sémantqieu c'est avant tout: "utiliser une balise pour son sens et non pour son rendu visuel!"

          Ainsi, une persone ayant compris et accepté la sémantique pourra facilement changer de comportement!
          Attention tout de même, comme l'a signalé Raphaël au début de ce topic, à ne pas tomber dans une divite chronique!

          Je terminerai en disant qu'une personne soucieuse que son site soit valide en XHTML doit respecter la sémantique! CAr je le rappelle: le respect de la sémantique, ainsi que la séparation contenu/mise en page (ce qui est en rapport direct avec le sujet de ce topic), est le sens principal du XHTML!
          • Partager sur Facebook
          • Partager sur Twitter
            13 décembre 2005 à 19:39:48

            C'est bien beau tous ces debats mais moi j'ai beau tous lir ca ne m'aide pas vraiment alors je vais vous soumettre un petit Probleme a resoudre pour voir comment vous realisez ca en css parceque moi j'ai beau reflechir et si je voulai le fair faudrai utiliser une bonne quantité de balise <div> et je vous parle meme pas de la parti css ca serai un sacré boxon, cela dit comme je suis qu'un debutant j'aimerai bien qu'un souteneur du language css me fasse part de ces connaissances (si il est pret a les partager bien sûr ;) ).


            Voici:

            Sur ma page je souhaiterai fair un corps entouré d'un cadre avec des angles arrondis comme ceci par exemple:

            Image utilisateur


            Bon d'accord c'est tres moche et ca n'est pas tout a fait au dimension d'un corps de page mais on va dire que c'est le cas. De toute facon c juste pour vous donner une image de ce que l'on souhaite obtenir, apres vous utilisé le cadre de votre choix.

            La ca serai trop simple alors on va ajouter une petit difficulté :p je veux que ce soit extansible afin de l'afficher aussi bien avec une résolution de 800x600 qu'avec une resolution de 1280x800.


            Merci a celui qui nous donnera la solution, je pense que ca serai d'une part un bon moyen de nous prouver la puissance de css et d'autre part un bon petit tuto pour les debutants qui se pose cette question et qui se demande encore en quoi le css est il magique.
            • Partager sur Facebook
            • Partager sur Twitter
              13 décembre 2005 à 21:27:14

              Il faut:

              Fond d'écran

              Le fond d'écran bleu uniforme -Faire un background en haut répété de 1 px de largeur avec juste le trait de l'ombre -Faire 4 backgrounds (un pour chaque coin) avec les images de coins avec transparence + ombres
              Sous IE ou ne eput pas faire de PNG semi-transparent (24 bits) donc il faudra mettre une première fois les images en 24 bits avec !important puis une seconde sans et en PNG 8 bits

              Largeur

              Mettre par exemple 20% pour une petite boite comme ca </ul>

              Je ne fais pas le CSS mais je pense que je ferais comme ca. J'ai bon?

              Petite question: lorsque l'on mets 2 balises contradictoires, par exemple
              h1
                {
                color: black;
                color:blue;
                }


              Ce sera noir ou bleu?

              Et si on mets une balises !important est-elle totalement ignorée par IE?

              Et en dernier: peut-on définir plusieurs fond d'écrans qui se superposent sur la même balise?
              • Partager sur Facebook
              • Partager sur Twitter
                13 décembre 2005 à 23:04:30

                Citation : numayos

                Sur ma page je souhaiterai fair un corps entouré d'un cadre avec des angles arrondis comme ceci par exemple:

                Have fun :)
                http://www.alsacreations.com/articles/cadre/
                • Partager sur Facebook
                • Partager sur Twitter
                  14 décembre 2005 à 11:33:50

                  quand tu veux tu viens chercher la solution
                  • Partager sur Facebook
                  • Partager sur Twitter
                    14 décembre 2005 à 16:35:44

                    "Le défi", alors qu'on t'a donné une réponse d'ores et déjà... Bref.
                    Et je crois que la principale raison pour les structures en tableaux, c'est que c'est plus simple à faire pour les éditeurs wysiwyg, et surtout qu'avant c'était le seul moyen de faire.
                    • Partager sur Facebook
                    • Partager sur Twitter
                      14 décembre 2005 à 18:59:53

                      Excusez moi mais franchement:
                      Que fou ce "défi" dans ce post-it???!!!!
                      C'est un post'il pour "débattre" du CSS contre les tableaux pour la mise en page!

                      En plus j'étais content de moi, j'avais fait un bon message...

                      @+ tout le monde!

                      Edit Deeder : rien ne sert d'écrire si gros...
                      • Partager sur Facebook
                      • Partager sur Twitter
                        14 décembre 2005 à 19:31:55

                        en meme temps c un peu pour ca qu'il a ete deplacer et puis cetai pour qu on sache comment se passer des tableau pour fair un cadre donc c en raport direc avec ton post'it

                        mais je vais l'effacer ci tu veu
                        • Partager sur Facebook
                        • Partager sur Twitter
                          14 décembre 2005 à 21:11:48

                          Merci de ne pas dévier du sujet originel... ;)
                          • Partager sur Facebook
                          • Partager sur Twitter
                            17 décembre 2005 à 12:36:03

                            Le problème du CSS c'est que les possibilité de faire des cadres photoshopé sont limité .. Il éxiste bien des methodes pour, mettre une iamge différente à chaque coin d'un DIV, mais c'est laboreixu et loin d'être compatible .. Alors, moi je dis OK, je suis à fond dans le CSS mais parfois on a pas trop le choix.
                            • Partager sur Facebook
                            • Partager sur Twitter
                              17 décembre 2005 à 12:52:50

                              Non, je ne suis pas d'accord. Pourquoi sacrifier l'accessibilité de son site au détriment de graphismes superflus ?

                              Citation : Sorgue

                              mais parfois on a pas trop le choix.


                              Détrompe-toi, c'est toi qui choisis d'utiliser des tableaux pour te faciliter la vie...
                              • Partager sur Facebook
                              • Partager sur Twitter
                                17 décembre 2005 à 13:34:43

                                Citation : jp949

                                tu n'as jamais utilisé les tableaux?
                                nul besoin de balises autres que <table> <tr> <td> et <form>.
                                la je parle que pour la question du poids, la semantique c'est un autre probleme et la les tableaux ne conviennent plus.

                                Il faudrait prendre en compte le contenu aussi... avec les tableaux tu es quasi obligé de réaliser des tableaux imbriqués, etc qui vont grandement alourdir tes pages.
                                En XHTML tu n'es pas obligé de mettre des divs à foison et en surnombre, bien souvent les autres balises de type block suffisent emplement.
                                • Partager sur Facebook
                                • Partager sur Twitter
                                  17 décembre 2005 à 13:37:51

                                  Ce n'est pas plus dur en css qu'en table.
                                  la preuve dans le "defi" j'ai utilisé moins de <div> que de <td> pour arriver au meme resultat
                                  • Partager sur Facebook
                                  • Partager sur Twitter
                                    17 décembre 2005 à 14:01:23

                                    Est ce que je dis le contraire ?
                                    Non justement, il faudrait peut être lire convenablement :-°
                                    • Partager sur Facebook
                                    • Partager sur Twitter
                                      17 décembre 2005 à 14:07:35

                                      ton post est arrivé apres que je commence le mien donc il n'est pas en reponse au tien mais au precedent
                                      • Partager sur Facebook
                                      • Partager sur Twitter
                                        21 décembre 2005 à 11:37:33

                                        Rah la la... La technique des <div> m'a l'aire très bonne :)

                                        Seulement, je pense qu'on ne peut pas se contenter que de <div> pour un site.

                                        Les tableaux restent indispensables pour la présentation de données.

                                        Je vais me mettre aux <div> tout de suite =)
                                        • Partager sur Facebook
                                        • Partager sur Twitter
                                          21 décembre 2005 à 14:26:52

                                          bonne initiative.
                                          Je suis fervent partisan du div + css mais j'utilise les tables pour afficher le resultat des requetes db sql
                                          • Partager sur Facebook
                                          • Partager sur Twitter
                                            21 décembre 2005 à 14:30:36

                                            Les tableaux sont fais pour afficher des données tabulaires, à vous de savoir quand vous en servir...
                                            • Partager sur Facebook
                                            • Partager sur Twitter
                                              21 décembre 2005 à 18:21:27

                                              Citation : piouPiouM

                                              afficher des données tabulaires



                                              Marrant ce groupe de mots que tout le monde utilise, alors que personne ne sait ce que cela veut dire :D
                                              • Partager sur Facebook
                                              • Partager sur Twitter

                                              Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

                                                21 décembre 2005 à 18:41:14

                                                Tu ne le sais peut être pas, cela ne veux pas dire que les autres sont dans le même panier :euh:
                                                • Partager sur Facebook
                                                • Partager sur Twitter
                                                  21 décembre 2005 à 19:01:01

                                                  Citation : piouPiouM

                                                  Tu ne le sais peut être pas, cela ne veux pas dire que les autres sont dans le même panier :euh:



                                                  OKI. Donnes moi une définition claire, nette et concise de ce qu'est une donnée tabulaire. ;)
                                                  • Partager sur Facebook
                                                  • Partager sur Twitter

                                                  Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

                                                    21 décembre 2005 à 19:09:55

                                                    Une donnée qui est destinée à être mise dans une tableau.
                                                    • Partager sur Facebook
                                                    • Partager sur Twitter
                                                      22 décembre 2005 à 0:34:33

                                                      Si tu ne vois pas ce que cela peut être Thunderseb, les données dont parle Nyro Xeo sont par exemple des données statistiques ou encore un listing de résultat scolaire, etc...
                                                      Bref des données qui n'ont rien à voir avec de la présentation, du design ou encore du blabla à la noix.
                                                      • Partager sur Facebook
                                                      • Partager sur Twitter
                                                        22 décembre 2005 à 9:25:51

                                                        Citation : piouPiouM

                                                        Si tu ne vois pas ce que cela peut être Thunderseb, les données dont parle Nyro Xeo sont par exemple des données statistiques ou encore un listing de résultat scolaire, etc...
                                                        Bref des données qui n'ont rien à voir avec de la présentation, du design ou encore du blabla à la noix.



                                                        Je vois très bien ce que c'est, mais le problème, c'est que tout le monde à sa "petite définition". Pour présenter un texte brut, un listing, des statistiques, c'est logique, ce sont des données tabulaies. Mais maintenant, prenons un bête exemple, ce forum. C'est un tableau. Or, que vois-je ? Ce n'est pas du texte brut qui replit les cellules (c'est plein de HTML). J'y vois même des liens hypertextes. Et quoi d'autre encore ? des images, oui, des avatars de 100*100 pixels. Tout cela, sont-ce des données tabulaires aussi ? Moi je dirais que oui. Car je pense, ou fond de moi qu'un tableau ne dois juste pas être utulisé pour mettre en page un design fait d'images. Donc, d'après ma théorie, ce sont des données tabulaires. Mais pour vous ?
                                                        • Partager sur Facebook
                                                        • Partager sur Twitter

                                                        Ma vraie biographie - Ex-Manager de la Validation sur le Site du Zéro - sdlm.be - Horus.aero

                                                          22 décembre 2005 à 12:24:13


                                                          :colere: Je suis vraiment dégoûté :
                                                          • J'ai fait un design avec des tableaux, j'ai passé beaucoup de temps
                                                          • J'ai lu le tuto de El Konkonbré M@squed sur la réalisation d'un design à l'aide de tableaux donc dégoûté d'avoir passé tant de temps alors que j'aurais pu avoir la solution vite fait (je ne connaissait pas les règles sous Photoshop).
                                                          • J'ai lu le commentaire de Chahine :

                                                            Citation : Chahine


                                                            J'en connais un qui va hurler :-° !
                                                            >> J'ai nommé neoxx78 !


                                                            qui m'a ramené sur un tuto sur la sémantique qui m'as ramené sur ce forum. Dégoûté de ne pas pouvoir utiliser les tableaux pour le design.
                                                          • J'ai cherché une solution pour me passer des tableaux. Je l'ai trouvée. Je me dis : « Je vais en faire profiter les autres ! ». Et là je lis la deuxième page, dont le post de Raphaël :

                                                            Citation : Raphael

                                                            Have fun :)
                                                            http://www.alsacreations.com/articles/cadre/


                                                            Je cliques sur le lien et là o_O , ils ont aussi la solution.


                                                          Mais après tout rien à faire, je poste quand même la mienne :

                                                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
                                                          <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
                                                                  <head>
                                                                          <title>Design sans tableaux</title>
                                                                          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                                                                          <link rel="stylesheet" media="screen" type="text/css" href="comment_faire_sans_tableaux.css" />
                                                                  </head>
                                                                  <body>
                                                                 
                                                          <div class="cadre">

                                                                  <div class="haut_1"><div class="haut_2"><div class="haut"></div></div></div>
                                                                 
                                                                  <div class="milieu_1"><div class="milieu_2"><div class="milieu">
                                                                 
                                                                  <!-- Ici mettre le contenu de votre site web -->
                                                                 
                                                                  </div></div></div>
                                                                 
                                                                  <div class="bas_1"><div class="bas_2"><div class="bas"></div></div></div>

                                                          </div>

                                                                  </body>
                                                          </html>




                                                          /*-------------------*/
                                                          /* LES CADRES */
                                                          /*-------------------*/

                                                          .cadre
                                                          {
                                                          /* à vous de voir les propriétés à y mettre */
                                                          }

                                                          .haut_1
                                                          {
                                                          background : url("graphisme/images/hg.gif") no-repeat left ;
                                                          padding-left: 25px ;
                                                          height : 25px ;
                                                          }

                                                          .haut_2
                                                          {
                                                          background : url("graphisme/images/hd.gif") no-repeat right ;
                                                          padding-right: 25px ;
                                                          height : 25px ;
                                                          }

                                                          .haut
                                                          {
                                                          background : url("graphisme/images/hm.gif") repeat-x ;
                                                          width : 100% ;
                                                          height : 25px ;
                                                          }



                                                          .milieu_1
                                                          {
                                                          background : url("graphisme/images/mg.gif") repeat-y left ;
                                                          padding-left: 25px ;
                                                          }

                                                          .milieu_2
                                                          {
                                                          background : url("graphisme/images/md.gif") repeat-y right ;
                                                          padding-right: 25px ;
                                                          }

                                                          .milieu
                                                          {
                                                          background : black ;
                                                          color : white ;
                                                          width : 100% ;
                                                          }

                                                          .bas_1
                                                          {
                                                          background : url("graphisme/images/bg.gif") no-repeat left ;
                                                          padding-left: 25px ;
                                                          height : 25px ;
                                                          }

                                                          .bas_2
                                                          {
                                                          background : url("graphisme/images/bd.gif") no-repeat right ;
                                                          padding-right: 25px ;
                                                          height : 25px ;
                                                          }

                                                          .bas
                                                          {
                                                          background : url("graphisme/images/bm.gif") repeat-x bottom ;
                                                          width : 100% ;
                                                          height : 25px ;
                                                          }



                                                          Avec les images qui vont avec :
                                                          Image utilisateur

                                                          Image utilisateur

                                                          Image utilisateur

                                                          Image utilisateur

                                                          Image utilisateur

                                                          Image utilisateur

                                                          Image utilisateur

                                                          Image utilisateur

                                                          Vous pouvez tester : ça marche !
                                                          Allez ! Moi je vais défouler ma colère sur un autre forum ! :diable:

                                                          PS : Désolé pour les coins : la flême de les mettre transparents :p .
                                                          • Partager sur Facebook
                                                          • Partager sur Twitter

                                                          Tableaux vs CSS : un combat de chaque instant...

                                                          × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                                                          × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                                                          • Editeur
                                                          • Markdown