Discussion :

[roudoudouduo]

Bonjour,
Voila je débute dans l'utilisation du éléments div et span.
Je voudrais que les éléments span soit également répartis sur ma ligne. Est-il possible de le faire sans utiliser un attribut width ? (par exemple demander à ce que les éléments soit répartis de manière homogène dans le div)

Code HTML :

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

1
2
3
4
5
6
 
<div class="div_w" >
	<span style="text-align: left">Nombre de résultat(s) : 20</span>
	<span style="text-align: center">Nombre de résultats par page</span>
	<span style="text-align: right" >Page 1/2</span>
</div>

Code CSS :

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

1
2
 
.div_w {width: 100%; font-family: Trebuchet MS, Verdana, Arial; font-size: 11px; color: #003366; background-color: #FFFFFF;}

[Bisûnûrs]

Code HTML :

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

1
2
3
4
5
<div class="div_w" >
   <div style="text-align: left;width:25%;float:left">Nombre de résultat(s) : 20</div>
   <div style="text-align: center;width:50%;float:left">Nombre de résultats par page</div>
   <div style="text-align: right;width:25%;float:right" >Page 1/2</div>
</div>

[wahou85]

Code HTML :

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

1
2
3
4
5
6
7
8
9
<style>
.div_w {width:100%; font-family: Trebuchet MS, Verdana, Arial; font-size: 11px; color: #003366; background-color: #FFFFFF;}
.elem_w {display:inline;float : left; text-align:center;}
</style>
<div class="div_w" >
	<div class="elem_w" width="33%">Nombre de résultat(s) : 20</div>
	<div class="elem_w" width="34%">Nombre de résultats par page</div>
	<div class="elem_w" width="33%">Page 1/2</div>
</div>

Grounf... le bisounours il va plus vite que moi.

Mais ma solution est mieux quand même

edit : code corrigé conformément aux conseils du w3c, heu non, de bisounours

[Bisûnûrs]

Mais ma solution est mieux quand même

Ah bon ?
Ton div conteneur fait 1024px, et si tu as affaire à un utilisateur qui a une petite résolution ?
Et tes div enfants font seulement 180px (180x3=540), que fais-tu de tes 1024-540=484px restants ?

Edit : Maintenant que tu as rajouté width:33%, pourquoi tu définis deux fois width ? Et jusqu'à preuve du contraire, 33x3 font 99 et non 100, donc tu auras 1% qui traine, et plus tu auras une grande résolutuion plus cet écart sera visible.

[wahou85]

Ah oui c'est vrai.

Tu as raison.

edit : Je me suis planté, je voulais mettre width à 33% et virer les 180 mais je suis allé trop vite

[roudoudouduo]

Merci de votre réponse je regarde vos solutions

[roudoudouduo]

Avec les méthodes proposés les <div> provoque des sauts de ligne : hors je veux que mes éléments soit alignés sur la même ligne. De plus j'aimerais une solution qui me permette d'ajouter des éléments sur la ligne sans toucher à la propriété width. (Un découpage automatique de ma ligne en portion égale en somme quelquesoit le nombre de morceau)

[Bisûnûrs]

Essaie de t'aider de cette page alors ... : http://www.cssplay.co.uk/menus/centered.html

[roudoudouduo]

Merci pour le lien que tu viens de me passer en tout cas la réponse n'est pas du tout évidente.

[roudoudouduo]

J'ai trouvé une premiere solution qui hélas ne supprime pas les width. Mais celle-ci ne fonctionne pas avec IE. (grrrrr)

[roudoudouduo]

Pour ceux qui serait interesse :
(IE bug quand on prend 100% il faut prendre 99 pour un affichage correct)

Code :

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

1
2
3
4
5
6
 
<div style="width: 750px" class="ligne">
	<span style="width: 33%; text-align: left">Nombre de résultat(s) : <?php echo $result_count['count(*)']; ?></span>
	<span style="width: 33%; text-align: center">Nombre de résultats par page</span>
	<span style="width: 33%; text-align: right">Page <?php echo (($Display_Start/$Display_Nbrow)+1) ?>/<?php echo $nb_page;  ?></span>
</div>

Le css

Code :

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

1
2
3
4
5
6
7
8
 
.ligne {
  display: table;
}
 
.ligne span{
	display: table-cell;
}

Et voila