[RESOLU]Centrer une 'div'

bonjour
j'ai ceci dans ma 'css' :

.banniere2 {
	margin-top: 0px;
	width: 667px;
	height: 100px;
	background-image: url(../images/banniere-2.jpg)
}

que puis-je ajouter pour que la 'bannière' soit centrer au milieu de la page ?
grand merci à l'avance
@mitiés
b g
Modifié par bg62 (15 Jul 2007 - 11:55)

Salut

Met la commance "text-align:center;" dans ton div parent ou dans le body.
Ou met des margin-left et margin-right:auto dans ton div banniere2.

bonjour ,

il faut qu'elle soit totalement au milieu de l'ecran ?
si c'est le cas voici le code qui pourra t'aider :

.banniere2 {
position:absolute;
width:667px;
height:100px;
left:50%;
top:50%;
margin-left:-333px;
margin-top:-50px;
background-image: url(../images/banniere-2.jpg);
}

edit : mon code n'etait pas complet en + ..
Modifié par rafale29 (14 Jul 2007 - 20:35)

rafale29 a écrit :
bonjour ,

il faut qu'elle soit totalement au milieu de l'ecran ?
si c'est le cas voici le code qui pourra t'aider :

.banniere2 {
position:absolute;
width:667px;
height:100px;
margin-left:-333px;
margin-top:-50px;
background-image: url(../images/banniere-2.jpg);
}

non je me suis mal exprimé ... : à centrer 'horizontalement" là où elle se trouve
@mitiés
b g

tll a écrit :
Salut

Met la commance "text-align:center;" dans ton div parent ou dans le body.
Ou met des margin-left et margin-right:auto dans ton div banniere2.

la commande "text-align:center;" y est déjà:

body {
	background-color: #E5F0FF;
	font-family: arial;
	font-size: 80%;
	color: #000;
	text-align: center;
}

si je mets:

.banniere2 {
	margin-top: 0px;
	width: 667px;
	height: 100px;
	background-image: url(../images/banniere-2.jpg)
	margin-left:auto;
	margin-right:auto; 
}

elle disparait complètement !!!
@mitiés
b g
Modifié par bg62 (14 Jul 2007 - 20:38)

si c'est horizontalement alors ce qui suit devrait aller

.banniere2 {
position:absolute;
width:667px;
height:100px;
left:50%;
margin-left:-333px;
background-image: url(../images/banniere-2.jpg);
}

le margin-left est égal (ici à peu près) à la -width/2 px

rafale29 a écrit :
si c'est horizontalement alors ce qui suit devrait aller

.banniere2 {
position:absolute;
width:667px;
height:100px;
left:50%;
margin-left:-333px;
background-image: url(../images/banniere-2.jpg);
}

le margin-left est égal (ici à peu près) à la -width/2 px

avec cela la bannière part complètement sur la gauche et l'on en voit plus qu'une partie ...
@mitiés
b g

euh j'ai testé chez moi avant de donner le code ..et ca marche et je l'ai déjà utilisé .. et elle part sur la gauche??! si elle partait d'un côté ca serait plus vraisemblable que ca soit vers la droite .. as-tu bien recopié le code?

elle est ensuite placée comme ceci dans la page :

<div class="banniere2"></div>

rafale29 a écrit :
euh j'ai testé chez moi avant de donner le code ..et ca marche et je l'ai déjà utilisé .. et elle part sur la gauche??! si elle partait d'un côté ca serait plus vraisemblable que ca soit vers la droite .. as-tu bien recopié le code?

je viens de ré-essayer ... elle se centre mais se place sur une partie du texte qui avant était en-dessous ... et le cache !
@+
b g

oui c'est du a la position absolute qui fait sortir du flux le div ..

une autre solution alors serait de faire ceci :

.banniere2 {
margin-left: auto;
margin-right: auto;
width:667px;
height:100px;
background-image: url(../images/banniere-2.jpg);
}

Salut,

Heu !!

margin-right: auto,
margin-left: auto,

Avant d'utiliser les absolute pour ça, non?

rafale29 a écrit :
oui c'est du a la position absolute qui fait sortir du flux le div ..

une autre solution alors serait de faire ceci :

.banniere2 {
margin-left: auto;
margin-right: auto;
width:667px;
height:100px;
background-image: url(../images/banniere-2.jpg);
}

nikel cela fonctionne très bien !
merci
comment faire apparaître les balises 'alt' et 'title' sur cette image ensuite
(je coupe ... mais je reviens tout à l'heure)
@mitiés
b g

il faudrait insérer la balise image directement dans le div et ne pas utiliser l'image en background pour pouvoir utiliser l'attribut alt par exemple

rafale29 a écrit :
il faudrait insérer la balise image directement dans le div et ne pas utiliser l'image en background pour pouvoir utiliser l'attribut alt par exemple

ne peut-on mettre ces deux balises dans la css ?

.banniere2 {

margin-left: auto;

margin-right: auto;

width:667px;

height:100px;

background-image: url(../images/banniere-2.jpg);

}

là cela fonctionne bien pour le centrage (et j'en ai pas mal d'identiques dans la css !) ce serait donc plus pratique de pouvoir ne modifier que le fichier css
@mitiés
b g

Bonjour,

Ton problème est-il résolu ?

Pour les questions de alt sur les images html, faire une recherche ou ouvrir un autre sujet.

ps: tu aurais trouvé la solution de ton problème ici: Tutoriels et articles Alsacréations
ps2: il n'y a pas de "commande css" mais des propriétés
Modifié par Igor (15 Jul 2007 - 11:33)

Igor a écrit :
Bonjour,

Ton problème est-il résolu ?

Pour les questions de alt sur les images html, faire une recherche ou ouvrir un autre sujet.

ps: tu aurais trouvé la solution de ton problème ici: Tutoriels et articles Alsacréations
ps2: il n'y a pas de "commande css" mais des propriétés

Merci du message
c'est fait, j'ai mis en résolu et je vais en ouvrir un autre pour les balises
@mitiés
b g