Discussion :

[navis84]

Bonjour,

J'ai un bloc navigateur_page dans lequel je souhaite inclure 3 blocs :
- precedente
- page
- suivante

Avec mon code, les blocs apparaissent bien au même niveau, mais le texte du milieu (classe page) n'est pas centré et apparait quelques pixels plus bas que le texte des autres blocs.

Code :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
	div.navigation_page {
		float:left;
		text-align: center;
	}
 
	div.navigation_page div.precedente{
		float:left;
	}
	div.navigation_page div.suivante{
		float:right;
	}
 
	div.navigation_page div.page {
		float:left;
	}	
 
<div class="navigation_page">
	<div class="precedente">
		Précédent
	</div> 
 
	<div class="page">
		Page(s) : 1 2 3 4 5
	</div>
 
	<div class="suivante">
                Suivante
	</div>
</div>

Merci d'avance pour votre aide.

[Bisûnûrs]

Aucun problème sur IE et aucun problème sur Firefox avec le seul code que tu as donné.

[navis84]

Après re-test, il y a au moins celui du bloc du milieu dont le texte n'est pas centré (au moins sur Firefox)...

[navis84]

De plus, si je rajoute un élément span dans mon bloc page, il est légèrement au dessous :

Code :

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

1
2
3
<div class="page">
		Page(s) : <a href="">1</a> <span style="float:left;font-weight: bold; font-size: 1.2em;">2</span> 3 4 5
</div>

[trotters213]

j'ai eu un problème similaire la dernière fois. Regarde les bordures de tes div

Code :

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

div.navigation_page { border : 1px solid #000000;}

si elle ne sont pas tout simplement de largeur différentes.

[navis84]

Merci de ta réponse.

Le problème, c'est que je n'ai pas encore mis de bordure à aucun des blocs...

[trotters213]

A mon avis tu devrais y jeter un coup d'oeil et nous dire ce qu'il en ressort.

[navis84]

J'ai trouvé la raison d'un des problèmes.

Cela ne vient pas de la bordure, mais de la taille du texte de mon span qui agrandit le bloc.

Par contre, je ne comprends toujours pas pourquoi le texte du bloc 'page' n'est pas centré.

[Bisûnûrs]

Par contre, je ne comprends toujours pas pourquoi le texte du bloc 'page' n'est pas centré.

Parce que tu as un float:left.

[navis84]

Ah d'accord, mais n'y-a-t-il aucun moyen de centrer son texte ?

[Bisûnûrs]

En fait "Page(s) : 1 2 3 4 5" est centré, mais dans sa cellule. si tu augmentes la taille de sa cellule il se centre dedans.

Maintenant faut que tu donnes une taille à ton div. ^^

[Bisûnûrs]

Code :

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
17
18
19
20
21
22
23
<style>
   div.navigation_page {
      width:100%;
   }
 
   div.navigation_page div.precedente{
      float:left;
      width:20%;
      text-align:left;
   }
 
   div.navigation_page div.suivante{
      float:right;
      width:20%;
      text-align:right;
   }
 
   div.navigation_page div.page {
      float:left;
      text-align:center;
      width:60%;
   }	
</style>

[trotters213]

non ça change rien qu'il y ait un float:left, ça sert simplement à dire que ta div sera à gauche.
si tu as text-align:center ton texte devrait être centré.
Quand je te disais de regarder les bordures, ça n'était pas pour voir ça venait d'elles, c'était pour voir la largeur de tes cadres.
Essaie de faire comme ça :

Code :

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
div.navigation_page div.precedente{
	float:left;
	text-align:center;
	width:25%;
}
div.navigation_page div.suivante{
	float:right;
	text-align:center;
	width:25%;
}
 
div.navigation_page div.page {
	float:left;
	text-align:center;
	width:50%;
}

[navis84]

J'ai ajouté des tailles en pourcentage à tous mes sous-blocs et cela marche très bien. Merci beaucoup à vous deux !