28173 sujets

CSS et mise en forme, CSS3

[résolu] Propriété float: resultat decevant

Bonsoir,

Je cherche une astuce pour qu'une div "bleu" contenant 3 divs "rouge" flottante s'agrandissent automatique selon la taille des div rouges... 

.bleu{
height:hauteur_div_rouge; /*résoud le probleme mais non automatique*/
}


Voici un apercu ici

et le code


<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style>


#bleu{
background-color:#000099;
}

#rouge{
height:100px;
width:50px;
float:left;
margin-left:10px;
background-color:#FF0000;
}

#orange{
background-color:#CC6600;
}
</style>
</head>

<body>
	
    	<div id="bleu">
        bleu
        	<div id="rouge">rouge</div>
            <div id="rouge">rouge_1</div>
            <div id="rouge" >rouge_2</div>
           
        </div>

</body>
</html>

Modifié par tazou (20 Dec 2007 - 15:51)
Bonsoir,

Avant tout, je tiens à souligner 3 points importants:
• un identifiant doit être unique dans une page, l'attribut class permettant quant à lui d'être récurrent
• il est important de préciser un doctype à ton document (tu trouveras de nombreuses ressources à ce sujet ici-même) ainsi que la langue principale de ton document
• l'attribution de noms d'identifiants ne doit pas refléter son aspect puisqu'il est susceptible de changer à tout moment, mais bien la nature de l'information balisée

En ce qui concerne ton problème, il s'agit tout simplement d'un comportement naturel des flottants: un élément flottant étant extrait du flux, il "n'existe" plus aux yeux de son parent; ton div#bleu se retrouvant comme "vide" de tout contenu.
Pour le contraindre à prendre en considération ses enfants flottants, la création d'un contexte de formatage sera nécessaire, et ce, par l'ajout d'un overflow:auto sur ce conteneur.
Benjamin D.C. a écrit :
Bonsoir,

Avant tout, je tiens à souligner 3 points importants:
• un identifiant doit être unique dans une page, l'attribut class permettant quant à lui d'être récurrent
• il est important de préciser un doctype à ton document (tu trouveras de nombreuses ressources à ce sujet ici-même) ainsi que la langue principale de ton document
• l'attribution de noms d'identifiants ne doit pas refléter son aspect puisqu'il est susceptible de changer à tout moment, mais bien la nature de l'information balisée

En ce qui concerne ton problème, il s'agit tout simplement d'un comportement naturel des flottants: un élément flottant étant extrait du flux, il "n'existe" plus aux yeux de son parent; ton div#bleu se retrouvant comme "vide" de tout contenu.
Pour le contraindre à prendre en considération ses enfants flottants, la création d'un contexte de formatage sera nécessaire, et ce, par l'ajout d'un overflow:auto sur ce conteneur.


Merci de ta réponse:

Pour le doctype je l'ai omis volontairement pour une raison de lisibilité, sinon j'ai pas fait attention que j'utilisais des id au lieu des class, j'ai bêtement copié collé la div rouge en oubliant qu'elle contenait id ...

J'ai encore du mal avec cette notion de flux, mais ca finira par venir, donc je dois retenir qu' overflow:auto permet de prendre en considération des éléments enfants "extrait du flux" ?
Smiley cligne

Merci encore !
tazou a écrit :

je dois retenir qu' overflow:auto permet de prendre en considération des éléments enfants "extrait du flux" ?

Non, uniquement des flottants. Une division contenant des enfants positionnés absolument (donc, hors du flux) ne pourra en déterminer les hauteurs.
Benjamin D.C. a écrit :

Non, uniquement des flottants. Une division contenant des enfants positionnés absolument (donc, hors du flux) ne pourra en déterminer les hauteurs.


C'est noté. Il y a cependant un comportement qui se produit qui m'échappe, avec un containeur de 3 colonne, lorsque je modifie la hauteur des colonnes, celle ci n'est pas modifiée mais c'est celle du containeur qui l'est, et avec donc les désagrement qui vont avec --> scroll bar.

On peut voir ce qui se passe ici

Voila le code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<style>

#containeur_colonne{
background-color:#FF0066;
overflow:auto; /*prend en considération l'elargissement des colonnes flottantes extraites du flux*/
}

.colonne{
height:250px;
color:white;
width:233px;
float:left;
margin-left:11px;
/*margin-top:20px;*/
}

