<hr /> et flottants

[Striker]

Bonjour,

J'ai un problème d'affichage sous FireFox lorsque je met la balise <hr /> apres du texte dans le flux et un flottant.

Exemple

<div id="gamme">
<div id="vignette-gamme"><img src="mon_image.gif" alt="vignette" /></div>
<h2>Titre</h2>
<p>blabla blabla</p>
<p>bla bla</p>
<hr />
</div>

J'ai un espace énorme avant la barre du <hr /> qui correspond visuellement à environs une dizaines de lignes.

Sous IE par contre je n'ai aucun problème. Pas tester avec d'autres navigateurs pour le moment.

Je vous donne le CSS

hr {
	clear: both;
	visibility: hidden;
}

#vignette-gamme {
	float: right;
	margin: 2em 0 0 5px;
	padding: 0;
}

#gamme h2 {
	border-bottom: 2px solid #003366;
	color: #003366;
	font-size: large;
	background-color: transparent;
	padding: 0 0 0.2em 0;
	margin: 1em 190px 0 0;
}

Je ne comprend pas trop d'où ca vient

Merci de votre aide.

[lupucide]

Ajoute ou retire du margin et/ou padding à ton <hr />.

Modifié 25 Avril 2005 par lupucide

[Striker]

Je vient de tester et hélas le padding: 0; et margin: 0; n'ont rien changer

De plus je ne comprend pas trop pourquoi cela ne se fait pas à tous les <hr />

par exemple j'ai ceci

<div id="gamme">
<div class="vignette-gamme"><img src="mon_image.gif" alt="vignette" /></div>
<h2>Titre</h2>
<p>blabla blabla</p>
<p>bla bla</p>
<hr />
<div class="vignette-gamme"><img src="mon_image.gif" alt="vignette" /></div>
<h2>Titre</h2>
<p>blabla blabla</p>
<p>bla bla</p>
<hr />
<div class="vignette-gamme"><img src="mon_image.gif" alt="vignette" /></div>
<h2>Titre</h2>
<p>blabla blabla</p>
<p>bla bla</p>
<hr />
</div>

Le décalage je ne l'ai que entre le premier <hr /> et le second <div>

J'ai bien regarder ma feuille de style en entier et je n'ai rien qui vient affecter le comportement du <hr /> ou autre balise dans ce cas précis.

Je comprend vraiment pas là...

[lupucide]

Tente de modifier l'épaisseur du <hr /> avec border.

Si ça ne fonctionne pas je testerais, ça m'intrigue

<edit>

Si ça peut aider : http://www.nanoum.net/blog/4_apparence_hr.html

</edit>

Modifié 26 Avril 2005 par lupucide

[Striker]

Voici le CSS du <hr />

hr {
clear: both;
visibility: hidden;
margin: 0;
padding: 0;
height: 1px;
border: 0;
}

Et malgré tout j'ai toujours se décalage d'une dizaine de lignes.

Il semble bien que cela vienne du <hr /> puisque lorsque je le supprime le décalage disparait.

Merci lupicide pour ton lien et ton aide.

Modifié 26 Avril 2005 par Striker

[Dan]

Je viens de tester ton code chez moi sous I.E. et Firefox et n'ai pas cette anomalie d'affichage.

Quelle version de Firefox as-tu ?

[Striker]

Ma version de Firefox est 1.0.3

Si tu n'a pas cette anomalie c'est que ca vient de ma feuille de style... pourtant je l'ai regarder deux fois avant de venir vous demander de l'aide...

Bon ba ca veut surement dire que j'ai mal vérifier...

[Dan]

Disons que j'ai fait un copier/coller des éléments que tu as donnés dans ton post. J'ai simplement remplacé l'image par une que j'avais localement, sans rien changer d'autre.

Si ta feuiile de style a d'autres éléments, il est possible que l'un d'eux interfère dans la présentation de ta page. Mais il ne s'agit pas des éléments que tu nous a donnés.

J'utilise la même version de Firefox que toi

Dan

[Striker]

J'ai penser comme toi au départ, puis apres avoir vérif ma feuille de style 2 fois je me suis dit que la cause était autre...

