Un élément ( float ) dépassant de son conteneur

Bonjour , vous voyiez ci-dessus mon problème .
Il est aussi mentionné ici : http://forum.alsacreations.com/faq/#item6
J'ai lu les pages d'Openweb mais le fait d'ajouter des hr avec clear:both n'améliore pas la situation .

Voici la partie CSS intéressante :

#rubriques {
	float: right;
	width: 530px;
	margin: 20px 10px 0 0;
	padding: 0 0 0 0;

}

#rubriques h3{
	background: url(img1/rub.jpg) no-repeat;
	margin: 10px 0 10px 0;
	width: 507px;
	padding: 10px 0 15px 50px;
	font: bold 11pt Trebuchet MS;
	color: #E8EEF4;
}

______________________

J'ai essayé d'ajouter un <div class="space"></div> juste avant la </div> de fin de " rubriques " , avec la CSS suivante :

.space {
	clear: both;
        height: 20px;
}

Mais çe ne change rien

Merci d'avance !

heu peut-tu nous dire il vient d'ou le fond bleu avec bordure bleu foncé ? je ne le vois pas dans ton code CSS...

Il vient du fond général de ma page :

http://www.blog4ever.com/blog/?id=2

body {
	background: #A4BCE0;
	margin: 15px 0 15px 0;
	padding: 0 0 0 0;
	font: 10pt trebuchet MS;
	text-align: center;
}

Vous savez pas ?
Si même ici les gens savent pas je sais plus ou aller moi .

Difficile de t'aider sans le code source html. Donne-nous l'url exacte de la page te causant problème ou ton code html.

Et si tu rajoute simplement une marge droite à l'élément de gauche

difficile de t'aider sur le faible nombre de code que tu nous a fournis qui, il me semble bien, n'a pas d'erreur... la vérité est donc ailleur.

Excusez moi , voici l'adresse de la page :

http://www.blog4ever.com/blog/forum_msg.php?id=17&id_cat=9&id_post=8

La CSS est là : http://www.blog4ever.com/blog/style1.css

Salut,

Tu as visiblement des problèmes dans les dimensions que tu as déclarées :
rubriques, width : 530px;
rubriques h3 : 507 + 50 (padding) = 557px. Ton h3 est donc déjà plus large que son conteneur.

Conseil : vérifie toutes tes dimensions. Un élément enfant doit logiquement avoir un total (width + padding + margin) inférieur au width du parent.

Autre petit pb détecté (sans rapport) : tu utilises des dimensions en pt pour tes polices; les dimensions en pt sont pour le support papier; à l'écran il faut utiliser px ou des unités proportionnelles (em, %).

Ok merci .

J'ai partiellement résolu le problème en coupant les mots trop longs ( en php ) , donc ça va .

Merci à tous

KingLouis a écrit :
Ok merci .

J'ai partiellement résolu le problème en coupant les mots trop longs ( en php ) , donc ça va .

Merci à tous

Ce n'est certainement pas une solution très perenne ni très souhaitable que de manipuler ton contenu pour le faire rentrer dans des "cases" prédéfinies. Un mot se prononce, s'écrit etc. et occupe en général dans toutes ses dimensions orales et écrites l'espace qui lui est dû, les césures opérées dans chaques langues ne le sont pas au hasard. Php ne doit pas toutes les connaitre.
Un conseil si un contenu doit s'écouler, laisse le s'écouler tranquilement sans le forcer

a écrit :

L'usage forme la Voie,
Mais alors, la forme est perdue.
Ne t'accroche pas aux formes
Mais laisse les impressions s'insinuer dans le monde
Comme la rivière s'insinue vers la mer.

Tao Te Ching; 32 Formes
in le Tao du web design, traduit par Pompage

Ha ! Un peu de sagesse un lundi matin, comme c'est bien ...

Je vais remonter ce sujet : le problème persiste.

Exemple : http://test.blog4ever.com/blog/article2.php?id=8&ida=15

J'ai essayé de mettre un spacer :

<div id="rubriques">
<div class="spacer">&nbsp;</div>
</div>

.spacer {
  clear: both;
}

Mais aucun effet !

Dur dur le XHTML/Css par rapport au HTML !

dis-moi KingLouis, cette ligne par exemple te sert à quoi ?

<DIV align=left><PRE class=MsoNormal style="MARGIN: 0cm 0cm 0pt"><SPAN style="FONT-FAMILY: 'Trebuchet MS'"><o:p>&nbsp;</o:p></SPAN></PRE></DIV>

c'est codé à la méthode usine à gaz là...
Modifié par anthony (26 Mar 2005 - 11:45)

En fait ça c'est le résultat d'un script en Rich text ( RTE de Kevin Roth ) , qui permet de faire un éditeur WYSIWYG ( url : http://www.kevinroth.com/rte/demo.htm )

Donc j'ai pas trop touché à ça , j'ai vu que c'était un peu le bordel .

Y a pas un moyen de dire " quoi qu'il arrive faut pas que ça dépasse 500px " ?

KingLouis a écrit :
Y a pas un moyen de dire " quoi qu'il arrive faut pas que ça dépasse 500px " ?

si si y'a moyen, en codant à la méthode propre du XHTML/CSS.
là comme tu l'as faites, ça revient au même que si tu utilisais Word pour générer ta page HTML.

Euh mais mis a part le code " pourri " que me génère le rich text editor , c'est mal codé ?

Je refais le site en html ou y a une solution ?

KingLouis a écrit :
Euh mais mis a part le code " pourri " que me génère le rich text editor , c'est mal codé ?

Je refais le site en html ou y a une solution ?

voici une expression que j'ai souvent entendu : "Fais le ménache"

fais le ménage parmis toutes les balises <pre>, <span>, <u>, <b>, <o:p> ?? inutiles et tu verras que ça fonctionnera mieux.

De plus, au lieu de mettre pleins de &nbsp;&nbsp;&nbsp;&nbsp;, travaille plutôt avec des listes <OL> et en jouant sur les marges.
Modifié par anthony (26 Mar 2005 - 12:16)