[Résolu] Float et clear

Bonsoir,

Je pose une nième question sur le float et le clear car bien sûr je n'ai pas trouvé ma solution.

J'ai un problème ici :
http://www.footballamericain.com/index.php?p=view&i=807&t=super-bowl-x-pittsburgh-realise-le-double

Comme vous le voyez, mon image float de droite pose un problème certain .

J'ai essayé avec les clear right et both sur la div de la boxscore en bas mais right et both ont l'inconvénient de pousser cette div en dessous de la colonne à l'extrême droite (avec les vidéos et les "quick news").
Je m'interroge car la div colonne de droite est float right par rapport à la div centrale mais le corps de mon article (div id=corps) et la boxscore (div) sont dans cette div centrale. Je pensais donc, manifestement à tort, que la propriété clear sur une div dans une div n'aurait pas d'influence sur la div de niveau supérieur. (j'espère que j'ai été clair )

Dans tous les cas, auriez-vous une solution à mon problème ?

merci
Cordialement
Modifié par kileak (10 Feb 2011 - 20:21)

Salut,

kileak a écrit :
(j'espère que j'ai été clair )

Heu pas trop non... Quelle est l'image qui pose problème au juste ?
clear annule le comportement flottant (d'où le passage à la ligne).
Mais là en l'état je peux pas plus t'aider, j'ai rien vu en particulier sur ton site...

Peut être le bout de code incriminé pourrais nous aider à y voir plus clair Et aussi ce que tu souhaiterais avoir à la place de ce qui ne va pas.

Bonsoir,

Moi je vois deux problème avec cette image :
- Elle s'affiche par-dessus le tableau des scores
- Elle empiète sur la zone réservée au partage réseaux sociaux et commentaires

Pour le tableau des scores, je pense que c'est simplement parce que la propriété "float" appliquée à une image ne permet pas l'adaptation de la taille d'un tableau se trouvant à ses abords, contrairement au texte qui lui coule tranquillement autour de l'image.
Maintenant je n'en suis absolument pas sûr, cela dépend peut-être aussi des propriétés du tableau en terme de taille (largeurs fixes ou non).

Pour l'empiètement sur la zone du bas, le "clear: both;" pourrait se placer sur un <hr /> invisible que tu placerai à la toute fin de ton contenu textuel. Il pourrait être placé ailleurs sans pour autant ajouter un tag supplémentaire mais bon, je n'ai pas le temps de me plonger dans ta structure.

Ok, je devais être un peu fatiguée j'avais rien vu
Pour empêcher que le tableau passe en dessous tu peux lui appliquer une marge à droite égale à la largeur de ton image (à la place de margin auto qui centre ton tableau là où il n'y a pas la place). Autre remarque en passant, évite les styles en lignes, tu utilises une feuille de style et mets tout tes styles dedans, ça sera + simple à gérer...

Dans ton style en ligne sur la photo il y a 2 ; après float:right;

En fait tu veux que le tableau de score reste centré en dessous de la photo ou tu veux qu'il se mette sur la gauche en contournant la photo ?

Bonjour,

pour les flottants, il y a clear qui provoque un retour a la ligne.
Il y a aussi le layout(contexte de formatage) qui peut-être modifié et qui ne provoque pas forcement un brutal retour a la ligne.

En modifiant le contexte de formatage il est possible de contenir les éléments flottants ou de s'en ecarter.

exemple de correction pour le div contenant tableau et le div contenant l'article

.boxscorearticle, #article {overflow:hidden;}

1) Le div.boxscorearticle s'ecarte de div.image floattant.
2) #article englobe div.image

Pour tester/observer les difference ajouter une bordure .

.boxscorearticle, #article {overflow:hidden;border:solid}

GC

Bonsoir,

merci à tous les 3 pour vos recherches et réponses. Désolé pour ma réponse tardive mais j'étais en plein Super Bowl

Ta proposition gc-nomade est impressionnante. Je suis un peu scié car je ne comprends pas bien ce qui se passe.
En lisant ceci http://www.w3.org/TR/CSS21/visufx.html#propdef-overflow je n'y vois pas plus clair.
Mon image dans un DIV float à droite semble me mettre dans ce cas :

a écrit :
A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block

Une autre recherche m'apprend le concept de float clearing : http://www.impressivewebs.com/overflow-hidden-problem/

Ce que je ne comprends pas, c'est que pour moi, un overflow hidden fait que tout ce qui dépasse est masqué. Manifestement, non. Puisque là, le contenu s'adapte pour ne pas couper (d'ailleurs on est bien d'accord que clip=couper ?), le tableau se réduit pour passer entre les images, la div #article n'est plus trop courte. Pour résumer, je ne comprends pas comment le navigateur interprète cette propriété.

Pour qui commençait à assimiler les concepts de positionnement absolue, relative ou flottant, me voici face à un nouveauté

Je repose tout de même ma question initiale à propos de la propriété clear. Est-ce que le clear s'applique à tous les flottants de la page quelque soit le lien de parenté entre le flottant et le bloc "clearé" ? Car dans mon cas, la colonne de droite n'est pas liée à ma boxscorearticle et pourtant un clear:right sur boxscorearticle fait qu'il se retrouve sous cette colonne de droite :

<div id="centre">
   <div id="centre_centre">ma colonne de droite, float right</div>
   <div id="centre_gauche">
       <div id="article">
          <div id="boxscorearticle">clear:right fait qu'il est repoussé au niveau du bord inférieur de centre_centre</div>
       </div>
   </div>
</div>

Vous voyez, boxscorearticle est dans article qui est dans centre_gauche, qui est frère de centre_centre. Mais boxscorearticle n'est pas "en contact" avec centre_centre.

Merci beaucoup
Bonne soirée

Bonsoir,

en principe le clear degage d'un retour a la ligne de tous les elements flottant précedents dans le flux.

Il semble donc logique de voir #boxscorearticle passé sous #centre_centre.

Cependant en modifiant le contexte de formatage de #article, le résultat change.
1) #article s'ecarte du/des flottants le precedent.
2) #article contient et cloisonne ces enfants flottants.
3) #article contient alors la regle clear appliqué a ses enfants .

: test a effectué sur l'extrait de code html que tu proposes en quetion.

1) sans contexte de formatage modifié sur #article

#centre div {border:solid;padding:0.2em;}
#centre_centre {float:right;}
#boxscorearticle {clear:right;}

2)avec contexte de formatage modifié sur #article

#centre div {border:solid;padding:0.2em;}
#centre_centre {float:right;}
#boxscorearticle {clear:right;}
#article {overflow:hidden;}

Les effets de style s'applique en cascade et en modifiant le contexte de formatage (tout comme le haslayout pour IE6 par exemple) d'un element, les effets peuvent paraitre surprenant si ils ne sont pas connus ou reconnus.(ex: display, direction, float, position, margin, border, ...)
Ceci vaut pour quasiment chacune des propriétés de style avec plus ou moins d'effet secondaires, font etant la regle probablement la plus neutre.

GC

Bonjour,

Encore merci pour ton temps et ta pédagogie.

Je teste ton bout de code asap mais ça me semble assez clair. C'est vraiment la notion de "contexte de formatage" que je découvre.

C'est sans fin Css

kileak a écrit :

Encore merci pour ton temps et ta pédagogie.

Je t'en prie ,
si tu passes ton post en [ resolue ], il peut servir a d'autres

GC

Je ne trouve pas de bouton résolu, je présume donc que je dois mettre ça en titre