Discussion :

[hellspawn_ludo]

Bonjour,

J'ai voudrais centrer une phrase dans un div mais je n'y arrive pas. Cela est dû au fait que ma phrase est découpé en plusieurs balises P avec un float:left

Le découpage me permettra par la suite, avec du javascript, de faire afficher chaque élément P en jouant avec l'opacité.

Voici mon code

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<div style="width:500px; height:200px; background-color:Gray; text-align:center">
 
    <div style="background-color:Red ; width:50%;">
 
        <p style=" float:left">Mot 1 &nbsp</p>
        <p style=" float:left">Mot 2</p>
 
    </div>
</div>

Avec ce code, le div de couleur rouge est centré par rapport au div de couleur gris. Mais le texte, lui, n'est pas centré du tout.

Sauriez-vous s'il est possible de centrer cette phrase dans le div de couleur rouge ?

Merci beaucoup.

[Candygirl]

Hello,
Une structure du genre ne serait-elle pas plus adaptée à ce que tu souhaites faire?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<p style="background-color:Red ;width:50%; text-align:center;">
     <span>Mot 1</span>&nbsp;<span>Mot 2</span>
</p>

[hellspawn_ludo]

Bonjour Candygirl et merci pour ton aide.

Ca fonctionne bien. Le texte est bien centré.

Comme je l'ai signalé dans mon post, je souhaiterais maintenant appliquer une opacité sur chaque mot. Mais je n'y arrive toujours pas.

Voici ton code, quelque peu modifié :

HTML

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
 
<div style="width:500px; height:200px; background-color:Gray; text-align:center">
 
 
<p id="MonP" style="background-color:Red ;width:50%; text-align:center;">
     <span id="Mot1" style="width:100%;">Mot 1</span>&nbsp;<span>Mot 2</span>
</p>
 
<input type=button value="Go" onclick="changeOpac(50,'MonP')" />

JAVASCRIPT

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
/* Attribue l'opacité à un objet */
function changeOpac(opacity, id) 
{
 
    var object = document.getElementById(id).style;
    object.opacity = (opacity / 100);
    object.MozOpacity = (opacity / 100);
    object.KhtmlOpacity = (opacity / 100);
    object.filter = "alpha(opacity=" + opacity + ")";
}

Quand je mets l'id du P dans la fonction changeOpac(50,'Monp'), ma balise a bien une opacité de 50% mais quand je veux le faire sur un mot, genre changeOpac(50,'Mot1'), ça ne fonctionne pas.

Saurais-tu pourquoi ?

Encore merci pour ton aide.