pouvez-vous me dire pourquoi il faut que je place mes deux images dans
un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des
images ?
http://gp1.free.fr/marchepas/
J'ai testé plusieurs solutions pour éviter ce div que, de toutes façons,
je vais mettre ; mais comme cet espace existe sous tous les navigateurs,
ça doit être un truc ultra classique de CSS que j'ignore.
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
Thibaut Allender
On 7/08/2006 12:53, Olivier Masson wrote :
pouvez-vous me dire pourquoi il faut que je place mes deux images dans un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des images ?
img.entete { float: left; }
le "bug" vient en fait du display: inline par défaut des images on peut les passer en display: block; pour éviter ça, mais alors elle ne se mettent plus les unes à côté des autres, mais les unes en dessous des autres, le float résoud ça.
on peut aussi le corriger en mettant un line-height: 0 dans l'élément contenant les images, si on ne veut pas passer par du float, mais c'est moins "propre", à mon sens.
pouvez-vous me dire pourquoi il faut que je place mes deux images dans
un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des
images ?
img.entete {
float: left;
}
le "bug" vient en fait du display: inline par défaut des images
on peut les passer en display: block; pour éviter ça, mais alors elle ne
se mettent plus les unes à côté des autres, mais les unes en dessous des
autres, le float résoud ça.
on peut aussi le corriger en mettant un line-height: 0 dans l'élément
contenant les images, si on ne veut pas passer par du float, mais c'est
moins "propre", à mon sens.
pouvez-vous me dire pourquoi il faut que je place mes deux images dans un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des images ?
img.entete { float: left; }
le "bug" vient en fait du display: inline par défaut des images on peut les passer en display: block; pour éviter ça, mais alors elle ne se mettent plus les unes à côté des autres, mais les unes en dessous des autres, le float résoud ça.
on peut aussi le corriger en mettant un line-height: 0 dans l'élément contenant les images, si on ne veut pas passer par du float, mais c'est moins "propre", à mon sens.
pouvez-vous me dire pourquoi il faut que je place mes deux images dans un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des images ?
img.entete { float: left; }
le "bug" vient en fait du display: inline par défaut des images on peut les passer en display: block; pour éviter ça, mais alors elle ne se mettent plus les unes à côté des autres, mais les unes en dessous des autres, le float résoud ça.
on peut aussi le corriger en mettant un line-height: 0 dans l'élément contenant les images, si on ne veut pas passer par du float, mais c'est moins "propre", à mon sens.
un vertical-align:bottom; serait bien plus simple à mon avis, l'utilisation d'un float ça veut dire aussi jouer après avec les clear pour rétablir le flux et donner une hauteur au div, donc plus difficile à gérer.
Pascal
Le 07/08/2006 19:25, Thibaut Allender a ecrit :
On 7/08/2006 12:53, Olivier Masson wrote :
pouvez-vous me dire pourquoi il faut que je place mes deux images dans
un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des
images ?
img.entete {
float: left;
}
le "bug" vient en fait du display: inline par défaut des images
on peut les passer en display: block; pour éviter ça, mais alors elle ne
se mettent plus les unes à côté des autres, mais les unes en dessous des
autres, le float résoud ça.
on peut aussi le corriger en mettant un line-height: 0 dans l'élément
contenant les images, si on ne veut pas passer par du float, mais c'est
moins "propre", à mon sens.
un vertical-align:bottom; serait bien plus simple à mon avis,
l'utilisation d'un float ça veut dire aussi jouer après avec les clear
pour rétablir le flux et donner une hauteur au div, donc plus difficile
à gérer.
pouvez-vous me dire pourquoi il faut que je place mes deux images dans un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des images ?
img.entete { float: left; }
le "bug" vient en fait du display: inline par défaut des images on peut les passer en display: block; pour éviter ça, mais alors elle ne se mettent plus les unes à côté des autres, mais les unes en dessous des autres, le float résoud ça.
on peut aussi le corriger en mettant un line-height: 0 dans l'élément contenant les images, si on ne veut pas passer par du float, mais c'est moins "propre", à mon sens.
un vertical-align:bottom; serait bien plus simple à mon avis, l'utilisation d'un float ça veut dire aussi jouer après avec les clear pour rétablir le flux et donner une hauteur au div, donc plus difficile à gérer.
Pascal
Olivier Masson
Thibaut Allender a écrit :
On 7/08/2006 12:53, Olivier Masson wrote :
pouvez-vous me dire pourquoi il faut que je place mes deux images dans un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des images ?
img.entete { float: left; }
le "bug" vient en fait du display: inline par défaut des images on peut les passer en display: block; pour éviter ça, mais alors elle ne se mettent plus les unes à côté des autres, mais les unes en dessous des autres, le float résoud ça.
Oui, ça ok mais est-ce qu'un float n'indique pas que je souhaite mon image 1 à gauche de mon image 2 *et à la ligne s'il n'y a pas assez de place* ? Or, en aucun cas je ne souhaite l'image 2 en-dessous. Tu me diras, comme je spécifie une largeur fixe, ça n'arrivera pas ; mais n'est-ce pas comme utilisé une <table> où elle n'a pas lieu d'être ?
on peut aussi le corriger en mettant un line-height: 0 dans l'élément contenant les images, si on ne veut pas passer par du float, mais c'est moins "propre", à mon sens.
Mais la question que je me posais - et que j'ai rencontrée dans d'autres situations - c'est : pourquoi y'a-t-il cette marge en-dessous ? Est-ce que cela est censé être normal (dans le sens 'dans la norme ', pas 'c'est logique') ?
Thibaut Allender a écrit :
On 7/08/2006 12:53, Olivier Masson wrote :
pouvez-vous me dire pourquoi il faut que je place mes deux images dans
un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des
images ?
img.entete {
float: left;
}
le "bug" vient en fait du display: inline par défaut des images
on peut les passer en display: block; pour éviter ça, mais alors elle ne
se mettent plus les unes à côté des autres, mais les unes en dessous des
autres, le float résoud ça.
Oui, ça ok mais est-ce qu'un float n'indique pas que je souhaite mon
image 1 à gauche de mon image 2 *et à la ligne s'il n'y a pas assez de
place* ? Or, en aucun cas je ne souhaite l'image 2 en-dessous.
Tu me diras, comme je spécifie une largeur fixe, ça n'arrivera pas ;
mais n'est-ce pas comme utilisé une <table> où elle n'a pas lieu d'être ?
on peut aussi le corriger en mettant un line-height: 0 dans l'élément
contenant les images, si on ne veut pas passer par du float, mais c'est
moins "propre", à mon sens.
Mais la question que je me posais - et que j'ai rencontrée dans d'autres
situations - c'est : pourquoi y'a-t-il cette marge en-dessous ? Est-ce
que cela est censé être normal (dans le sens 'dans la norme ', pas
'c'est logique') ?
pouvez-vous me dire pourquoi il faut que je place mes deux images dans un div à hauteur fixe pour pouvoir supprimer la marge en-dessous des images ?
img.entete { float: left; }
le "bug" vient en fait du display: inline par défaut des images on peut les passer en display: block; pour éviter ça, mais alors elle ne se mettent plus les unes à côté des autres, mais les unes en dessous des autres, le float résoud ça.
Oui, ça ok mais est-ce qu'un float n'indique pas que je souhaite mon image 1 à gauche de mon image 2 *et à la ligne s'il n'y a pas assez de place* ? Or, en aucun cas je ne souhaite l'image 2 en-dessous. Tu me diras, comme je spécifie une largeur fixe, ça n'arrivera pas ; mais n'est-ce pas comme utilisé une <table> où elle n'a pas lieu d'être ?
on peut aussi le corriger en mettant un line-height: 0 dans l'élément contenant les images, si on ne veut pas passer par du float, mais c'est moins "propre", à mon sens.
Mais la question que je me posais - et que j'ai rencontrée dans d'autres situations - c'est : pourquoi y'a-t-il cette marge en-dessous ? Est-ce que cela est censé être normal (dans le sens 'dans la norme ', pas 'c'est logique') ?
Olivier Masson
a écrit :
un vertical-align:bottom; serait bien plus simple à mon avis, l'utilisation d'un float ça veut dire aussi jouer après avec les clear pour rétablir le flux et donner une hauteur au div, donc plus difficile à gérer.
Il faut effectivement ajouter un petit clear: left sur le div suivant, mais ce n'est pas ce qui me gêne le plus. C'est davantage l'utilisation du float où il n'est pas attendu qui m'ennuie.
Pour le vertical-align, je ne l'utilise quasiment jamais car je n'arrive jamais à obtenir le résultat souhaité sur tous les navigateurs.
Dans le cas présenté, tu as raison, ça marche parfaitement mais... pourquoi ? Que ça aligne en bas, ok, mais pourquoi cette marge disparait ?
pascal.chevrel@free.fr a écrit :
un vertical-align:bottom; serait bien plus simple à mon avis,
l'utilisation d'un float ça veut dire aussi jouer après avec les clear
pour rétablir le flux et donner une hauteur au div, donc plus difficile
à gérer.
Il faut effectivement ajouter un petit clear: left sur le div suivant,
mais ce n'est pas ce qui me gêne le plus. C'est davantage l'utilisation
du float où il n'est pas attendu qui m'ennuie.
Pour le vertical-align, je ne l'utilise quasiment jamais car je n'arrive
jamais à obtenir le résultat souhaité sur tous les navigateurs.
Dans le cas présenté, tu as raison, ça marche parfaitement mais...
pourquoi ? Que ça aligne en bas, ok, mais pourquoi cette marge disparait ?
un vertical-align:bottom; serait bien plus simple à mon avis, l'utilisation d'un float ça veut dire aussi jouer après avec les clear pour rétablir le flux et donner une hauteur au div, donc plus difficile à gérer.
Il faut effectivement ajouter un petit clear: left sur le div suivant, mais ce n'est pas ce qui me gêne le plus. C'est davantage l'utilisation du float où il n'est pas attendu qui m'ennuie.
Pour le vertical-align, je ne l'utilise quasiment jamais car je n'arrive jamais à obtenir le résultat souhaité sur tous les navigateurs.
Dans le cas présenté, tu as raison, ça marche parfaitement mais... pourquoi ? Que ça aligne en bas, ok, mais pourquoi cette marge disparait ?
pascal.chevrel
Le 08/08/2006 09:41, Olivier Masson a ecrit :
a écrit :
un vertical-align:bottom; serait bien plus simple à mon avis, l'utilisation d'un float ça veut dire aussi jouer après avec les clear pour rétablir le flux et donner une hauteur au div, donc plus difficile à gérer.
Il faut effectivement ajouter un petit clear: left sur le div suivant, mais ce n'est pas ce qui me gêne le plus. C'est davantage l'utilisation du float où il n'est pas attendu qui m'ennuie.
Pour le vertical-align, je ne l'utilise quasiment jamais car je n'arrive jamais à obtenir le résultat souhaité sur tous les navigateurs.
Dans le cas présenté, tu as raison, ça marche parfaitement mais... pourquoi ? Que ça aligne en bas, ok, mais pourquoi cette marge disparait ?
Parce que les images sont du type inline, comme le texte. Elles ont donc une hauteur de ligne et par défaut l'alignement se fait sur 'baseline', la ligne de base (celle qui servait de référence sur nos cahiers d'écolier quand on apprenait à dessiner les lettres).
L'espace blanc correspond à la place prise par le bas des lettres qui dépassent en desous de la ligne de base (pqjgç)
pascal
Le 08/08/2006 09:41, Olivier Masson a ecrit :
pascal.chevrel@free.fr a écrit :
un vertical-align:bottom; serait bien plus simple à mon avis,
l'utilisation d'un float ça veut dire aussi jouer après avec les clear
pour rétablir le flux et donner une hauteur au div, donc plus
difficile à gérer.
Il faut effectivement ajouter un petit clear: left sur le div suivant,
mais ce n'est pas ce qui me gêne le plus. C'est davantage l'utilisation
du float où il n'est pas attendu qui m'ennuie.
Pour le vertical-align, je ne l'utilise quasiment jamais car je n'arrive
jamais à obtenir le résultat souhaité sur tous les navigateurs.
Dans le cas présenté, tu as raison, ça marche parfaitement mais...
pourquoi ? Que ça aligne en bas, ok, mais pourquoi cette marge disparait ?
Parce que les images sont du type inline, comme le texte. Elles ont donc
une hauteur de ligne et par défaut l'alignement se fait sur 'baseline',
la ligne de base (celle qui servait de référence sur nos cahiers
d'écolier quand on apprenait à dessiner les lettres).
L'espace blanc correspond à la place prise par le bas des lettres qui
dépassent en desous de la ligne de base (pqjgç)
un vertical-align:bottom; serait bien plus simple à mon avis, l'utilisation d'un float ça veut dire aussi jouer après avec les clear pour rétablir le flux et donner une hauteur au div, donc plus difficile à gérer.
Il faut effectivement ajouter un petit clear: left sur le div suivant, mais ce n'est pas ce qui me gêne le plus. C'est davantage l'utilisation du float où il n'est pas attendu qui m'ennuie.
Pour le vertical-align, je ne l'utilise quasiment jamais car je n'arrive jamais à obtenir le résultat souhaité sur tous les navigateurs.
Dans le cas présenté, tu as raison, ça marche parfaitement mais... pourquoi ? Que ça aligne en bas, ok, mais pourquoi cette marge disparait ?
Parce que les images sont du type inline, comme le texte. Elles ont donc une hauteur de ligne et par défaut l'alignement se fait sur 'baseline', la ligne de base (celle qui servait de référence sur nos cahiers d'écolier quand on apprenait à dessiner les lettres).
L'espace blanc correspond à la place prise par le bas des lettres qui dépassent en desous de la ligne de base (pqjgç)
pascal
Olivier Masson
a écrit :
Parce que les images sont du type inline, comme le texte. Elles ont donc une hauteur de ligne et par défaut l'alignement se fait sur 'baseline', la ligne de base (celle qui servait de référence sur nos cahiers d'écolier quand on apprenait à dessiner les lettres).
L'espace blanc correspond à la place prise par le bas des lettres qui dépassent en desous de la ligne de base (pqjgç)
Parfaite explication, merci beaucoup.
pascal.chevrel@free.fr a écrit :
Parce que les images sont du type inline, comme le texte. Elles ont donc
une hauteur de ligne et par défaut l'alignement se fait sur 'baseline',
la ligne de base (celle qui servait de référence sur nos cahiers
d'écolier quand on apprenait à dessiner les lettres).
L'espace blanc correspond à la place prise par le bas des lettres qui
dépassent en desous de la ligne de base (pqjgç)
Parce que les images sont du type inline, comme le texte. Elles ont donc une hauteur de ligne et par défaut l'alignement se fait sur 'baseline', la ligne de base (celle qui servait de référence sur nos cahiers d'écolier quand on apprenait à dessiner les lettres).
L'espace blanc correspond à la place prise par le bas des lettres qui dépassent en desous de la ligne de base (pqjgç)
