Titre <h3> ne s'arrête pas avant un <div> float:right

Bonjour,
J'ai un souci sur cette page de mon site. Le titre <h3> "Comment tout a commencé" ne s'arrête pas avant le <div> formulaire (il passe derrière).
Testé avec Firefox et IE.

Voici les css :
Titre :

#centre h3 {
	margin-right: 20px;
	margin-left: 10px;
	padding-left: 10px;
	border-top: groove #fff 1px;
	border-bottom: groove #fff 2px;
	background-color: #ebe0e0;
	color: #666666;
	font-size: 1.2em;
}

Sommaire :

#sommaire {
	padding:0 ;
	margin: 10px;
	float: right;
	text-align: center;
	border: groove #fff 2px;
	background-image: url(images/jojaba1/menu_g.png);
	background-repeat: repeat-y;
	background-color: #FFFCDF;
	
}

Merci pour votre aide

C'est le comportement normal d'un élément flottant. En gros, un élément flottant "flotte" (ça alors) par dessus les blocs, qui se positionnent comme s'il n'était pas là.
Par contre, le contenu textuel de ces blocs est repoussé par le flottant. Les images aussi, me semble-t-il. En fait, c'est peut-être le cas de tous les éléments de type en-ligne.

La page suivante le montre clairement (si on la regarde – oui, c'est graphique uniquement – avec un navigateur qui gère la transparence PNG) :
http://web.covertprestige.info/test/07-colonnes-flottantes-et-place-dans-le-flux.html

Une solution possible : donner à ton premier titre une marge à droite de la largeur de ta boîte flottante. Le flottant flottera par dessus la marge sans être repoussée par elle (vu qu'il flotte au dessus, CQFD).

Si Laurent Denis ou un autre gourou passe par là, et pense soudainement à une super page de référence sur le comportement exact des flottants, je suis preneur.
Sinon j'irai fouiller les specs

Merci mpop pour l'explication.
Je vais opter pour ta solution à laquelle j'avais pensé (c'est toujours appréciable d'être conforté dans ses intuitions ).
J'avais défini une classe pour le premier <h3> permettant de faire ça mais ça n'a pas fonctionné. Je suppose qu'il y a un problème de priorité entre id et class ou quelque chose comme ça.
Je vais voir si j'arrive à faire autrement.
Je vous tiendrai au courant
Modifié par jojaba (11 Mar 2006 - 11:29)

Bon après moultes essais infructueux j'ai finalement réussi à mettre en oeuvre ça. Je ne sais pas si c'est correct par rapport au standard (à mon avis c'est du bricolage) mais ça fonctionne !

Code source de la page :

<div id="premier">
<h3 id="premier">Comment tout a commencé</h3>
</div>

CSS :

#premier div {
	margin: 0;
	padding: 0;
}

#premier h3 {
	margin-right: 225px;
	margin-left: 10px;
	padding-left: 10px;
	border-top: groove #fff 1px;
	border-bottom: groove #fff 2px;
	background-color: #ebe0e0;
	color: #666666;
	font-size: 1.2em;
}

Une autre suggestion peut-être ?

Attention, tu as des problèmes avec les sélecteurs CSS !

Je suppose, d'après ce que tu dis, que dans un premier temps tu avais fait ça :

<h3 id="premier">Mon premier titre de niveau 3</h3>

#premier h3 {mes propriétés CSS}

Et que ça ne marchait pas.

Ce qui est tout à fait logique. Le sélecteur CSS #premier h3 désigne un élément h3 contenu à l'intérieur d'un élément dont l'identifiant est "premier".

La syntaxe correcte serait donc plutôt :

<h3 id="premier">Mon premier titre de niveau 3</h3>

h3#premier {mes propriétés CSS}

ou encore, pour le CSS :

#premier {mes propriétés CSS}

Une petite révision sur les sélecteurs CSS ?
http://www.yoyodesign.org/doc/w3c/css2/selector.html
Modifié par mpop (11 Mar 2006 - 15:24)

À signaler que la pseudo-classe :first-child permettrait de se passer d'une classe ou d'un identifiant à rajouter dans le code.

Bien sûr, IE6, tout ça...

Bonjour,

on peut avoir un id premier pour 2 balises différentes, div et h3, dans une même page?
Je vais partir réviser également mais là ils m'ont pas l'air très uniques

Felipe a écrit :
on peut avoir un id premier pour 2 balises différentes, div et h3, dans une même page?
Je vais partir réviser également mais là ils m'ont pas l'air très uniques

On n'est pas trop censé, mais techniquement il me semble que ça passe quand même.

mpop a écrit :
Attention, tu as des problèmes avec les sélecteurs CSS !
Je suppose, d'après ce que tu dis, que dans un premier temps tu avais fait ça :

<h3 id="premier">Mon premier titre de niveau 3</h3>

#premier h3 {mes propriétés CSS}

Et que ça ne marchait pas.

Exactement !
J'ai corrigé !

a écrit :
Une petite révision sur les sélecteurs CSS ?
http://www.yoyodesign.org/doc/w3c/css2/selector.html

Merci beaucoup pour cette petite leçon et pour ta disponibilité. A bientôt ...sûrement !
Modifié par jojaba (12 Mar 2006 - 07:15)