Un décalage étrange.

Bonjour
Alors que j'essais de faire une liste de couple de bouton, je m’aperçoit que la taille du second bouton est mis a la même taille que celle du 1er il y a un décalage.

voila l'image de se que j’obtiens sans forcé la taille du bouton "supprimer"



voila quand je le force a la même taille




voila le code qui produit ceci

echo '<ul id="listeModeles" class="listModif">';
		while($donnees = $req->fetch()){
			echo "<li class='searchable' >";
			echo "<a ";
			echo " href='modifierModele?modele=".$donnees['modele']."' ";
			echo ">";
			echo $donnees['modele'] ;
			echo "</a>";
			echo "<a class='supprimer'";
			echo " href='supprimerModele.php?modele=".$donnees['modele']."' ";
			echo ">";
			echo "sizer";
			echo "</a>";
			echo "</li>";
		}
		echo '</ul>';

maintenant vous aurez pue remarqué le text "sizer" , si je l'enlève j'ai ceci :



la j'avou que je sèche, d'autemps plus que pour le CSS les deux bloc <a> sont en top : 0

Salut!

Tu peux pas nous mettre tous ça en ligne et nous donner un lien consultable?

Bonjour,

Le code que tu nous fourni ne sert à rien pour t'aider.

Pour faire ce que tu souhaites, il y a deux solutions :
1. Les colonnes factices.
2. L'utilisation de display:table et table-cell (pas supporté par tous les navigateurs).

@Laurie-Anne table-cell donne quasiment le même rendu :x , qu'es qu'il vous faudrais pour arrivé a m'aider?

@94bri37 le site et déjà en ligne mais je ne pré faire pas divulgué les mot de passe sur un forum

Euh le code HTML généré et le CSS ?

<li class="searchable" style="display: table;">
      <a href="modifierModele?modele=Pompe recirculation NEP" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-secondary" role="button">
          <span class="ui-button-text">Pompe recirculation NEP</span>
          <span class="ui-button-icon-secondary ui-icon ui-icon-triangle-1-e"></span>
      </a>
      <a class="supprimer ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only" href="supprimerModele.php?modele=Pompe recirculation NEP" role="button" title="sizer">
           <span class="ui-button-text">sizer</span>
           <span class="ui-button-icon-secondary ui-icon ui-icon-trash"></span>
       </a>
</li>

pour le css par balise

li

 display : list-item;

pour le 1er lien

display: inline-block;
position: relative;
padding: 0;
margin-right: .1em;
text-decoration: none !important;
cursor: pointer;
text-align: center;
zoom: 1;
overflow: visible;

pour le 1er span

padding: .4em 2.1em .4em 1em;

display: block;
line-height: 1.4;

le 2emme

font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
font-size: 1.1em;
text-align: center;

le 2emme lien

width: 15%;

display: inline-block;
position: relative;
padding: 0;
margin-right: .1em;
text-decoration: none !important;
cursor: pointer;
text-align: center;
zoom: 1;
overflow: visible;

height : 50px //set avec javaScript

on voie bien que le bouton "supprimer" est placé a la moiter du bouton "modifier", se ne serais pas un problème "base line" ou quelque chose comme ça?
Modifié par crakjie (12 Jul 2011 - 13:50)

Bon alors déja

display : list-item;

Je vois pas trop l'interet de repasser un élément list-item en... list-item.


Ensuite, je pense que tu devrais enlever tes 2 positions relative (celui du span et de l'ancre des 2 liens) et leur passer un height:100%, ainsi ton icone de poubelle fera la bonne taille sans passer par du javascript.


Pour ton soucis d'alignement, tu dois avoir en effet un line-height qui pose probleme (probablement sur le list item)
soit un br qui s'est glissé quelques part entre tes 2 boutons.

Pour voir tu test l'un apres l'autre, br{display:none;} et li, a, span{line-height:auto !important}
Modifié par ptitvincent (12 Jul 2011 - 15:44)