IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

inline-block dans tableau


Sujet :

Tableau en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    120
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2005
    Messages : 120
    Par défaut Tableau - Largeur 1% -> nowrap ne fonctionne plus !
    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 !

  2. #2
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    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.

  3. #3
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    120
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2005
    Messages : 120
    Par défaut
    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...

  4. #4
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    120
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2005
    Messages : 120
    Par défaut inline-block dans tableau
    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 !

  5. #5
    Membre confirmé
    Femme Profil pro
    Elève Ingénieur à l'ENSIAS
    Inscrit en
    Février 2013
    Messages
    66
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Elève Ingénieur à l'ENSIAS

    Informations forums :
    Inscription : Février 2013
    Messages : 66
    Par défaut
    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

  6. #6
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    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.

  7. #7
    Invité
    Invité(e)
    Par défaut
    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.
    Citation Envoyé par poitierjohan Voir le message
    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;
    }
    Dernière modification par Invité ; 28/08/2013 à 09h02.

  8. #8
    Membre confirmé
    Profil pro
    Inscrit en
    Mars 2005
    Messages
    120
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2005
    Messages : 120
    Par défaut
    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
    Images attachées Images attachées  

Discussions similaires

  1. [CSS 3] Positionement CSS3 sans tableau inline-block
    Par e-toon dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 16/10/2013, 19h47
  2. [langage] Suppression de doublon dans tableau
    Par LFC dans le forum Langage
    Réponses: 5
    Dernier message: 15/04/2004, 14h08
  3. [langage] tri dans tableau de hachage
    Par mimilou dans le forum Langage
    Réponses: 2
    Dernier message: 10/03/2004, 16h10
  4. pb de coord de tex dans tableau avec multitex
    Par sebh dans le forum OpenGL
    Réponses: 3
    Dernier message: 25/01/2004, 21h36
  5. [langage] Extraire un block dans une variable multiligne
    Par |DUCATI| DesMo dans le forum Langage
    Réponses: 9
    Dernier message: 11/02/2003, 14h56

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo