28173 sujets
CSS et mise en forme, CSS3
Firefox n'affiche pas un div vide apparement.
Voila donc ma solution pour simuler une ligne de séparation.
Avec cette structure tout est possible et les marges restent enfin sous control.
Suffit de rajouter un <hr> dedans et de le cacher dans le css.
Modifié par Grumelo (26 Jul 2007 - 15:54)
Voila donc ma solution pour simuler une ligne de séparation.
Avec cette structure tout est possible et les marges restent enfin sous control.
<div style="clear:both;float:none;background-color:yellow;margin:0;padding:6px 0 6px 0;text-align:center;"><div style="width:80%;height:1px;overflow:hidden;padding:0;margin:0 auto 0 auto;border-top:1px dashed black"></div></div>
Suffit de rajouter un <hr> dedans et de le cacher dans le css.
Modifié par Grumelo (26 Jul 2007 - 15:54)
Le problème de customization des HR est connu.
Un moyen simple de le résoudre est de l'encapsuler dans un <div> qui lui est customisé alors que le <hr> est caché.
Mais si on veut créer une ligne de séparation sans utiliser une image avec une marge en haut et en bas de X pixels il faut ajouter un autre <div> qui servira grâce à sa bordure à créer la ligne (en pointillé par exemple) de séparation.
On a donc
Modifié par Grumelo (26 Jul 2007 - 17:15)
Un moyen simple de le résoudre est de l'encapsuler dans un <div> qui lui est customisé alors que le <hr> est caché.
Mais si on veut créer une ligne de séparation sans utiliser une image avec une marge en haut et en bas de X pixels il faut ajouter un autre <div> qui servira grâce à sa bordure à créer la ligne (en pointillé par exemple) de séparation.
On a donc
<div class="hr"><div></div><hr></div>Modifié par Grumelo (26 Jul 2007 - 17:15)
Je ne vois pas trop quelle est l'obligation d'avoir un deuxième div. Moi je ferais juste ceci:
Testé à l'instant avec une tripotée de navigateurs (dont IE Win 5.0 à 7), et ça marche bien.
[b]HTML:[/b]
<div class="hr"><hr /></div>
[b]CSS:[/b]
div.hr hr {display: none;}
div.hr {
height: 0px;
border-top: solid 1px red;
margin: 1em 0;
}Testé à l'instant avec une tripotée de navigateurs (dont IE Win 5.0 à 7), et ça marche bien.
Bon ok j'ai réfléchi, il suffit de définir une margin left et right de 10% par exemple. On a donc pas besoin de la propriété text-align.
MAIS
Si tu défini la hauteur de ton div avec margin tu as un problème si tu colles deux "separateur" ensemble.
Les marges vont se superposées. Et donc au lieu d'avoir un espace de 26px tu n'auras que 20.
Y a-t-il un moyen de désactivé cet overlay des marges ?
MAIS
Si tu défini la hauteur de ton div avec margin tu as un problème si tu colles deux "separateur" ensemble.
Les marges vont se superposées. Et donc au lieu d'avoir un espace de 26px tu n'auras que 20.
Y a-t-il un moyen de désactivé cet overlay des marges ?
Grumelo a écrit :
tu as un problème si tu colles deux "separateur" ensemble
Il ne m'était même pas venu à l'idée de mettre deux séparateurs directement l'un après l'autre. En termes de design, je trouve ça assez limite.
Grumelo a écrit :
Les marges vont se superposées.
Plus exactement: elles vont fusionner. On parle de fusion des marges (collapsing margins).
Si tu veux mettre deux séparateurs à la suite et que l'espace entre les séparateurs soit plus grand que l'espace entre un séparateur et le texte qui le suit ou le précède... le plus simple est de faire deux classes de séparateurs, et de donner un margin-top plus important à la seconde, par exemple. Ou encore d'exploiter les propriétés avancées de CSS 2.1, et notamment:
[b]HTML:[/b]
<div class="hr"><hr /></div>
<div class="hr"><hr /></div>
[b]CSS:[/b]
div.hr hr {display: none;}
div.hr {
height: 0px;
border-top: solid 1px red;
margin: 1em 0;
}
div.hr + div.hr {
margin-top: 2em;
}Compatible tous navigateurs moderne (dont IE7 mais pas IE6).
Ma page de test:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
div.hr hr {display: none;}
div.hr {
height: 0px;
border-top: solid 1px red;
margin: 1em 0;
}
div.hr + div.hr {
margin-top: 3em;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
<div class="hr"><hr /></div>
<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
<div class="hr"><hr /></div>
<div class="hr"><hr /></div>
<p>Aliquam convallis sollicitudin purus. Praesent aliquam, enim at fermentum mollis, ligula massa adipiscing nisl, ac euismod nibh nisl eu lectus.</p>
</body>
</html>Je suis tout a fait d'accord. Deux separateurs l'un après l'autre ça n'a pas vraiment de sens.
En fait ce que je voualais dire c'est que soiton séparateur est coincé entre deux blocs qui ont eux aussi des marges, la fusion va poser problème.
Dans ton exemple si tu changes le css avec ça:
c'est flagrant.
PS : le + dans le CSS c'est pas compatible avec IE il me semble, right ?
Modifié par Grumelo (27 Jul 2007 - 13:59)
En fait ce que je voualais dire c'est que soiton séparateur est coincé entre deux blocs qui ont eux aussi des marges, la fusion va poser problème.
Dans ton exemple si tu changes le css avec ça:
div.hr hr {display: none;}
div.hr {
height: 0px;
border-top: solid 1px red;
margin:0.5em 0;
}
div.hr + div.hr {
margin-top: 3em;
}
p {background-color:yellow;margin-bottom:5px;}
body {background-color:pink}c'est flagrant.
PS : le + dans le CSS c'est pas compatible avec IE il me semble, right ?
Modifié par Grumelo (27 Jul 2007 - 13:59)
Grumelo a écrit :
Dans ton exemple si tu changes le css avec ça (...) c'est flagrant.
Euh... je sais pas, ça démontre quoi? Que si tu changes tes marges, tu obtiens les marges demandées? Ben oui, ça c'est assez logique.
Plus globalement, la fusion des marges est un procédé très pratique pour obtenir des marges harmonieuses entre les éléments. Contrairement aux logiciels de traitement de texte qui additionnent les marges, ici on ne garde que la plus grande des deux marges. Concrètement, cela signifie que pour chaque élément on peut spécifier l'écart minimum entre lui et le contenu qui le précède et entre lui et le contenu qui le suit.
Maintenant, si tu veux que ton séparateur soit presque collé aux paragraphes malgré les marges des paragraphes, il faut:
- soit modifier le style des paragraphes adjacents;
- soit utiliser des marges négatives.
Grumelo a écrit :
PS : le + dans le CSS c'est pas compatible avec IE il me semble, right ?
J'avais indiqué la compatibilité dans mon message. Ça marche avec IE7, mais pas avec le vieux et poussif IE6.
Hop, encore un exemple, avec cette fois des marges différentes entre les paragraphes et les séparateurs:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css">
body {width: 500px; margin: 1em auto;}
h1 {font-size: 1.5em; margin: 1em 0 .5em 0;}
p {margin: .8em 0;}
div.hr hr {display: none;}
div.hr {
height: 0px;
border-top: solid 1px red;
}
div.un {
margin: -.3em 0;
}
div.deux {
margin: 2em 0;
}
</style>
</head>
<body>
<h1>Test 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
<div class="hr un"><hr /></div>
<p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim.</p>
<p>Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</p>
<div class="hr un"><hr /></div>
<p>Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin.</p>
<p>Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis.</p>
<h1>Test 2</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor.</p>
<p>Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi. Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim.</p>
<div class="hr deux"><hr /></div>
<p>Pellentesque congue. Ut in risus volutpat libero pharetra tempor. Cras vestibulum bibendum augue. Praesent egestas leo in pede. Praesent blandit odio eu enim.</p>
<p>Pellentesque sed dui ut augue blandit sodales. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aliquam nibh.</p>
<div class="hr deux"><hr /></div>
<p>Mauris ac mauris sed pede pellentesque fermentum. Maecenas adipiscing ante non diam sodales hendrerit. Ut velit mauris, egestas sed, gravida nec, ornare ut, mi. Aenean ut orci vel massa suscipit pulvinar. Nulla sollicitudin.</p>
<p>Fusce varius, ligula non tempus aliquam, nunc turpis ullamcorper nibh, in tempus sapien eros vitae ligula. Pellentesque rhoncus nunc et augue. Integer id felis.</p>
</body>
</html>Grumelo a écrit :
Mais si tu ne veux pas de fusion. Comment tu fais ?
Si tu veux un separateur de 13px de haut avec un trait au milieu qui ne fusionne jamais avec ce qui l'entoure, comment tu fais ?
Ben déjà ça ne me viendrait pas à l'idée de vouloir un séparateur de 13px de haut (marges comprises) dont les marges ne fusionneraient pas avec le reste. L'utilité de la manoeuvre ne m'apparait pas clairement...
Si je veux 18px d'écart entre mon paragraphe et mon séparateur, et que je sais que mes paragraphes ont des marges de 12px... ben je demande une marge de 18px pour le séparateur, tout simplement.
Mais bon. Pour éviter la fusion des marges... déjà il faut se documenter un peu:
http://www.w3.org/TR/CSS21/box.html#collapsing-margins
Théoriquement, ça peut par exemple se faire avec un bloc flottant (le séparateur, en float: left et width: 100%, par exemple), mais ça va être difficilement gérable. Enfin, disons que pour la marge du haut ça marche très bien, mais pour la marge du bas c'est moins évident.
C'est aussi sensé être le cas avec la propriété overflow: hidden|auto, mais mes tests n'ont rien donné.
De même, une solution intéressante serait d'utiliser display: inline-block (avec une largeur de 100%), et ça marche même très bien... avec Opera, Safari et Konqueror. inline-block n'est pas compris par Firefox, et mal compris par IE. Donc ça n'est pas utilisable avec ces deux navigateurs...
La solution de secours que je vois consiste donc à faire ceci:
div.hr hr {display: none;}
div.hr {
height: 1px;
margin: 0;
padding: 6px;
background: url(trait-1px.png) repeat-x left center;
}