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 :

une question sur le cadre css


Sujet :

CSS

  1. #1
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut une question sur le cadre css
    bonjours,
    sur cette page : http://leprojet.legtux.org/membre-equipe.html

    j'ai mis ça comme code :

    Code html : 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
    <div class="clearMembres">
    pseudo
    <br />
    mon groupe
    <br />
    mon avatar
    <br>
    prénom : will
    <br >
    Age : 37 ans
    <br />
    ville : chez moi
    <br>
    Inscription : 18/05/2012
    <br>
    Dérniere visite : 15/06/2012
    </div>

    et le css :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     .clearMembres
    {
    display:inline-table;
    width:243px;
    height:200px;
    border:1px solid #000000;
    }

    et on regarde cette page : http://leprojet.legtux.org/membre-liste.html
    on voit que c'est le même code html et css que l'équipe mais dans la page liste membre il ne met pas l'espace entre les cadres

    mais si j'ajoutes un margin 1px dans la page liste membre là c'est bon mais par contre dans la page avec le margin 1px le cadre part en sous

    pour quoi le cadre est différent malgrer c'est le même css et html

    car ça éviterais de faire 15 css pour faire le même cadre

    si vous avez une solution

    merci de votre aide

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

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

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Points : 3 861
    Points
    3 861
    Billets dans le blog
    6
    Par défaut
    D'après moi, la différence de rendu vient du codage html.

    Pour "membre-liste", vous avez:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <!-- fin texte div.clearMembres-->
    </div><div class="clearMembres">
    <!-- début texte div.clearMembres-->
    Et donc aucun espace entre les DIV.

    Pour "membre-equipe", vous avez:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <!-- fin texte div.clearMembres-->
    </div>
    	<div class="clearMembres">
    <!-- début texte div.clearMembres-->
    Et donc un espace entre les DIV (d'où la marge).

    PS: Il faut écrire «Dernière visite», et vous pourriez utiliser une liste de définition (DL) plutôt que des BR partout.

  3. #3
    Invité
    Invité(e)
    Par défaut
    Salut,

    Si tu fais comme ci-dessous, ça fonctionne :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    .clearMembres {
        display:block;
        float:left;
        margin 0;
        width:243px;
        height:200px;
        border:1px solid #000000;
    }

  4. #4
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    Merci, ça fonctionne.

    sinon j'ai quelqu'un qui a dit de supprimer les <field>et legend car c'est pour juste les formulaires

    sinon une autre petite question j'ai mis ça pour faire espace

    &nbsp;&nbsp;&nbsp;&nbsp;
    pour les commentaires je sais qu je peut mettre 3 cadres

    1 pour avatar et un pour les messages posté et le dernier c'est pour mettre des bouton supprimer et éditer

    mais en sachant que j'utilise la même class pour faire pareil mais sans les bouton éditer citer etc...

    je me suis dit au lieu de faire 3 class commenter commentaire donc je me suis dit je vais mettre 2 cadre qui st par tout t ceux qui est avec des bouttons citer je met des &nbsp;&nbsp;&nbsp;&nbsp;

    es e que gene de mettre des espace ou bien il faut mettre un 3 éme cadre

    et es ce que c'est vraiment genant les <fieldset><legend> par tout dans le site

    en tout cas je vous remercie de votre aide

  5. #5
    Invité
    Invité(e)
    Par défaut
    J'aimerais bien t'aider plus, mais je ne comprends pas ce que tu écris...
    Fais des efforts dans ta rédaction de phrases s'il te plait car là vraiment je n'ai rien comprit à ton problème

  6. #6
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    j'ai mis partout dans le site des <fieldset><legend> car pour moi ça fait plus beau

    et il y a une personne sur le site zero qui a dit de les supprimer car ça c'est juste pour les formulaire et non pour les titre etc.

    et l'autre question voilà le code si ca t'aide :


    Code php : 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
    $str .= '<div class="commentaire_poster">
    	 <div class="avatar_commentaire">'
    	 .sex2color(id2pseudo($v['user_id']),$v['user_id']).'
    	  '. GetAvatarById($v['user_id']) . '
    	  <div class="titresInformation">Pr&eacute;nom :</div> '.GetPrenomById($v['user_id']).'<hr />
    	  <div class="titresInformation">&Acirc;ge :</div> '.GetAgeById($v['user_id']).'<hr />
    	  <div class="titresInformation">Ville :</div> '.GetVilleById(GetValueFromQuery('SELECT membre_departement as value FROM forum_membres WHERE membre_id = '.$v['user_id'])).'<hr />
    	 </div>';
     
    	 if($id == $_SESSION['id'])
    {
    $flag = true;
    $check = '<span> <input name="del_c_'.$v['membre_commentaire_id'].'" type="checkBox" value="del_'
    		.$v['membre_commentaire_id'].'" /></span>';
    }
     
    	 $str .= '<div class="message_commentaire">
     
    	 Posté le '. ReformatDate($v['date']). '&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    	 '.($flag?($check.' '):'').'<br />'.code(nl2br($v['commentaire'])).'</div></div>'.(++$k<$q->rowCount()?'':'');


    j'ai mis ça pour faire des espace pour le bouton supprimer

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    .....
    mais sur les autre page je n'ai pas mis des espaces car je n'ai pas de boutton supprimer donc je me suis dis je vais mettre des espace au lieu de faire 15 css

    merci d'avance et après ca sera bon

  7. #7
    Invité
    Invité(e)
    Par défaut
    Euh.. Ce n'est pas très propre de coder ainsi.

    Il faut que tu évites au maximum d'utiliser ce genre de pratiques. Certes cela n'a pas de conséquences mais c'est franchement pas top

    Il faut faire en sorte que tes éléments soient séparés par des margin.

  8. #8
    Expert confirmé
    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
    Points : 5 443
    Points
    5 443

  9. #9
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    ok merci de ton aide

    et sinon pour des <fieldset><legend> ca fait beau ou pas du tout

    ou je dois les supprimer et remplacer par des cadres

  10. #10
    Invité
    Invité(e)
    Par défaut
    span="texte_droite
    A quoi c'est sensé correspondre ?


    Concernant les <fieldset> et <legend>, perso je les utilise pour l'apparence et je n'ai jamais eu de souci. Après peut-être que dans les bonnes pratiques ils ne sont utilisés que pour les formulaires ; on ne m'en a jamais fait part.

  11. #11
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    132
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Juillet 2009
    Messages : 132
    Points : 283
    Points
    283
    Par défaut
    Bonjour,

    Citation Envoyé par mario94 Voir le message
    j'ai mis partout dans le site des <fieldset><legend> car pour moi ça fait plus beau
    C'est un mauvais raisonnement. Le choix des balises HTML ne doit pas se faire en fonction de ce qui est beau ou pas beau, mais en fonction de leur sémantique. Un fieldset est fait pour regrouper des éléments dans un formulaire. Si ce n'est pas le cas ici, alors n'utilise pas de fieldset.

    Pareil pour l'ajout d'espaces insécables, ne les mets pas le HTML pour que ce soit plus beau. C'est le rôle du CSS de définir le style, la mise en page (à nuancer bien sûr, parfois l'ajout de classes ou de blocs dans le HTML est nécessaire).

    Plutôt que de rendre ton code HTML illisible avec des &nbsp;, assigne des identifiants ou classes aux éléments que tu souhaites positionner correctement, et appliques une valeur appropriée à la propriété margin des sélecteurs CSS correspondants. Ce sera, comme l'a dit Croconino, bien plus propre.

  12. #12
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    lui ds le site il met tout les cadres avec des field

    http://www.amiez.org/Accueil.php

    et on lui dit rien a lui mdr

  13. #13
    Invité
    Invité(e)
    Par défaut
    Ah d'accord JérémieL, et bien j'apprends quelque-chose par la même occasion car j'utilise très couramment les <fieldset> car ils permettent d'intégrer un <legend> de manière très simple en "chevauchant" le <fieldset> sur le border supérieur.

  14. #14
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    je vais remettre les cadres titre normal et supprimer le <field>

    si c mieu pour code

    merci

  15. #15
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    132
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Juillet 2009
    Messages : 132
    Points : 283
    Points
    283
    Par défaut
    Citation Envoyé par Croconino Voir le message
    Ah d'accord JérémieL, et bien j'apprends quelque-chose par la même occasion car j'utilise très couramment les <fieldset> car ils permettent d'intégrer un <legend> de manière très simple en "chevauchant" le <fieldset> sur le border supérieur.
    Oui, mais il est possible de faire autrement, avec un div et un heading (h2, h3...) et un peu de CSS.

    Je cite les spécifications du HTML5 :
    The fieldset element represents a set of form controls optionally grouped under a common name.

  16. #16
    Invité
    Invité(e)
    Par défaut
    Ça marche, je te remercie !

  17. #17
    Inactif
    Profil pro
    Inscrit en
    Septembre 2010
    Messages
    164
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2010
    Messages : 164
    Points : 0
    Points
    0
    Par défaut
    on peut mettre un div cadre comme si c une legend

    tu peux me donné un exemlple

    je t'en remercie

  18. #18
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 075
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 075
    Points : 44 657
    Points
    44 657
    Par défaut
    Bonjour,
    Citation Envoyé par mario94;
    lui ds le site il met tout les cadres avec des field
    http://www.amiez.org/Accueil.php

    et on lui dit rien a lui mdr
    et en plus que de TABLE, on ne dit rien car il n'est pas passé sur le Forum

    Citation Envoyé par mario94
    on peut mettre un div cadre comme si c une legend
    tu peux me donné un exemlple
    exemple succint :
    Code html : 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
    37
    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <title>Imitation FIEDLSET</title>
    <meta name="Author" content="NoSmoking">
    <style>
    body{
      margin:2em;
      font-family:Verdana;
      font-size:100%;
    }
    .fieldset{
      position:relative;
      padding:1em 0.5em 0.5em;
      border:1px solid #88F;
      border-radius:5px;
    }
    .fieldset h2{
      position:absolute;
      font-weight:normal;
      font-size:1.5em;
      margin:-1.25em 0 0;
      padding:0em 1em;
      background:#EEF;
      border:1px solid #88F;
    }
    </style>
    </head>
    <body>
    <div class="fieldset">
      <h2>Le titre</h2>
      Le texte qui suit.
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
    </div>
    </body>
    </html>

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

Discussions similaires

  1. Réponses: 2
    Dernier message: 22/04/2006, 18h18
  2. une question sur les includes comportement bizard
    Par e-m.guillaume dans le forum Langage
    Réponses: 2
    Dernier message: 24/02/2006, 21h12
  3. une question sur le code ASP-Nuke
    Par ghita269 dans le forum ASP
    Réponses: 1
    Dernier message: 14/01/2006, 09h41
  4. Une question sur le wap
    Par fabiofabio dans le forum Langages de programmation
    Réponses: 6
    Dernier message: 19/11/2005, 16h24
  5. Encore une question sur malloc
    Par IG88 dans le forum C
    Réponses: 5
    Dernier message: 23/06/2004, 15h35

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