Discussion :

[laurentibus]

bonjour tout le monde,

j aimerais savoir comment je dois faire pour que dans ma page HTML, j ai des boutons (B) aligner en haut a gauche et un titre (T) centrer en haut :
B T
B
B
B

j ai essayé en utilisant les paragraphe, text-align && cie mais sans ce résultat ..

merci d avance.

[laurentibus]

bon j ai eu un flash
j y arrive !!!!!!

Pour mes boutons je mes un position:absolute; et je regle la position
et pour mon titre je mes juste align:center

ca marche nikel mais est ce la bonne méthode ????

[Er3van]

On peut voir un bout de ton code css et html ?

A mon avis tu ferais mieux de passer par des div, en position relative ou absolue au choix.

Code html :

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

1
2
<div id=conteneurBoutons> Bouton 1, 2, 3 et 4</div>
<div id=titre>Mon Site</div>

avec le code css suivant :

Code css :

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

1
2
3
4
5
6
7
8
9
#conteneurBoutons {
     float : left ;
     width : 300px ; /* la longeur de ton choix */
}
 
#titre {
     float : left ;
     width : 500px ; /* /!\ La longeur des deux sommés doit être inférieure à la taille de ta fenetre, sans quoi, ça passera en dessous de tes boutons */
}

[laurentibus]

ok j ai tout mis dans une div

avec

Code :

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

1
2
3
4
5
6
7
8
9
10
 
div.entete
{
	vertical-align: top ;
}
 
h1
{
	text-align : center;
}

et apres je met un style prope a chaque bouton :
<div class="entete">
<h1> montitre <h1/>
B1 : ....... position:absolute; left: 0px; top: 0px; ...........
B2 : ....... position:absolute; left: 0px; top: 20px; ..........
....
</div>
ca va ,??

[Er3van]

Si tu mets tout dans un seul div, tu auras qqchose comme :

TITRE
B
B
B
B

Et non pas

B TITRE
B
B
B

C'est à toi de voir ce que tu veux, dans le deuxième cas tu est contraint d'utiliser deux div.

Sinon, une autre solution simple à ton problème est l'utilisation d'un tableau.

Pour obtenir

B TITRE
B
B
B

Il te suffira de faire :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<table>
      <tr>
           <td width=100px>B</td>
           <td width=300px>TITRE</td>
      </tr>
      <tr>
           <td>B</td>
      </tr>
      <tr>
           <td>B</td>
      </tr>
      <tr>
           <td>B</td>
      </tr>
</table>

[laurentibus]

ben ecoute avec un seul div j ai bien le deuxième cas
doncje pense que je vais laisser comme ca ... si jamais ca bug je tenterai avec 2 div mais bon j ai tester sous FF et IE et c

merci Er3van pour ton aide.

[Er3van]

Oula, c'est parceque j'avais pas prêté attention !

C'est du à tes positionnements absolus....
Dans ton utilisation c'est pas vraiment conseillé mais tu fais comme tu l'entends.

[laurentibus]

pourquoi les position absolute ne sont pas trop conseillé ( je ne les mets que sur les boutons ) ??

[Er3van]

Simplement parcequ'en positionnement absolu tu n'es plus considéré de la même façon dans le flux d'ecriture.

Si tu veux écrire du texte en dessous de ton titre, logiquement il passera soit dessus soit dessous tes boutons ( ça peut parfois être utile, notamment pour les menus ) mais dans ton cas je ne pense pas que ce soit l'effet souhaité.

Après j'ai peut-être raté qqchose, et tout s'affiche bien chez toi....

D'ailleurs, si tu comptes faire qqchose comme :

B TITRE
B du texte
B du texte

ça sera plus simple à gérer avec deux div séparés, m'enfin, encore une fois, c'est toi qui voit.