Forum Programmation.web CSS débutant : bottom border pour chaque ligne

Posté par  (site web personnel) .
Étiquettes :
0
19
sept.
2012

Salut à tous et désolé de poser une question si simple.

le web offre rapidement les infos nécessaires pour demander à un fichier css de préciser une bordure pour chaque paragraphe, et modifier son apparence à souhait.

Oui mais, si l'on veut obtenir un effet "cahier" et dessiner une bordure sous chaque ligne, y'a t'il un moyen? je ne trouve que le délimiteur "p" pour paragraphe

Bon je suppose la réponse évidente ,j'espère que vous ne m'en voudrez pas!

  • # Ca n'existe pas

    Posté par  (site web personnel) . Évalué à 3.

    Désolé mais il n'y a pas de sélecteur ligne à ligne en CSS.

    Tu n'as que le pseudo-élément :first-line pour styler la première ligne. Mais tu n'es pas le seul à le demander. Cf http://css-tricks.com/a-call-for-nth-everything/

    Si la hauteur de tes lignes est fixe et connu, tu dois pouvoir simuler cela en CSS3 avec un background en image ou en gradient.

    L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire

    • [^] # Re: Ca n'existe pas

      Posté par  (site web personnel) . Évalué à 1.

      Merci pour cette réponse.

      Effectivement c'est un peu dommage… Des lignes fixes forcent une taille de police fixe. Comme il s'agit d'une vue html au sein d'une application, cela ôte la possibilité de fournir à l'utilisateur ce custo…

      Bon sinon, je suppose qu'il y a toujours moyen de limiter le nombre de caractères par ligne, ou une autre manière pour forcer 1 ligne = 1 paragraphe.

      Je re-poste ici si jamais j'avance

      • [^] # Re: Ca n'existe pas

        Posté par  . Évalué à 2.

        Pour ma part, j'ai re-défini le style de :
        css
        code
        {
        font: 12px 'Courier New', Courier, Fixed;
        background-color: #EEE;
        border: thin dotted #888;
        }

        usage :
        html
        <code>toto</code>

        exemple

      • [^] # Re: Ca n'existe pas

        Posté par  (site web personnel) . Évalué à 5.

        Et hop ! La version avec gradient en CSS3 : http://share.infernal-quack.net/linuxfr.org/forums/programmationweb/posts/css-debutant-bottom-border-pour-chaque-ligne/demo.html . C'est la version Firefox, à adapter aux autres navigateurs. En fait je force la hauteur des lignes à la même taille que le "pavé" du fond.

        L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire

        • [^] # Re: Ca n'existe pas

          Posté par  (site web personnel) . Évalué à 1.

          Ouf!, des pistes intéressantes!
          Effectivement utiliser le css sera bien plus gérable que de s'embêter avec des triffouillages d'UI alambiqués.

          Sympa de vos réponses, car même si j'adapterai, cela permet de continuer sur une voie sans crainte!

          • [^] # Re: Ca n'existe pas

            Posté par  (site web personnel) . Évalué à 3.

            Je viens d'ajouter des balises "pre" et des polices embarquées style écriture pour plus de réalisme. Si ça change à chaque rechargement de la page, c'est normal :)

            L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire

          • [^] # Re: Ca n'existe pas

            Posté par  (site web personnel) . Évalué à 4.

            Et voici la version cahier grand carreaux : http://share.infernal-quack.net/linuxfr.org/forums/programmationweb/posts/css-debutant-bottom-border-pour-chaque-ligne/demo2.html

            L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire

            • [^] # Re: Ca n'existe pas

              Posté par  (site web personnel) . Évalué à 1.

              Cool!, j'aime beaucoup cette version. Je testerai en webkit-liner-gradient très bientôt pour voir ce que ça donne dans gtk/webkit.

              Du coup me voila déjà pressé de coder le dialogue "sélecteur de thème"!

            • [^] # Re: Ca n'existe pas

              Posté par  . Évalué à 3.

              C'est excellent ! Non seulement pour la construction de la CSS en elle-même mais pour avoir soigné la qualité des carreaux eux-mêmes. Le rendu est vraiment proche d'une copie manuscrite originale !

            • [^] # Re: Ca n'existe pas

              Posté par  (site web personnel) . Évalué à 1.

              Merci encore! même si j'ai un peu honte du peu que j'en tire… (et effectivement, il a suffi de remplacer par webkit-linear-gradient , sans la moindre adaptation)

              https://docs.google.com/open?id=0BwRvWeekgCSlZmJlLTVqR0dxSDg

              • [^] # Re: Ca n'existe pas

                Posté par  (site web personnel) . Évalué à 3.

                Pour info, j'ai officialisé ces CSS sur mon site et ai ajouté le versions pour gérer les autres navigateurs et la version de la norme officiel :
                Sur http://infernal-quack.net/css_lab et accès direct :

                Sinon, oui, ce n'est pas idéal pour bien aligner les lignes des différents éléments HTML. Il faut que la taille des marge soit un multiple de la hauteur de lignes mais comme on exprime les unités en "em", c'est relatif à la taille de la police de l'élément et donc il faut faire des divisions. Pour ton cas, j'ai l'impression qu'il va falloir revoir la taille des marges pour les éléments "ul" et "li".

                L'association LinuxFr ne saurait être tenue responsable des propos légalement repréhensibles ou faisant allusion à l'évêque de Rome, au chef de l'Église catholique romaine ou au chef temporel de l'État du Vatican et se trouvant dans ce commentaire

                • [^] # Re: Ca n'existe pas

                  Posté par  (site web personnel) . Évalué à 1.

                  Je pensais avoir répondu, mais je m'aperçois que non…
                  Configurer ul et ol a bien permis d'aligner les listes.

                  ul {
                  margin-top :0em;
                  margin-bottom: 0em;
                  line-height:1.5em;
                          padding: 0em;
                  }
                  
                  

                  Pour l'instant l'appli utilise webkit-gtk avec webkit1. Quand j'aurai un peu de temps je verrai pour passer sur webkit2 et vérifierai le rendu. Puis également tester clutter webkit.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.