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

HTML Discussion :

Mettre sur une ligne sans <table>


Sujet :

HTML

  1. #1
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut Mettre sur une ligne sans <table>
    Bonjour j'ai un problème d'alignement ... voici le code HTML

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    <table class="ligneDOUBLE">
     
            <tr> 
              <td>abc</td>
              <td> def</td>
              <td>ghi</td>
            </tr>
     </table>
    ceci affiche abcdefghi sur une ligne.

    Je voudrai savoir s'il serai possible de faire pareil mais avec un div .

    Si oui, pouvez vous m'aidez svp

    Voilà ce que j'avais fait avec un div
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    .ligneDOUBLE
    {
    border-collapse:collapse; /* Remplace : cellpadding="0" cellspacing="0"*/
    border:0;
    background-color:yellow;
    }
    Mais cela m'afficher
    abc
    def
    ghi

    MErci d'avance
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  2. #2
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    Bonjour,
    si cela s'affiche avec un retour chariot avant et aprés les lettres c'est que tu as encapsulé tes lettres dans un p li ... ou ajouté un br.

    Avant de te répondre, pourrais tu nous dire ce que tu souhaites faire (que représente ces lettres et dans quel contexte elle s'affichent)

  3. #3
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut
    Merci d'avoir répondu,

    Ces lettres représente un exemple avant l'application à mon projet de stage.

    Elle ne sont encapsuler dans rien ...

    Hormis le body dont voici le code css

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6,img,a,ul,li, table
    {  
      margin:0 0 0 0;  
      padding:0 0 0 0;
     }
    Ces lettres vont s'appliquer pour un nom de domaine .mobi et comme les téléphones supporte mal les <table> je voudrai si possible les mettres dans un div ou autres ...

    Cordialement
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  4. #4
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    devrait convenir.
    Une div (division) n'est pas faite pour déterminer un morceau de texte mais pour diviser ton document en plusieurs blocs (fonctionnels le plus souvent) >
    header, footer, content...

  5. #5
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut
    Il me met quand même des retour chariots ...

    Le <div class=""> N'est pas fait exprès pour faire des blocs dans "les sous code"?

    Cordialement
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  6. #6
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    Citation Envoyé par Epica84 Voir le message
    Il me met quand même des retour chariots ...
    C'est pas normal.
    As tu des retours chariot à l'intérieur de ton code?
    Une page en ligne permettrait d'identifier plus facilement le problème

    Citation Envoyé par Epica84 Voir le message
    Le <div class=""> N'est pas fait exprès pour faire des blocs dans "les sous code"?
    Je ne sais pas ce que tu entends par "sous code".
    Tu dois utiliser autant que nécessaire des éléments sémantiques (p,q, blockquote, ul....) pour caractériser un contenu, les éléments génériques (div et span) ne le permettent pas. Comme je te l'ai dis, tu dois t'en servir pour diviser ta structure en plusieurs blocs fonctionnels ou éventuellement comme réceptacle à l'application d'une règle de style CSS quand le "stylage" des éléments sémantiques ne permet pas d'aboutir à l'affichage que tu souhaites obtenir.

  7. #7
    Membre émérite
    Avatar de polymorphisme
    Homme Profil pro
    Publishing
    Inscrit en
    octobre 2009
    Messages
    1 460
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Publishing
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : octobre 2009
    Messages : 1 460
    Points : 2 371
    Points
    2 371
    Par défaut
    Bonjour,

    il n'existe pas de notion sous-code en (X)HTML ou CSS.

    De plus, on utilisera de préférence des ids aux classes pour partitionner une page, vu qu'un élément div n'est utilisé qu'une fois.
    Article : Installation de Cocoon
    Je ne réponds pas aux MP à caractère technique.

  8. #8
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    Citation Envoyé par polymorphisme Voir le message
    De plus, on utilisera de préférence des ids aux classes pour partitionner une page, vu qu'un élément div n'est utilisé qu'une fois.
    Je doute qu'il comprenne bien. Ce qu'il faut surtout préciser c'est qu'un ID ne s'applique qu'à un seul élément (il ne peut pas y avoir deux fois le même id dans un document) alors qu'une même classe peut s'appliquer à plusieurs éléments dans le doc.

  9. #9
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    mars 2010
    Messages
    58
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : mars 2010
    Messages : 58
    Points : 108
    Points
    108
    Par défaut
    Salut

    si j'ai bien saisi ton problème, tu veux mettre "abc", "def", ... sur une seule ligne avec des balises <div> ?

    Et pourquoi pas la propriété float ? Ça devrait donner quelque chose dans ce genre là :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    .ligneDOUBLE
    {
        float: left;
        width: 33%;
    }
     
    ...
     
    <div class="ligneDOUBLE>abc</div> ...
    La largeur du bloc en pourcentage est à adapter selon le nombre d'éléments dans la ligne :

    2 éléments -> 50%
    3 éléments -> 33%
    4 éléments -> 25%
    ...

    Sinon, si tu n'as que du texte, utilise plutôt une liste <ul>, avec comme propriétés css :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    {
        display: inline;
        list-style-type: none;
    }

  10. #10
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut
    Bonjour je reviens ici pour vous annoncez que je n'y suis toujours pas arriver ....

    j'ai essayer le code proposer par guilhem91 mais marche toujours pas

    voici le code complet (css et html)
    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
     
    .puceG
    {    
    float: left;
    width: 10%;
    }
     
    .puceD
    {
    float: right;
    width: 10%;
    }
     
    .donnee
    {
    float: center;
    width: 80%;
    }
     
    .ligneDOUBLE {
    	border-top: 1px solid #CCCCCC;
    	border-right: none #FFFFFF;
    	border-bottom: 1px solid #CCCCCC;
    	border-left: none #FFFFFF;
    }
    Et

    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
     
     
    <html>
     
    	<head>
    	<link href="aide.css" rel="stylesheet" type="text/css">
    	</head>
     
    	<body>
    		<div class="ligneDOUBLE">
    			<div class="puceG">abcd</div>
    			<div class="donnee">efgh</div>
    			<div class="puceD">ijkl</div>
    		</div>
    	</body>
    </html>
    Vous pouvez constaté qu'il y a toujours un retour chariot ...

    Merci d'avance de votre aide
    Et merci de l'aide déjà proposer
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  11. #11
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    Bonjour,
    si on s'en tient au code HTML c'est normal, tu insères tes lettres dans un div (qui sont des élément de niveau block, c-a-d qu'ils génèrent ce qu'on appelle une boîte de bloc avec retour chariot avant et après l'élément)
    Tu dois le baliser avec un élément inline (en-ligne et sans retour chariot donc) générique:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <p class="ligneDOUBLE">
    			<span class="puceG">abcd</span>
    			<span class="donnee">efgh</span>
    			<span class="puceD">ijkl</span>
    		</p
    N'oublie pas de supprimer les float et déclarer un Dotcype au haut de ton document

  12. #12
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut
    Citation Envoyé par Erwan31 Voir le message
    Bonjour,
    si on s'en tient au code HTML c'est normal, tu insères tes lettres dans un div (qui sont des élément de niveau block, c-a-d qu'ils génèrent ce qu'on appelle une boîte de bloc avec retour chariot avant et après l'élément)
    Tu dois le baliser avec un élément inline (en-ligne et sans retour chariot donc) générique:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <p class="ligneDOUBLE">
    			<span class="puceG">abcd</span>
    			<span class="donnee">efgh</span>
    			<span class="puceD">ijkl</span>
    		</p
    N'oublie pas de supprimer les float et déclarer un Dotcype au haut de ton document
    Merci de votre réponse si rapide .


    Effectivement sa reste sur la même ligne mis ne respecte plus les % ... Une idée de la raison ?

    Merci d'avance
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  13. #13
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    Ah ok oui désolé je n'en ai pas tendu compte.
    Dans ce cas on va revenir au point de départ

    Tu ne peux pas dimensionner des élément inline comme les span...
    Il fat d'abord en faire une boite de bloc pour cela (via un display:block).

    Donc tu peux conserver le float (qui fait passer la valeur calculé du display:inline des span à block) mais pour le retour à la ligne je ne peux pas savoir d'ou ça vient avec si peu de code.
    Tu dois fournir la totalité des codes ou mieux une page en ligne.

  14. #14
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut
    Merci de prendre soin de me répondre

    Voici la version en ligne
    http://www.numerimages.mobi/swan/aide.php

    J'enlèverai le lien dès que le problème sera résolu

    MeRci encore de l'aide fourni
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

  15. #15
    Membre émérite Avatar de Erwan31
    Profil pro
    Inscrit en
    février 2008
    Messages
    2 177
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : février 2008
    Messages : 2 177
    Points : 2 395
    Points
    2 395
    Par défaut
    Tu as oublié de déclarer le doctype (en haut du code) ce qui faisait basculer les navigateurs graphique en mode non standard...
    Mais sinon il n'y avait aucun problème.
    N'oublie pas de préciser le titre (obligatoire) et le langage de ton doc ( <html lang="fr"> et <meta http-equiv="Content-Language" content="fr" /> )
    La quasi totalité des attributs de présentation (width, hspace...)doivent être traduit en règle de style CSS sinon c'est invalide, réduit l'accessibilité et les perf, alourdit ton code HTML etc.
    Mieux vaut éviter un % à 100% au total...
    Overflow:hidden et height:1% permettent au conteneur d'englober ses enfants flottant.


    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
    32
    33
    34
    35
    36
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
    <title>...</title>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="Content-Language" content="fr" />
    <link href="aidphp_fichiers/aide.css" rel="stylesheet" type="text/css" media="all">
    <style type="text/css" media="all">
    <!--
    .puceG {
    	float:left;
    	width: 9%;
    }
    .puceD {
    	float:left;
    	width: 9%;
    }
    .donnee {
    	float:left;
    	width: 78%;
    }
    .ligneDOUBLE {
    	border-top: 1px solid #CCC;
    	border-bottom: 1px solid #CCC;
    	overflow:hidden;
    	height:1% /*IE6*/
    }
    -->
    </style>
    </head>
    <body>
    	<p class="ligneDOUBLE"> 
    		<span class="puceG">abcd</span> <span class="donnee">efgh</span> <span class="puceD">ijkl</span> 
    	</p>
    </body>
    </html>

  16. #16
    Membre habitué Avatar de Epica84
    Profil pro
    Étudiant
    Inscrit en
    décembre 2008
    Messages
    164
    Détails du profil
    Informations personnelles :
    Âge : 31
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : décembre 2008
    Messages : 164
    Points : 187
    Points
    187
    Par défaut
    Merci pour cette aide précieuse

    Résolu
    ARLES, du 02 au 05 Avril 2010, Féria de Pâques.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 23
    Dernier message: 23/03/2009, 16h38
  2. [fonction] mettre sur une ligne
    Par nicerico dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 26/09/2007, 12h41
  3. comment se positionner sur une ligne de table mysql ?
    Par pas30 dans le forum Requêtes
    Réponses: 3
    Dernier message: 13/01/2007, 13h43
  4. Mettre plusieurs enrégistrement sur une ligne
    Par royrremi dans le forum MS SQL Server
    Réponses: 1
    Dernier message: 20/01/2006, 07h41
  5. Comment mettre à jour une ligne sans doublon via déclencheur
    Par fuelcontact dans le forum MS SQL Server
    Réponses: 2
    Dernier message: 02/08/2004, 15h56

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