Discussion :

[poitierjohan]

Bonjour à tous,
Je rencontre un problème depuis vendredi alors que je n'ai touché à rien !
Subitement, mes tableau html dont certaines colonnes sont en largeur 1% avec la propriété nowrap active.
A l'affichage dans le navigateur, j'ai maintenant un saut de ligne !!!
La propriété nowrap ne fait pas sont effet.
Ca n'arrive que lorsque j'utilise des lien :

Code :

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

1
2
3
4
5
6
7
8
<table width="100%">
<tr>
<td nowrap="nowrap" width="1%"><b>1.</b></td>
<td nowrap="nowrap" width="1%"><a href="monlien.php">Supprimer</a><a href="monline2.php">Element à afficher</a>
</td>
<td width="98%" nowrap="nowrap">email du contact</td>
</tr>
</table

Jeudi, cela fonctionnait sans aucun problème ! Et depuis (il me semble qu'une mise à jour Google Chrome s'est faite)... problème...

Merci pour votre aide à tous !

[Muchos]

L'attribut NOWRAP a l'air daté de HTML 3.2 ! Je pense que c'est complètement dépassé.
Testez avec la propriété CSS WHITE-SPACE.

[poitierjohan]

Bonjour,
MErci pour la réponse, malheureusement mon problème reste identique.
Voici mon code issu de ma page :

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
31
<table width="100%" border="0" cellspacing="0" cellpadding="0" id="tbl_liste_avec_titre">
  <tr class="titre_tableau">
    <td width="1%" nowrap="nowrap"></td>
    <td width="1%"></td>
    <td width="29%">Date</td>
    <td width="69%">Titulaire</td>
  </tr>
	<?php
	$i=0;
	$res = mysql_query("SELECT * FROM programme WHERE ID_etablissement='".$_COOKIE['ID_etablissement']."' AND annee_scolaire='".$_COOKIE['annee_scolaire']."' AND titre!='' AND del='0000-00-00' ORDER BY dat DESC");
	while ($row = mysql_fetch_array($res))
		{
			$i++;
			?>
            <tr>
            <td width="1%" valign="middle" nowrap="nowrap"><strong><?php echo $i ?>.</strong></td>
            <td width="1%" valign="middle" style="white-space:nowrap;">
            	<div class="grouped">
<?php //LE PROBLEME EST ICI : CSS issu de http://adamwhitcroft.com/lab/css3-gmail-buttons/ ?>
               	  <a href="#" class="bttn red icon delete" onclick="javascript:return(confirm('Supprimer cet élément ?'));">Supprimer</a>
               	  <a href="#"" class="bttn blue icon print">Imprimer</a>
                  <a href="#" class="bttn yellow icon edit">TITRE</a>
              </div>
            </td>
            <td width="29%" valign="middle">DATE FROM MYSQL</td>
            <td width="69%" valign="middle">TITULAIRE FROM MYSQL</td>
            </tr>
            <?php
		}
	?>
</table>

Que ce soit avec white-space ou nowrap, l'un et l'autre ne fonctionne pas dans le <div class="grouped">...</div>
Les 3 liens <a href=""> sont sur 2 lignes !

Le css "grouped" a la propriété "display:inline-block;"

Merci...

[poitierjohan]

Le problème que les 2 liens <a href=""> ayant une class="bttn" soivent être sur une seule ligne dans ma colonne (width='1%").
Or depuis jeudi, ce n'est plus le cas. La propriété nowrap est appliquée. Sans succès.

Voici le code du tableau :
Bien entendu, il y d'autres colonnes faisant un total de largeur 100%...

Code html :

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

1
2
3
4
5
6
7
8
9
10
<table width="100%">
<tr>
<td width="1%" nowrap="nowrap">
<div class="grouped">
<a href="#" class="bttn">Texte</a>
<a href="#" class="bttn">Texte</a>
</div>
</td>
<tr>
</table>

Je précise que j'ai également essayer le CSS style="white-space:nowrap"... pas changement.
De plus, avec du texte normal, pas de saut ligne, le nowrap fonctionne normalement.

Voici le CSS "bttn" et "grouped"

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
.bttn {
	text-decoration: none;
	cursor: pointer;
	padding: 0 8px;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	display: inline-block;
	outline: 0;
	color: #000000;
	background-color: #f5f5f5;
	background-image: -webkit-linear-gradient(top,#f5f5f5,#f1f1f1);
	background-image: -moz-linear-gradient(top,#f5f5f5,#f1f1f1);
	background-image: linear-gradient(top,#f5f5f5,#f1f1f1);
	border: 1px solid #d9d9d9;
	border: 1px solid rgba(0,0,0,0.1);
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
 
.grouped {
	display:inline-block;
	list-style:none;
	padding:0;
	margin:0;
}

Merci pour votre aide précieuse !

[Afaf001]

Bonjour,
J'ai pas très bien saisi le problème. chez moi ton code marche bien, ça donne les 2 boutons sur la meme ligne, quoique ce soit la longueur du texte du bouton
Mais si par exemple, tu mets :

Code html :

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

1
2
<a href="#" class="bttn">Texte <br/> Texte</a>
<a href="#" class="bttn">Texte</a>

au lieu de 'Texte' tout court, bah c'est normal que tu vas pas les avoir sur la meme ligne, c'ext à cause de la propriété 'height' que t'as fixé à 30px. essaie un peu de l'enlever. tu auras peut etre tes boutons sur la meme ligne

[rodolphebrd]

Bonjour,

je ne vois pas le problème dans ce que vous énoncer.

Il manque certainement une partie du code.

Une page en ligne serait la bienvenue.

[Invité]

bonjour,
essaie sans passage à la ligne dans le code :

Code html :

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

<a href="#" class="bttn">Texte</a><a href="#" class="bttn">Texte</a>

Sinon, idem, je n'ai pas constaté ce problème.
nowrap="nowrap" semble faire son travail.

Bien entendu, il y d'autres colonnes faisant un total de largeur 100%...

Il faudrait nous montrer une ligne complète.

Aussi :

Code :

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

1
2
3
4
.grouped {
	padding:0;
	margin:0;
}

[poitierjohan]

Bonjour à tous,

Merci pour vos réponse, je vais voir ça tout de suite.

Je vous mets en pièce jointe une capture d'écran du résultat...
Je n'ai ce résultat sur 2 lignes QUE dans des tableaux !

Dès que j'ai essayé vos propositions, je reviens.

MErci