[RESOLU] Help CSS pour centrer et Inline

[MYFRENCHNEIGHBOR]

Bonjour,

 

Sur la home page de mon site www.french-food.com, j'ai une ligne "Buy French Food Online - Free shipping over $50.00 within the US".

 

Cette ligne contient le H1 de ma home page et est codée comme cela :

 

 

<h1 style="display: inline; ">{l s='Buy French Food online' mod='homefeatured'}</h1><p style="display: inline;"><span style="font-size: 18px; color: #000000;">{l s=' - Free Delivery over $50 within the US' mod='homefeatured'}</span></p>

 

J'aimerai centre cela mais text-align:center ne fonctionne pas.

 

Quelqu'un a t'il une idée ?

 

Merci d'avance.

Edited July 7, 2012 by MYFRENCHNEIGHBOR (see edit history)

[Mellow]

Encadrer l'ensemble par une <div> avec "width:100%;text-align:center" ou "margin-left:auto;margin-right:auto;" ou "margin: 0 auto;"

 

<div style="margin: 0 auto;">
 <h1 style="display: inline; ">{l s='Buy French Food online' mod='homefeatured'}</h1><p style="display: inline;"><span style="font-size: 18px; color: #000000;">{l s=' - Free Delivery over $50 within the US' mod='homefeatured'}</span></p>
</div>

 

De plus, les balises <p> et <span> ne semblent pas nécessaires, tu peux tout mettre à la suite dans le <h1> et à ce moment la tu lui applique directement un "margin-left:auto; margin-right:auto;"

Edited July 6, 2012 by Mellow (see edit history)

[Guest Kaylabs]

A noter qu'il vaut mieux eviter de mettre du css directement dans le html, ca evite de devoir editer css ET tpl pour changer une mise en page

 

Ce qui donne pour le html comme l'a dit Mellow: encadrer le tout d'un div auquel on attribue une nouvelle class:

<div class="centrage">
<h1>Buy French Food online</h1><p><span> - Free Delivery over $50 within the US</span></p>
</div>

 

Puis dans le css, ligne 1749 du global.css, rajouter le display:inline pour H1:

.banner h1 {
color: #000000;
font-size: 18px;
font-weight: normal;
line-height: 20px;
display: inline;
}

 

puis quelques nouvelles rules:

div.centrage { text-align: center; }

.banner p { display: inline; }

.banner p span { font-size: 18px; color: #000; }

Edited July 7, 2012 by Kaylabs (see edit history)

[MYFRENCHNEIGHBOR]

@Mellow et @Kaylabs :

Vous êtes géniaux : merci du fond du coeur (et de la cote est des USA).

Cordialement.

Sylvain