Discussion :

[tim1789]

Bonjour
Je suis en train de sécher sur une mise en page qui pourtant semble simple. Sur une page, je veux afficher une succession de boîtes (class equipement) comportant un titre, une image avec un renvoi href et un texte si il existe. Titre, image et texte sont affichés en block, c'est à dire l'un en dessous de l'autre. Je souhaite que chaque boîte soit affichée en ligne jusqu'en fin de ligne, puis sur une ligne suivante.
Voici la portion de code php et css :

Code :

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

1
2
3
4
<style type="text/css">
.equipement{display:inline-block;width:21%;height:390px;padding:5px;margin:2px;}
.titre_article{height:50px;}
</style>

Code php :

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

1
2
3
4
5
6
7
8
9
<?php
foreach($equipement['titre'] as $key=>$valeur){
        echo '<div class="equipement">';
                echo '<h2>'.$equipement["titre"][$key].'</h2>';
                echo '<h3>'.$us.'</h3>';
                echo '<br><a href="'.BASE.'article/'.$equipement['id_article'][$key].'/'.$equipement["titre"][$key].'"><img  src="'.$equipement['photo'][$key].'" width="180" height="180"></a>';
                iecho '<br>'.$equipement['texte'][$key]; 
        echo '</div>';
 }?>

La page a une largeur imposée de 1024.
Avec les tailles d'image et de div, j'obtiens des lignes de 4 articles cote à cote, comme je le désire.
Si le texte est identique pour chaque boîte, l'alignement vertical et horizontal des boites est parfait.
Malheureusement, le texte est bien sur différent pour chaque article. Cette différence entraîne des écarts d'alignement vertical de mes boîtes bien que les dimensions des boîtes restent strictement identiques.
J'ai tenté d'enfermer ce texte dans une div de hauteur imposée mais mes boîtes se baladent toujours en vertical. Le source de la page ne montre aucune anomalie. J'ai également tenté de les mettre en liste pour le même résultat. Si le texte est le même ou n'existe pas, l'alignement est parfait en horizontal et vertical. Sinon, les dimensions de mes boîtes sont toujours identiques, elles sont parfaitement en colonne, mais elles ondulent dans ma page. Pourquoi et que faire ?

[malgache]

Bonjour,

Il est possible d'avoir un aperçu du rendu? (image ou url pour voir le rendu sur navigateur)

[tim1789]

Voila une copie d'une partie de l'écran

[NoSmoking]

Bonjour,
un petit float:left devrait faire l'affaire.

Question pourquoi mettre une width:21% quand la largeur du conteneur est fixée( 1024px)?

[tim1789]

Dans la page principale, il y a des padding, il y en a aussi dans la div equipement avec des marges. La largeur de 21 % permet de centrer approximativement l'ensemble des 4 colonnes dans ma page.

[malgache]

Avec le float:left comme le dit NoSmoking ça arrange pas?

T'as essayé de voir avec firebug si t'as pas une padding ou margin en plus sur les fameuses div qui sont décalées?