Si ta feuiile de style a d'autres éléments, il est possible que l'un d'eux interfère dans la présentation de ta page. Mais il ne s'agit pas des éléments que tu nous a donnés.

C'est bien ca, je ne vous ai donner que les éléments CSS en rapport avec mon problème.

Bon vais m'acheter des lunettes et je vois tien au courant sur la boulette que j'ai faite

Merci de votre aide et mes escuses pour avoir pris de votre temps "pour rien"

Modifié 26 Avril 2005 par Striker

[Striker]

J'ai trouver

Ca n'a aucun rapport avec ma feuille CSS mais plutôt en rapport avec la structure du site.

Je m'explique. Mon site est composer de 3 colonnes, une à gauche en mode flottante, une au centre qui reste dans le flux et une à droite en position absolue.

Le souci est que le <hr /> se positionne automatiquement en fin de colonne gauche puisque celle ci est flottante.

A ce niveau là je me demande un peu comment faire. Soit je passe ma colonne de gauche en position absolue mais cela risque de poser problème avec mon fond uniforme qui est maintenu par un footer de type clear: both ...

Vous avez peut être une solution à ce problème

[lupucide]

Euh... j'ai pas trop compris le problème là

Tu voudrais que ton <hr /> ne soit pas stoppé par ton menu gauche en float ?

[Striker]

C'est vrais que je suis pas clair du tout

En fait mon menu de gauche en float fait que le <hr /> se colle directement au même niveau que la dernière ligne du menu. Ce qui donne un décallage énorme entre deux éléments séparer par un <hr />.

Je voit pas trop comment expliquer mieu mon problème...

Nouvelle explication :

Dans ma colonne centrale j'ai mon premier

<div class="vignette-gamme"><img src="mon_image.gif" alt="vignette" /></div>
<h2>Titre</h2>
<p>blabla blabla</p>
<p>bla bla</p>
<hr />

Qui fait 6 lignes.

Le problème est que mon menu de gauche fait 30 lignes donc le <hr /> se positionne directement à la ligne 30 ce qui provoque cet énorme décalage.

Je sait pas si j'ai été plus clair...

[Hells_Dark]

Personnellement, j'ai trouvé ça clair mais c'est étonnant..ton

<hr/>

n'est pas dans le menu de gauche si ? Peut-être qu'il prend 100% de la largeur et donc qu'il prend en compte le menu de gauche.. Alors peut-être qu'en lui donnant une taille restreinte..

Ou je suppose que le <hr> dispose d'un

clear : both;

met juste

clear : right;

ou supprime le tout court...

Modifié 26 Avril 2005 par Monique

[lupucide]

Hells_Dark => C'est trois sites maximum en signature il me semble, même s'ils ne sont pas à toi.

[Hells_Dark]

Autant pour moi..une règle étrange..Je comprend qu'il ne faille pas mettre de signature trop longue mais j'ai mis une police petite.

Bon, si c'est la règle, zou.

[spainter]

La .. moi je debute alors difficile pour moi de trouver une soluce juste en regardant trois bouts de code ..

mais si cela peut t'aider je te donne le code de mon Hr qui fonctionne sur

monsite sur 1, 2 ou 3 colonnes sous IE et firefox ..

hr {
height: 1px;
width: 98%;
margin: 4px 3px 4px 3px;
padding: 0;
color: #FF9933;
background-color: #FF9933;
border: 0;
}

[Hells_Dark]

Je vous donne le CSS

hr {
	clear: both;
	visibility: hidden;
}

#vignette-gamme {
	float: right;
	margin: 2em 0 0 5px;
	padding: 0;
}

#gamme h2 {
	border-bottom: 2px solid #003366;
	color: #003366;
	font-size: large;
	background-color: transparent;
	padding: 0 0 0.2em 0;
	margin: 1em 190px 0 0;
}

Ca c'est celui qui cause probleme non ?

Essaie de donner une largeur au hr..genre 20px

Ou encore essaie de mettre

clear : right ; au lieu de clear both; ..

[Striker]

héhéhéhé

avec clear: right ca passe impecable

Merci beaucoup de votre aide

Vous êtes des chef

[Hells_Dark]

Content de pouvoir aider parfois