<br style=

Bonsoir et bonjour,
je ne douterais pas que le sujet a été déjà traité, jadis, or je ne retrouve pas le bon fil.

Voici : j'ai cru un instant qu'attribuer un margin-bottom:5px au <br> et <br /> m'apporterait un égal résultat sur tous les nav-web. Or ce n'est pas vrai !

Dont les "screenshots" sur FireFox puis Chromium suivants :


et dont vous pourriez apprécier le résultat effectif sur vos 2 nav ici :
http://sentrais.eu/test-vid/test-vid.htm

Ainsi et malgré mes recherches sur Alsac ou ailleurs, je ne comprends pas ce qui me manquerait d'un hack sur Chromium ...

A vos gardes !

Je reviendrai surement plus tard pour traiter d'un font-size improbable sur Androïd lors d'un link.
Modifié par pictural (16 Nov 2016 - 03:04)

Bonjour,

si le sujet a été traité, c'était... ah ben merci duckduckgo, tu trouveras difficilement mieux que Elément html <br/> pour ce qui est de l'usage de cet élément vu les intervenants au sujet. Plus récent ou plus CSS par contre ça doit se trouver...

La manière dont tu t'en sers me semble être à des fins de présentation puisqu'il n'y a pas de texte après l'élément br, ce qui invalide à mon avis le critère d'accessibilité.

J'avais testé au printemps quelques propriétés CSS et de mémoire, IE et/ou Edge les ignore et ce n'est pas du tout uniforme entre Fx, Chr et IE. Le but de cet élément autofermant est de provoquer un retour à la ligne (en tenant compte du sens de lecture) et ça c'est respecté
Ce qui fonctionne bien et que j'ai utilisé à la place de césure, pour forcer un retour à la ligne de texte un peu long dans certaines résolutions - et avoir une 2e ligne plus longue que la 1ère - c'est br { display: none; } (dans une Media Query)

Dans ton cas, si tu veux une marge sous tous les items de liste sauf le dernier, tu peux les cibler ainsi (compatibilité IE9+) :

li:not(:last-child) {
  margin-bottom: 5px;
}

Pour éviter de tatonner, l'ordre est le suivant : fixer la taille de texte, l'interlignage, marges et padding sur li puis enfin ul (et pas l'interlignage après les marges sinon on peut recommencer )
Modifié par Felipe (16 Nov 2016 - 04:20)

Merci Felipe pour
li:not(:last-child) {
margin-bottom: 5px;
}

Mais bon bon bon ! je ne trouve pas vraiment mon bonheur.

Quoi qu'un tel sujet soit rédhibitoire et accessoirement futile, j'aime parfois m'y consacrer : comment créer un hack simplissime et lumineux (qui soit cross-browser) ?

Ainsi par javascript je postulerais :
1. si le code d'une page contenait <br>
2. alors on y associerait un margin-bottom:5px qui s'applique alors sur la ligne suivante (similaire à un <span style="display:inline-block;position:relative;margin-bottom:5px">_</span>)
3. on retournerait ensuite la modification qui soit cross-browser

Quelqu'un aurait-il une idée de script qui simplifiera toute écriture ?

J'ai bien une piste de réflexion, à mener en ellipse :
http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_br_create

Puis il y aurait bien ceci :

var br = document.getElementsByTagName('br');

for (var i = 0, c = br.length ; i < c ; i++)
{
br.style.marginBottom='5px'
}

mais je doute d'y apporter la bonne solution par le fait de manipuler le DOM de cette façon ...

Cela dit, je pressens "pugnacement" qu'existe une solution, et que celle-ci soit inédite.

Or je devine qu'un génie français va nous éclairer : -"Hé hé" !
Modifié par pictural (17 Nov 2016 - 21:51)