28173 sujets

CSS et mise en forme, CSS3

Bonjour,

J'utilise souvent un élément avec un clear: both pour annuler les float.
Sémantiquement parlant, l'utilisation d' un <hr /> a plus de sens qu'un <span>. Malheureusemnt, IE place des espaces au-dessus et en dessous de la ligne et je n'arrive pas à les supprimer.
Si cela ne tenait qu'à moi, je dirais que cela n'est pas grave car rien n'empêche l'utilisateur d'accéder à l'information.
Par contre, certains de mes collaborateurs ne peuvent pas envisager une différence de rendu d'un navigateur à l'autre...
Bref, si quelqu'un connait le moyen de l'imiter l'espace que prend un <hr />, je serais très heureux qu'il me tuyaute.

Merci
Modifié par Mathieu_vd (17 Aug 2006 - 17:28)
La vraie solution, je crois avoir résolu mon problème de cette façon, est de fixer pour IE le font-size à 0 px. C'est radical et plus de souci sous IE Smiley cligne
a écrit :
Ce document est susceptible de t'intéresser je pense...


Merci ! C'est axactement ce que cherchais.

J'avais cherché sur le forum mais pas sur le blog...

a écrit :
fixer pour IE le font-size à 0 px.


Merci, je vai tester ca tout de suite.
Modifié par Mathieu_vd (16 Aug 2006 - 22:39)
Après un rapide test:

* Avec le margin négatif, la ligne est placée en haut de la zone qu'elle occupe. Par contre, cette espace ne semble pas être modifié.

* Le font-size à 0px n'a eu aucun effet chez moi.

Je laisse donc encore le sujet ouvert poour l'instant...
Modifié par Mathieu_vd (17 Aug 2006 - 12:19)
Voici ce que j'applique en espérant trouver mieux plus tard.

<div style="clear: both; border-bottom: 1px solid #000"><hr style="display: none"/></div>


Je suppose que cette technique est présente dans un des liens donnés par Raphaël dans son article. Je ne les ai malheureusement pas encore lus (je suis à la bourre)
Modifié par Mathieu_vd (17 Aug 2006 - 12:18)
Bonjour Mathieu_vd,

Que veux-tu dire exactement par " annuler les float" ?
- empêcher le flux de se poursuivre à côté d'un flottant et le forcer à se placer plus bas que celui-ci ?
- obliger un conteneur à s'étendre verticalement à ses éléments descendants flottants (auquel cas la propriété overflow est la solution toute indiquée) ?
- autre ?
Bonjour Laurent,

Je parle d'empêcher le flux de se poursuivre à côté d'un flottant et le forcer à se placer plus bas que celui-ci.
Modifié par Mathieu_vd (17 Aug 2006 - 12:18)
Dans ce cas, si la propriété clear ne peut pas être facilement gérée sur un élément existant (titre, paragraphe, etc), et si le <hr> pose un problème de rendu, les <span style="clear:both"></span> n'ont rien de gênant.

L'un des rôles de l'élément <span> est justement de supporter des styles de manière neutre quand au sens et à la structure. Il n'y a pas de réserve à avoir d'un point de vue "sémantique" Smiley cligne
Heu... Un doute affreux me vient tout d'un coup...

Il me semblait que la propriété clear ne pouvait s'appliquer qu'aux éléments blocs.

En tout cas, il me semble avoir tester ce matin un
<span style="clear:both"></span>


Mais le clear sembalit sans effet.

Je vai essayer de trouver le temps de vérifier (mais pas tout de suite...)
Modifié par Mathieu_vd (17 Aug 2006 - 17:33)
J'ai testé ce matin et il semble bien que un span n'a pas d'effet.
<span style="clear:both"></span>


Par contre, avec un div, cela fonctionne.

<div style="clear:both"></div>


Mais ne vaut-il pas meiux utiliser ceci ?
<div style="clear:both"><span></span></div>


Car il me semble que certains navigateurs ignorent parfois un <div> vide.

Laurent Denis a écrit :
L'un des rôles de l'élément <span> est justement de supporter des styles de manière neutre quand au sens et à la structure.


Est-ce également vrai pour un div ?
Modifié par Mathieu_vd (18 Aug 2006 - 10:35)
<bonjour mode="pressé Smiley cligne "

Mathieu_vd a écrit :
J'ai testé ce matin et il semble bien que un span n'a pas d'effet.


Oui, pour utiliser <span>, le mettre en display:block

(le code de mon message n'était qu'un simple exemple générique.)

Mathieu_vd a écrit :

Est-ce également vrai pour un div ?


Oui
Modifié par Laurent Denis (18 Aug 2006 - 10:42)