[Résolu] 3 blocs alignés

Bonjour,

je dispose d'un bloc conteneur (navigation_page), avec 3 blocs que je souhaiterais aligner.

Voici mon code CSS :

	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;
	}

Et voici mon code HTML :

<div class="navigation_page">
	<div class="precedente">
		Précédent
	</div> 
	
	<div class="page">
		Page(s) : <a href="">1</a> <span style="margin-left: 0px; font-weight: bold; font-size: 1.2em;">2</span> 3 4 5
	</div>

	<div class="suivante">
      Suivante
	</div>
</div>

Or, j'ai les deux problèmes suivants concernant le bloc "page" :
- Son contenu n'est pas centré
- Le texte est légèrement en dessous du texte des autres blocs.

Merci d'avance pour votre aide.
@+
Modifié par CyberKate (19 Sep 2006 - 10:32)

Je viens de résoudre le problème de hauteur.
Cela est dû au span dont la police d'une partie du texte est plus grande.

Par contre, aucun moyen de centrer le texte du bloc 'page'. Auriez-vous une idée ?

Salut,

Concernant ton problème de centrage d'élément, je te suggère tout simplement d'affecter à ton div central une marge gauche. Comme par exemple ceci :

div.navigation_page div.page {
	float:left;
	margin-left:15%;
}

L'élément étant aligné par la gauche, il te suffit simplement de le décaler en lui spécifiant une marge à gauche. A toi de voir la valeur qu'il faut pour obtenir le résultat escompté.

Tu peux également supprimer l'instruction text-align :center;

div.navigation_page {
	float:left;
}

Bonne continuation

Après quelques recherches, si l'on renseigne une largeur pour tous les sous-blocs (j'ai choisi en pourcentage), cela marche.

Merci de ton aide.

Bonjour,

La propriété text-align:center sur un bloc conteneur n'à aucun effet sur les flottants.
Un flottant est retiré du flux et repositionné le plus à gauche possible, les propriétés de son conteneur n'ont donc plus d'effet et seul compte la position du bord droit ou gauche qui sert de référence.

La solution de la marge gauche est inefficace car elle présuppose de connaitre à l'avance la dimension du contenu du bloc page.

Une solution parmis d'autres :

div.navigation_page {
		float:left;
		text-align: center;
	}
	div.navigation_page div.precedente{
		float:left;
	}
	div.navigation_page div.suivante{
		float:right;
	}

et

<div class="navigation_page">
	<div class="precedente">
		Précédent
	</div> 
	<div class="suivante">
      Suivante
	</div>
		Page(s) : <a href="">1</a> <span style="margin-left: 0px; font-weight: bold; font-size: 1.2em;">2</span> 3 4 5
</div>

En essayant, à y être, d'utiliser un balisage plus pertinent pour la liste des pages.

Jean-pierre

a écrit :
si l'on renseigne une largeur pour tous les sous-blocs (j'ai choisi en pourcentage), cela marche.

Cette solution à un inconvénient : Comme tu vas spécifier une largeur pour le bloc central, ton bloc de droite finiras par "déborder" de la zone d'affichage en cas d'aggrandissement des caractères et provoquera l'apparition d'un ascenceur horizontal.

La solution de positionner les flottans en amont du contenu évacue ce problème.

Jean-pierre

Merci beaucoup pour vos explications, avec lesquelles je comprends mieux comment faire. Je vais adopter votre méthode !
Modifié par CyberKate (19 Sep 2006 - 14:33)