Problème dans bannière extensible

je veux que mon div du milieu soit centrer

Sujet résolu

23 mars 2006 à 11:31:28

Bonjour à tous,

voila , mon problème , j'essaie de faire une bannière extensible .

J'ai donc un logo que je veux repeter à droite et à gauche ,
et au milieu le titre.
Les trois images sont en png.

Voila ce que j'ai tenté de faire.

.banniere{
min-width:700px;
margin-left:5%;
margin-right:5%;
height: 100px;
border:1px dashed blue;
}

.ban1{/*premier logo*/
float: left;
width:97px;
height: 93px;
background-image: url("img/img2/banpart1.png");
margin-left:5px;
}

.ban2{/*titre*/
width:359px;
height: 92px;
margin-left:auto;
margin-right:auto;
background-image: url("img/img2/banpart2.png");
float:left;

}

.ban3{/*deuxième logo*/
float: right;
width:97px;
height: 93px;
background-image: url("img/img2/banpart1.png");
margin-left:5px;
}

Voila , les deux logos sont bien aux deux extremités , mais le titre est collé au logo de gauche .

En fait j'aimerais centrer le titre ( qu'ils soit à egale distance des deux logos).

Riko

23 mars 2006 à 13:38:53

Salut,

Le nouveau CSS

.ban2{/*titre*/
width:359px;
height: 92px;
margin-left:auto;
margin-right:auto;
background-image: url("img/img2/banpart2.png");.ban2{/*titre*/ /*suppression de float:left;*/

pinkgizmo

23 mars 2006 à 14:06:21

En effet , c'est bien ça , ca marche mais je n'ai pas compris exactement comment ? :euh:

Riko

23 mars 2006 à 14:30:03

Dans le flux normal (pas de float) ,les blocs se positionnement l'un en dessous de l'autre.

Lorsque ce que ces mêmes blocs sont flottants il sont retirés du flux normal et viennent se placés le plus à gauche ou le plus à droite possible (dans le bloc conteneur). Si tu ajoutes un autre bloc il se placera dans l'espace laissé libre.

Dans l'exemple que je t'ai donné :
Les blocs "ban1" et "ban3" sont flottants donc ils se placent à droite et à gauche, au lieu de se mettre l'un en dessous de l'autre (dans le flux normal).
Ils laissent de la place au centre donc le bloc "ban2" se logera dans la place laissée libre.
Tu appliques une margin: auto à ton bloc "ban2" et il se centrera dans l'espace libre.

Si ton bloc "ban2" est flottant il se placerai donc le plus à droite ou le plus à gauche possible (selon la place dispo dans le bloc conteneur (pas de float centre).

Petit bemol: il faut déclarer les flottants avant les blocs du flux normal.(saut pour cas particulier).

Fais des essais tu verras c'est assez sympa.

J'espère m'être fait comprendre et t'avoir rendu service.

pinkgizmo

23 mars 2006 à 14:44:52

Tu t'est bien fait comprendre et tu m'a trés bien rendu service.

Merci , et vive le css

Riko

23 mars 2006 à 14:45:59

N'oublies pas le petit bouton résolu et @+