.colonne_233{
font-size:14px;
text-align:center;
background-image:url(images/barre_233.png);
background-repeat:no-repeat;
height:25px;
}

.contenu_colonne{
background-image:url(images/fond.png);
}

.contenu_colonne a{
color:#CCCCCC;
text-decoration:none;
border-bottom:#333333 solid 1px;
display:block;
padding-top:4px;
padding-bottom:4px;
padding-right:2px;
padding-left:10px;
}

.contenu_colonne a:hover{
background-color:#2E2E2E;
}

.colonne_bas_233{
background-image:url(images/barre_bas_233.png);
background-repeat:no-repeat;
height:25px;
}


</style>
</head>

<body>
	
    	<div id="containeur_colonne">
            
            	<div class="colonne">
                	<div class="colonne_233">Dernières News</div>
                    <div class="contenu_colonne">
                    <a href="#">Liens 1</a>
                    <a href="#">Liens 2</a>
                    <a href="#">Liens 3</a>
                    <a href="#">Liens 4</a>
                    <a href="#">Liens 5</a>
                    <a href="#">Liens 6</a>
                    <a href="#">Liens 7Liens 7Liens 7Liens </a>
                    <a href="#">Liens 8</a>
                    <a href="#">Liens 9</a>
                    
                    
                   	</div>
                    <div class="colonne_bas_233"></div>
                </div>
                
                <div class="colonne">
                	<div class="colonne_233">Mise à jour</div>
                    <div class="contenu_colonne">
                    <a href="#">Liens 1</a>
                    <a href="#">Liens 2</a>
                    <a href="#">Liens 3</a>
                    <a href="#">Liens 4</a>
                    <a href="#">Liens 5</a>
                    <a href="#">Liens 6</a>
                    <a href="#">Liens 7Liens 7Liens 7Liens </a>
                    <a href="#">Liens 8</a>
                    <a href="#">Liens 9</a>
                  
                  
                    </div>
                    <div class="colonne_bas_233"></div>
                </div>
                
                <div class="colonne" >
                	<div class="colonne_233">Derniers Scripts</div>
                    <div class="contenu_colonne">
                    <a href="#">Liens 1</a>
                    <a href="#">Liens 2</a>
                    <a href="#">Liens 3</a>
                    <a href="#">Liens 4</a>
                    <a href="#">Liens 5</a>
                    <a href="#">Liens 6</a>
                    <a href="#">Liens 7Liens 7Liens 7Liens </a>
                    <a href="#">Liens 8</a>
                    <a href="#">Liens 9</a>
                    <a href="#">Liens 10</a>
                    
                    </div>
                    <div class="colonne_bas_233"></div>
                </div>
                
		</div><!-- fin div containeur-->

</body>
</html>


Merci pour votre aide ! Smiley cligne
Modifié par tazou (20 Dec 2007 - 09:03)
Bonjour,

Pour le nouveau problème rencontré: le conteneur en overflow: auto prend bien la hauteur des éléments flottants, c'est à dire 250px.

Ensuite, lorsque ces flottants ont du contenu qui dépasse cette hauteur, le contenu en question déborde et pour l'afficher le conteneur utilise une barre de défilement.

Solution: supprimer la hauteur fixe des éléments div.colonne. On voudra peut-être utiliser une hauteur minimale avec min-height, si besoin.
Florent V. a écrit :
Bonjour,

Pour le nouveau problème rencontré: le conteneur en overflow: auto prend bien la hauteur des éléments flottants, c'est à dire 250px.

Ensuite, lorsque ces flottants ont du contenu qui dépasse cette hauteur, le contenu en question déborde et pour l'afficher le conteneur utilise une barre de défilement.

Solution: supprimer la hauteur fixe des éléments div.colonne. On voudra peut-être utiliser une hauteur minimale avec min-height, si besoin.


Je te remercie encore Smiley cligne , c'était la solution !
Benjamin D.C. a écrit :

Tu considères que ce sujet est [Résolu] ? Smiley cligne


Oui, je ne vais pas continuer indéfiniment à poser toutes mes questions sur un même fil Smiley cligne

Merci encore Smiley cligne
tazou a écrit :


Oui, je ne vais pas continuer indéfiniment à poser toutes mes questions sur un même fil Smiley cligne

Merci encore Smiley cligne

Merci par conséquent d'éditer le titre de ton message initial. Smiley cligne
Sujet clos
Aller à