Forum d'entraide PHPFrance

Bonjour,

Je suis toute nouvelle et commence à pas trop mal me débrouiller en php (attention ca reste sommaire). J'ai réussi à faire un modèle de page dont je suis fière mais je ne sais pas comment faire pour en css pour que le contenu ne se répande pas sous ma div en float:left. J'ai réussi à bloquer le flux pour que le float ne se répande pas sur mon footer (même si ca risque pas d'arriver souvent

) mais j'ai toujours ce souci de contenu plus long que mon menu qui me freine, c'est quoi la parade ?

Bonne journée !

Un margin-left suffit la plupart du temps.

Merci Victor, c'est du rapide

En fait que dois-je faire pour que dans ce cas :

Code : Tout sélectionner

<div style="background-color:#FFFF00; padding:20px;">
<div style="background-color:#FF0000; margin:20px; padding:20px">bandeau</div>
<div style="background-color:#FFCCFF;  margin:20px; padding:20px">
<div style="background-color:#FFCCCC; width:100px; height:100px; float:left;">menu menu menu menu menu menu menu menu menu menu</div>
<div style="background-color:#AACCFF; padding-left:120px">titre</div>
<div style="background-color:#AA46BB; padding-left:120px">bla bla bla bla blabla 
bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla 
bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla 
bla bla bla blabla bla bla bla blabla bla bla bla la bla bla blabla bla bla bla blabla bla bla bla la bla bla blabla bla bla bla
blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla 
blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla la bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bl bla 
bla bla bla bla bla bla bl bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla l bla bla bla bla bla bla bla l bla bla bla bla 
bla bla bla l bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bl</div></div>
<div style="background-color:#FFEEBB; margin:20px; padding:20px; clear:both;">footer</div>
</div>

la zone violette ne déborde pas sous le menu.

Et dans ce cas :

Code : Tout sélectionner

<div style="background-color:#FFFF00; padding:20px;">
<div style="background-color:#FF0000; margin:20px; padding:20px">bandeau</div>
<div style="background-color:#FFCCFF;  margin:20px; padding:20px">
<div style="background-color:#FFCCCC; width:100px; height:100px; float:left;">menu menu menu menu menu menu menu menu menu menu
menu menu menu menu menu menu menmenu menu menu menu menu menu menmenu menu menu menu menu menu menmenu menu menu menu menu menu men
menu menu menu menu menu menu menmenu menu menu menu menu menu menmenu menu menu menu menu menu menmenu menu menu menu menu menu</div>
<div style="background-color:#AACCFF; padding-left:120px">titre</div>
<div style="background-color:#AA46BB; padding-left:120px">bla bla bla bla blabla 
bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla 
bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla 
bla bla bla blabla bla bla bla blabla bla bla bla la bla bla blabla bla bla bla blabla bla bla bla la bla bla blabla bla bla bla
blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla blabla bla bla bla 
blabla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla la bla bla bla bla bla bla bla bla bla 
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bl bla 
bla bla bla bla bla bla bl bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla l bla bla bla bla bla bla bla l bla bla bla bla 
bla bla bla l bla bla bla bla bla bla bla bl bla bla bla bla bla bla bla bl</div></div>
<div style="background-color:#FFEEBB; margin:20px; padding:20px; clear:both;">footer</div>
</div>

la zone rose barbie s'allonge d'autant que le float menu couleur saumon.

Si toute fois c'est quelque chose de possible ^^

Si tu utilises padding-left, la couleur d'arrière-plan risquera de déborder. Dans ce cas, utilise margin-left. Pour info, une couleur d'arrière-plan colore l'élément à la fois dans son contenu et dans ses marges internes (padding).

Un conseil : utilise une feuille de style distincte de ta page HTML pour les CSS ; tu gagneras en rapidité et en maintenance.

Bonjour VB !

Excellent pour le margin-left, j'obtiens exactement le résultat escompté. Par contre si le float est plus long que le contenu "central", le float sans chevaucher le footer déborde de son parent. Comment faire pour que la div parente suive le comportement du float.

Merci

Youpi !!!!!

Problème résolu avec l'ajout d'un <div style="clear:both"></div>.

Je ne sais pas si c'est très propre mais bon ca semble bien se comporter sous IE comme sous FF.

Faut voir les autres maintenant Mr Opéra

Sibelle

Youpi !!!!!

Problème résolu avec l'ajout d'un <div style="clear:both"></div>.

Je ne sais pas si c'est très propre mais bon ca semble bien se comporter sous IE comme sous FF.

Sibelle

C'est propre

Comment faire pour que la div parente suive le comportement du float.

Si tu es dans le cas où un élément a des éléments enfants qui sont tous en positionnement flottant, autrement dit le cas suivant :

Code : Tout sélectionner

<div id="parent">
  <div class="enfant">...</div>
  <div class="enfant">...</div>
</div>

#parent {
  border: 1px solid; /* Une bordure délimitant le parent */
}
.enfant {
  width: 100px;
  float: left;
}

il faut créer un contexte de formatage, en indiquant que les éléments enfants ne doivent pas déborder de leur parent :

Code : Tout sélectionner

#parent {
  overflow: hidden; /* Tout débordement de ce bloc est "masqué", autrement dit neutralisé */
}

Ainsi, la bordure du parent encadre bien les éléments flottants, et ce sous Opera, Safari, Firefox et tous les navigateurs respectueux des standards, ainsi qu'IE 7. Pour IE 6 (et versions antérieures), ça ne marche pas car l'élément parent n'a pas de "hasLayout" (un concept propre à IE, supprimé avec la future version 8, expliqué par Laurent Denis) ; pour y remédier, il faut lui donner du layout, par exemple en lui donnant une hauteur (sachant qu'IE, jusqu'à la version 6, interprète la propriété height comme s'il s'agissait de min-height) :

Code : Tout sélectionner

#parent {
  height: 1%;
}

Bien entendu, pour éviter que les navigateurs interprétant correctement la propriété height (comme une hauteur fixe) n'interprète le height: 1%, le correctif pour IE 6- doit être appelé au moyen d'un commentaire conditionnel :

Code : Tout sélectionner

<!--[if lte IE 6]>
<style type="text/css">
#parent {
  height: 1%;
}
</style>
<![endif]-->

MERCI à vous et pour tout les garçons

++

Forum d'entraide PHPFrance

css contenu non voulu sous div float left

css contenu non voulu sous div float left