Saut de ligne
Fermé
phiche
-
24 nov. 2011 à 10:09
Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 - 28 nov. 2011 à 10:52
Mihawk Messages postés 4315 Date d'inscription mercredi 29 mars 2006 Statut Contributeur Dernière intervention 6 janvier 2015 - 28 nov. 2011 à 10:52
A voir également:
- Saut de ligne
- Partage de photos en ligne - Guide
- Site de vente en ligne particulier - Guide
- Aller à la ligne excel - Guide
- Comment supprimer une page sur word avec un saut de page ? - Guide
- Apparaitre hors ligne instagram - Guide
4 réponses
visibility:hidden
Messages postés
249
Date d'inscription
samedi 24 septembre 2011
Statut
Membre
Dernière intervention
24 février 2012
47
24 nov. 2011 à 10:33
24 nov. 2011 à 10:33
Le mieux evidemment pour gérer la mise en forme étant de composer dans ton fichier .css quand même. (espace entre les lignes, espace entre les paragraphes, etc.)
mpmp93
Messages postés
6648
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 339
24 nov. 2011 à 11:35
24 nov. 2011 à 11:35
Bonjour,
Il ne fat pas utiliser <br> pour les sauts de ligne,sauf cas rare...
On utilise <p> comme ceci:
Pour ajuster l'espacement entre ces deux lignes:
p {
margin-top: 0px;
margin-bottom: 4px;
}
C'est tout...
A+
Il ne fat pas utiliser <br> pour les sauts de ligne,sauf cas rare...
On utilise <p> comme ceci:
<p>ma première ligne de texte qui peut être très longue...</p> <p>ma seconde ligne de texte qui peut être également très longue...</p>
Pour ajuster l'espacement entre ces deux lignes:
p {
margin-top: 0px;
margin-bottom: 4px;
}
C'est tout...
A+
Mihawk
Messages postés
4315
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
846
24 nov. 2011 à 13:51
24 nov. 2011 à 13:51
Hello,
Je confirme ce que dit mpmp93 ; cela dit si tu veux vraiment faire ça, il faut aller dans le fichier .css et ajouter du margin-top et margin-bottom (de préférence égaux) pour l'élément <br>.
Je confirme ce que dit mpmp93 ; cela dit si tu veux vraiment faire ça, il faut aller dans le fichier .css et ajouter du margin-top et margin-bottom (de préférence égaux) pour l'élément <br>.
br {margin-top:10px; margin-bottom:10px;}
mpmp93
Messages postés
6648
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 339
24 nov. 2011 à 14:14
24 nov. 2011 à 14:14
re-bonjour,
Non, il ne faut pas toucher à <br>
Il existe deux types d'éléments HTML:
- les éléments dits "encadrants": td /td, p /p, etc...
- les éléments non-encadrants dont br en fait partie. Il n'y a pas de /br par exemple...
On n'utilise la mise en forme des marges que sur les éléments encadrants. <br> étant un élément non encadrant, la redéfinition de marges ne s'y appliquera pas.
A+
Non, il ne faut pas toucher à <br>
Il existe deux types d'éléments HTML:
- les éléments dits "encadrants": td /td, p /p, etc...
- les éléments non-encadrants dont br en fait partie. Il n'y a pas de /br par exemple...
On n'utilise la mise en forme des marges que sur les éléments encadrants. <br> étant un élément non encadrant, la redéfinition de marges ne s'y appliquera pas.
A+
Mihawk
Messages postés
4315
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
846
24 nov. 2011 à 14:16
24 nov. 2011 à 14:16
Ca ne marche pas ou ce n'est pas propre ? Parce que <hr> n'est pas encadrant mais permet aisément d'y appliquer des marges !
mpmp93
Messages postés
6648
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 339
25 nov. 2011 à 09:12
25 nov. 2011 à 09:12
<hr> est un pseudo-bloc....
certains éléments pourtant encadrants, tel <span>...<</span> ne sont pas des éléments "blocs", au contraire de <div>...</div>
<hr> n'est pas encadrant et a pourtant des spécificités de boc.
<br> a également une propriété de bloc comme <hr>, mais ce n'est pas "propre" effectivement de retoucher <br>
Dans ma suggestion de toucher à <p>...</p>, on exploite <p> comme élément encadrant. On définit la marge de séparation des blocs. On conserve ainsi à <br> son intégrité. Exemple:
On reste également dans la logique de construction de textes tels qu'en montage typographique:
article -> sections -> paragraphes -> lignes...
Pour marquer un article: <article>...</article>
pour les sections: <article><section>...</section></article>
pour les paragraphe: ...<p>...</p>...
Les paragraphes contiennent les lignes.
En HTML5 par exemple, on peut présenter un article sur deux, trois ou plus de colonnes:
Un exemple de mise en page sur 3 colonnes (visible sur FF et Chrome)
http://www.marieclaudecanet.com/new/index.php?page=livreDOr
A+
certains éléments pourtant encadrants, tel <span>...<</span> ne sont pas des éléments "blocs", au contraire de <div>...</div>
<hr> n'est pas encadrant et a pourtant des spécificités de boc.
<br> a également une propriété de bloc comme <hr>, mais ce n'est pas "propre" effectivement de retoucher <br>
Dans ma suggestion de toucher à <p>...</p>, on exploite <p> comme élément encadrant. On définit la marge de séparation des blocs. On conserve ainsi à <br> son intégrité. Exemple:
<p>Je suggère:<br/> - la remise en cause des acquis,<br/> - la mise à contribution des plus nantis</p> <p>Cette prise de position radicale déplaira à certains.</p>
On reste également dans la logique de construction de textes tels qu'en montage typographique:
article -> sections -> paragraphes -> lignes...
Pour marquer un article: <article>...</article>
pour les sections: <article><section>...</section></article>
pour les paragraphe: ...<p>...</p>...
Les paragraphes contiennent les lignes.
En HTML5 par exemple, on peut présenter un article sur deux, trois ou plus de colonnes:
article {
display: block;
-moz-column-count: 3; /* présentation sur trois colonnes */
-moz-column-gap: 16px;
-moz-column-rule-color: #B0B0B0;
-moz-column-rule-style: dotted;
-moz-column-rule-width: 1px;
}
article section {
display: table; /* on évite qu'une même section ne soit renvoyée sur la colonne suivante */
}
article section p {
margin-top: 0px;
margin-bottom: 6px;
text-align: justify;
}
Un exemple de mise en page sur 3 colonnes (visible sur FF et Chrome)
http://www.marieclaudecanet.com/new/index.php?page=livreDOr
A+
Mihawk
Messages postés
4315
Date d'inscription
mercredi 29 mars 2006
Statut
Contributeur
Dernière intervention
6 janvier 2015
846
28 nov. 2011 à 09:19
28 nov. 2011 à 09:19
Entièrement d'accord avec ce fonctionnement, mais cela impactera tous les éléments <p>.
Mieux vaut alors ajouter un ID ou une classe afin de n'impacter que celui désiré
Mieux vaut alors ajouter un ID ou une classe afin de n'impacter que celui désiré
mpmp93
Messages postés
6648
Date d'inscription
mercredi 13 avril 2011
Statut
Membre
Dernière intervention
28 septembre 2015
1 339
Modifié par mpmp93 le 28/11/2011 à 10:37
Modifié par mpmp93 le 28/11/2011 à 10:37
Bonjour,
Si on définit p comme ceci:
article section p {
.... }
Ca n'impacte que les <p> qui sont dans la hiérarchie article section. Exemple, si j'ai une autre branche ici:
<footer>
<p>site développé par MetaWeb-Design</p>
</footer>
il ne prendra pas en compte la remise en forme de <p> telle que définie pour <article>..<section>...
J'explique justement tout ça ici:
http://html5.immo-scope.com/index.php?page=html5/miseEnPageSimple
Lire la partie intitulée "Ajout d'un menu dans la partie gauche de l'article" et regardez la mise en application avec l'élément <a>
A+
Si on définit p comme ceci:
article section p {
.... }
Ca n'impacte que les <p> qui sont dans la hiérarchie article section. Exemple, si j'ai une autre branche ici:
<footer>
<p>site développé par MetaWeb-Design</p>
</footer>
il ne prendra pas en compte la remise en forme de <p> telle que définie pour <article>..<section>...
J'explique justement tout ça ici:
http://html5.immo-scope.com/index.php?page=html5/miseEnPageSimple
Lire la partie intitulée "Ajout d'un menu dans la partie gauche de l'article" et regardez la mise en application avec l'élément <a>
A+
