Comment centrer cette bannière ?

[Sam Trader]

Bonjour,

Je n'arrive pas à placer cette bannière au centre, sur les grandes résolutions elle est décalée à gauche, que dois-je faire ?

Vous pourrez constater par vous même : -www.bookmakers-sports.com-

Ci joint le CSS associé :

#banniere
{
position:absolute;
width:468px;
height:60px;
z-index:1;
left: 299px;
top: 10px;
margin-right:10px;
}


PS: je l'utilise sous la forme div id=bannière.

[YoyoS]

#banniere
{
width:468px;
height:60px;
margin-right:auto;
margin-left:auto;
}

[webstands]

plop :p
Et pour reprendre une partie de ta css tu peux aussi faire comme ça:

Code: Tout sélectionner

#bannniere {
position: absolute;
left: 50%;
top: 50%;
padding: 0;
display: block; /* c'est mieux*/
width: 468px;
height: 60px;
margin-left: -234px;
margin-top: -30px;
background-image: url('chemin/nomImage.extension');
/* par exemple: url('images/ban.jpg'); ou : url('http://www.tonsite.com/images/ban.jpg')  si la bannière doit s'afficher  sur une page non à la racine du site */
background-repeat: no-repeat;
}



tu peux aussi appliquer une couleur de fond pour éviter les différences d'affichage d'un browser à l'autre :

Code: Tout sélectionner

#codeCouleur url('chemin/nomImage.extension');


et même mettre le no-reppeat sur la même ligne:

Code: Tout sélectionner

background: #fff url('img/ban.jpg') no-repeat;



à adapter à ta css et le conteneur de ta bannière

[e-kiwi]

la facon brutale :
<center></center>

sinon :
margin-right:auto;
margin-left:auto;
va marcher, mais attention à la déclaration de ton doctype

[nickargall]

Euh sinon pour réduire, je crois qu'on peut même mettre

Code: Tout sélectionner

#banniere
{
width:468px;
height:60px;
margin:auto;
}


ça fonctionne aussi.

[YoyoS]

Euh sinon pour réduire, je crois qu'on peut même mettre

Code: Tout sélectionner

#banniere
{
width:468px;
height:60px;
margin:auto;
}


ça fonctionne aussi.

Je sais pas s'il veut centrer en hauteur , autrement oui

[Sam Trader]

Merci pour toutes vos réponses, je vais essayer tout ça !

[Sam Trader]

Eh ben dis donc ...

Rien ne donne un meilleur résultat, j'ai essayé toutes vos possibilités, c'est toujours décalé d'une façon ou d'une autre.

J'aimerai simplement centrer la bannière :

width:468px;
height:60px;

suite ?

[jf_evreux]

j'arrive pas à voir ton site pour me rendre compte, mais étant en tunisie et vue le rapport du pays avec les jeux d'argent je ne suis pas étonné !

Il faudrait que tu précises la nature du pb rencontrée par l'ajout du code qu'on t'a proposé ici, notamment par e-kiwi, dont le code est pourtant correct. Sans ce que cela produit chez toi, c'est hard de te dire comment résoudre le pb.

T'as essayé d'ajouter un petit "clear:both;" (sans les guillemets) dans le code de la div d 'e-kiwi ?

a++

[amph37]

Ton doctype est html 4.0 transitional.
A moins de vouloir passer ton site au xhtml
Un center de base dans l'html suffit, pas besoin du css.
<center>image</center>

Là je ne vois pas comment cela ne pourrait pas marcher

[boutdepapier]

#banniere
{
text-align: center;
margin-top: -55px;
}

Firebug

[Sam Trader]

Les codes que vous m'avez fourni permettent effectivement centrer la bannière, mais c'est carrément au centre la page, j'en ai besoin au centre au haut.

Pour ce qui est de la balise <center>, je l'ai déjà utilisé sur mes pages mais je n'avais pas pensé à le faire pour la bannière, je me vois mal répéter l'opération pour toutes les pages du site (101).

A moins que le <center> peut se mettre dans le CSS ?

Je vais essayer les nouvelles solutions proposées et je vous tiendrai au courant...

[webstands]

J'avais précisé que c'était à adapter au code html et la css du conteneur de la bannière... avec le code que je te proposais, ta bannière se centrait A L'INTERIEUR de son conteneur, et non sur ta page entière :p

à priori ta bannière est posée directement sur le body, aussi ce style:

Code: Tout sélectionner

#banniere {
position: absolute;
left: 50%;
padding: 0;
display: inline;
width: 468px;
height: 60px;
margin-left: -234px;
margin-top: 0;
background: #fff url('images/tonImage.extension') no-repeat;
/* par exemple: url('images/ban.jpg'); ou : url('http://www.tonsite.com/images/ban.jpg')  si la bannière doit s'afficher  sur une page non à la racine du site */

}

accompagné de ce code html:

<div id="banniere" title="Site de paris sportifs"></div>

devrait être efficace, il faut bien sûr que tu remplaces le chemin d'image que j'ai mis par celui de ta ban.

fait attention en centrant que le texte qui apparait sur ton site en haut à gauche de ta page ne vienne pas se coller à l'image bannière... c'est à dire qu'il ait suffisamment de place pour s'afficher correctement.

le mieux serait que tu fasses une div header pour ton haut de page qui contiendrait, bien disposés, tous les éléments de ton haut de page: le texte, les liens, la bannière... tu serais plus tranquille