Joomladay francophone 2018 à Paris 18 et 19 mai

Les tabulations en CSS

Réduire
X
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • Les tabulations en CSS

    Bonjour à tous et à toutes,

    Je suis en train de mettre à jour mon CV et je galère avec les tabulations en CSS. Je n'ai pas réussi à faire autrement qu'avec un tableau.

    Je voudrais que dans cette page de mon CV , à la partie technique, le texte reste aligné en dessous des ":" si on diminue la taille de la fenêtre sous IE ou Firefox ou autre navigateur.

    Voici le code HTML avec un tableau, qui fonctionne , d'une partie de mon CV :
    Code:
    <div id="competences_tech">
    <table summary="competences techniques">
      <tr>
        <td class="col1">Syst&egrave;mes</td>
        <td class="col2">: Unix, Windows 3.1, 95, 98, NT, et XP, MS/DOS, VAX/VMS, RMX86, CPM86</td>
      </tr>
      <tr>
        <td class="col1">Langages</td>
        <td class="col2">: C, C++, HTML, css, php, Ada, Powerhouse, Fortran, PLM, Basic, SQL, PL/SQL, assembleurs</td>
      </tr>
      <tr>
        <td class="col1">M&eacute;thodologies</td>
        <td class="col2">: Merise, Merise/2, SA/RT (Structured Analysis / Real Time), DOD 2167-A</td>
      </tr>
      <tr>
        <td class="col1">Outils</td>
        <td class="col2">: OpenOffice, Microsoft Office, BusinessObjects, Powerbuilder, AMC*Designor, Teamwork, TPS, GIMP, Paint shop pro, CMS (Joomla, NPDS)</td>
      </tr>
      <tr>
        <td class="col1">Base de donn&eacute;es</td>
        <td class="col2">: Microsoft Office, BusinessObjects, Powerbuilder, AMC*Designor, Teamwork, TPS, GIMP, Paint shop pro, CMS (Joomla, NPDS)</td>
      </tr>
    </table>
    </div>
    et le CSS associé :

    Code:
    #competences_tech table{
    	border: none;
    	width: 94%;
    	margin-left: 6ex;
    }
    #competences_tech td, #exemple1 th{
    	border: none;
    }
    
    #competences_tech .col1{
    	width: 13ex;
    	vertical-align: top;
    }
    #competences_tech .col2{
    	padding-left: 1ex;
    	text-indent: -1ex;
    	
    }
    Comment faire pour convertir tout en CSS sans Table .

    Merci d'avance à ceux qui répondront.
    Dernière édition par fynhooft à 21/06/2007, 21h55
    GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
    Le terrier de Fynhooft : http://patrick.gauwin.free.fr
    Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

  • #2
    salut à toi,
    mon avis personnel: pour présenter des informations sous forme de tableau, mieux vaut un tableau qu'une cascade de div avec des clear:both;

    cela en fera râler plus d'un peut être ...
    HEY HO, LET'S GO

    Commentaire


    • #3
      Effectivement dans certain cas cela va plus vite à réaliser .

      Dans mon cas, ce genre de chose est réalisé facilement avec un traitement de texte en positionnant les tabulations adéquates. On ne crée pas un tableau pour positionner le texte.

      Je voudrais juste savoir comment on réalise la même chose sans tableau avec les CSS car, paraît-il, c'est ++ mieux et c'est ++ rapide.

      Alors, une solution ?
      GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
      Le terrier de Fynhooft : http://patrick.gauwin.free.fr
      Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

      Commentaire


      • #4
        En html on a inventé un truc super pour faire des tableaux : les tables
        lol
        non il n'est pas facile de faire ce que tu veux en css + div, mais simple comme bonjour en table + css.
        donc utilise les tableaux.
        Ils ne sont pas interdis, pour représenter des données tabulaires, mais simplement non recommandés pour la mise en page de tout le site en lui même.
        cours de SVT - infos scientifiques : www.nicolas-ogier.fr
        pas de demandes d'aide par mp, elles seront systématiquement refusées !

        Commentaire


        • #5
          Bonsoir,
          ce que tu demandes ressemble bigrement à une liste.
          je dirais donc la formule magique <ul><li></li></ul>

          Bon week end

          didier

          EDIT: non en fait j'ai regardé ça trop vite, je parlais pour la partie avec les tirets.
          Trop fatigué.
          Dernière édition par didierrocher à 22/06/2007, 21h13 Raison: Faille spatio-temporelle + cécité partielle

          Commentaire


          • #6
            tu peux essayer ça (j'ai mis des border), le texte est honteusement piqué d'un autre post ...

            Code HTML:
                <style>
            #left{
            width:200px;
            border:solid 1px #000;
            }
            #right{
            position:relative;
            top:-21px;
            border:solid 1px #000;
            margin-left:210px;
            float:left;
            }
            #clear{
            clear:both;
            }
              </style>
            <div id="clear">
            <div id="left">blabla1</div>
            <div id="right">2/ Avec cette astuces je souhaite virer le
            titre des sections qui
            s'affichent en haut de page : news par exemple quand on clique sur le
            menu news. J'imagine que c'est tout &agrave; fait faisable mais le
            probl&egrave;me
            est que joomla est un peu brouillon parfois poru trouver quelque chose
            (pas taper, c'est une remarque constructive <br>
            3/ Enfin et tant que je vous ait (si c'est vraiment pas la section
            j'irai poster ailleurs), au vu du th&egrave;me que j'ai choisi il
            m'est
            maintenant impossible d'afficher un menu top, sous en dessous de la
            banni&egrave;re, soit au dessus... vous auriez une id&eacute;e
            d'o&ugrave; le probl&egrave;me peut
            venir ?
            </div>
            </div>
            <div id="clear">
            <div id="left">blabla2</div>
            <div id="right">maintenant impossible d'afficher
            un menu top, sous en dessous de la
            banni&egrave;re, soit au dessus... vous auriez une id&eacute;e
            d'o&ugrave; le probl&egrave;me peut
            venir ?
            </div>
            </div>
            à adapter selon tes besoins: taille des polices en px ou % ou em, padding et autres margin top et bottom .... (ce n'est peut être pas la solution la plus judicieuse)
            Dernière édition par kelu à 22/06/2007, 22h19 Raison: oubli du clear:both !!!
            HEY HO, LET'S GO

            Commentaire


            • #7
              Des listes qui ne sont pas des listes !

              Faux : ce n'est pas une liste, didierrocher .

              Dans une liste, tu as ceci :
              voici une liste :
              • texte 1
              • un long texte pour remplir afin de montrer le problème du retour à la ligne qui devrait être gérer avec des tabulations comme le font très bien les traitements de texte modernes mais qui n'est pas facile à faire avec des CSS et rien que des CSS sans tableau
              • texte 3 et patati et patata


              Ce que je veux c'est cela :

              la liste que je veux :
              -----systemes--------: systeme1, systeme2, systeme3, ...
              -----outils------------: outil1, outil2, ...
              -----langages---------: langage1, langage2, ...
              -----base de données-: bdd1, bdd2, bdd3, bdd4

              où les "-" représentent bien sûr des espaces : j'ai mis des "-" car les espaces sont remplacés par un seul par le HTML
              Les textes des rubriques doivent être alignés par rapport aux ":" et non par le gros point qui n'existe pas dans cette liste.
              Dernière édition par fynhooft à 22/06/2007, 23h07
              GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
              Le terrier de Fynhooft : http://patrick.gauwin.free.fr
              Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

              Commentaire


              • #8
                tu pourrais faire un truc de ce genre
                Code HTML:
                <span class="label">systeme</span><span class="texte">&nbsp;:&nbsp;systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...</span> <br />
                <span class="label">outils</span><span class="texte">&nbsp;:&nbsp;outils1...</span><br />
                avec un css
                Code:
                .label {
                	display: block;
                	width: 200px;
                	float: left;
                }
                .texte {
                	display: block;
                	float: left;
                }
                cours de SVT - infos scientifiques : www.nicolas-ogier.fr
                pas de demandes d'aide par mp, elles seront systématiquement refusées !

                Commentaire


                • #9
                  A Kelu :

                  J'ai rajouté 2 lignes pour coller à ce que je recherche :

                  Code:
                  #right{
                  position:relative;
                  top:-21px;
                  border:solid 1px #000;
                  margin-left:210px;
                  float:left;
                  padding-left: 1ex;
                  text-indent: -1ex;
                  }
                  On se rapproche de la solution. Il y a un seul pb dans ce que tu proposes : la ligne "top:-21px;" et fortement liée à la hauteur de la police de caractère utilisée. Sinon cela fonctionne .
                  Dernière édition par fynhooft à 22/06/2007, 23h21
                  GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                  Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                  Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                  Commentaire


                  • #10
                    Des tabulations en CSS !!!

                    A Opware2000:

                    J'ai remplacé les "span" par des "div",
                    j'ai enlevé les "&nbsp;" car Joomla me les vire régulièrement (Joomla les prend dans l'éditeur mais quand tu veux ré-éditer ton texte, ils ont disparus !!!) : ils ne sont pas nécessaires.

                    Code:
                    <div class="label">systeme</div><div class="texte">: systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... 
                    systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...  systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1... systeme1...</div> <br />
                    <div class="label">outils</div><div class="texte">&nbsp;:&nbsp;outils1...</div>
                    et pour le CSS, j'ai rajouté ceci (en rouge) :

                    Code:
                    .label {
                    	display: block;
                    	width: 150px;
                    	float: left;
                    	margin-left: 6ex;
                    }
                    .texte {
                    	display: block;
                    	float: left;
                    	padding-left: 1ex;
                    	text-indent: -1ex;
                    
                    }
                    ET, ... cela fonctionne

                    La solution OPWARE2000 a le mérite de fonctionner indépendamment de la police de caractère par rapport à celle de KELU.

                    CONCLUSION : Les CSS, ce n'est pas encore aussi simple que d'utiliser un traitement de texte !!!

                    Un grand merci à tous ceux qui m'ont répondu. C'est bien sympa .
                    Je pense que cela pourra servir à d'autres.
                    GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                    Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                    Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                    Commentaire


                    • #11
                      Je me suis réjouis un peu trop vite .

                      Il n'y pas de problèmes avec Internet Explorer mais avec Mozilla, on obtient n'importe quoi lorsqu'on réduit la taille de la fenêtre. Pour une fois, c'est Mozilla qui pose problème.

                      Le pb c'est qu'il n'y a pas de retour à la ligne à la fin du texte.
                      Que faut-il modifier dans le CSS ?
                      GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                      Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                      Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                      Commentaire


                      • #12
                        C'est le soucis d'avoir remplacé span par div le span est pour un bloc dans une ligne de texte
                        cours de SVT - infos scientifiques : www.nicolas-ogier.fr
                        pas de demandes d'aide par mp, elles seront systématiquement refusées !

                        Commentaire


                        • #13
                          J'ai remis les "span" à la place des "div" et j'ai rajouté le "br" de saut de ligne.

                          Sous IE : pas de pb.
                          Avec Firefox : le retour à la ligne est revenu dans la fenêtre maximale. Par contre, si on diminue la taille de la fenêtre, j'ai "méthodologie" sur une ligne et le reste sur la ligne de dessous.

                          Il y a encore un schmilblic !!!
                          GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                          Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                          Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                          Commentaire


                          • #14
                            met un height dans le css du span .label
                            ca imposera leur hauteur de renvois
                            cours de SVT - infos scientifiques : www.nicolas-ogier.fr
                            pas de demandes d'aide par mp, elles seront systématiquement refusées !

                            Commentaire


                            • #15
                              Cela fonctionne enfin ... avec Firefox mais cela ne fonctionne plus ... avec IE
                              J'ai mis en rouge ce que j'ai dû rajouter dans le CSS.
                              Le "height: 0; " pour que cela reste sur la même ligne et le "margin-left: 21ex;" pour le décalage à la position souhaitée.


                              Code:
                              .label {
                              	display: block;
                              	width: 150px;
                              	float: left;
                              	margin-left: 6ex;
                                      height: 0px;
                              
                              }
                              .texte {
                              	display: block;
                              	float: left;
                              	padding-left: 1ex;
                              	text-indent: -1ex;
                                      margin-left: 21ex;
                              }
                              Le nouveau pb avec IE :
                              - dans la fenêtre maximale, il y a un décalage de 31ex par rapport aux ":"
                              - dans la fenêtre réduite de IE, il y a un saut de ligne après "méthodologies" et le décalage est bon après les ":".

                              C'est vachement simple les tabulations en CSS, n'est-ce pas !!!
                              GIMPons.net : http://www.GIMPons.net = plus de 1000 tutoriels sur GIMP , plus d'un millier d'images pour expliquer les filtres de GIMP.
                              Le terrier de Fynhooft : http://patrick.gauwin.free.fr
                              Le CSE d'Hazebrouck : http://www.csehazebrouck.fr

                              Commentaire

                              Annonce

                              Réduire
                              1 sur 2 < >

                              C'est [Réglé] et on n'en parle plus ?

                              A quoi ça sert ?
                              La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                              Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                              Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                              Comment ajouter la mention [Réglé] à votre discussion ?
                              1 - Aller sur votre discussion et éditer votre premier message :


                              2 - Cliquer sur la liste déroulante Préfixe.

                              3 - Choisir le préfixe [Réglé].


                              4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                              2 sur 2 < >

                              Assistance au forum - Outil de publication d'infos de votre site

                              Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                              Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                              Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                              UTILISER À VOS PROPRES RISQUES :
                              L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                              Problèmes connus :
                              FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                              Installation :

                              1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                              Archive zip : https://github.com/AFUJ/FPA/zipball/master

                              2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                              3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                              4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                              5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                              6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                              et remplacer www. votresite .com par votre nom de domaine


                              Exemples:
                              Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/
                              Pour executer le script: http://www..com/fpa-fr.php

                              Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                              Télécharger le script fpa-fr.php dans: /public_html/cms/
                              Pour executer le script: http://www..com/cms/fpa-fr.php

                              En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                              Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                              Voir plus
                              Voir moins
                              Travaille ...
                              X