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 :

Ecarts entre cellules d'un menu horizontal


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Webmarketer
    Inscrit en
    Mars 2011
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Webmarketer
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2011
    Messages : 14
    Par défaut Ecarts entre cellules d'un menu horizontal
    Bonjour à tous,

    Je suis actuellement en train de refaire le code d'un site sur lequel je travaille.
    La home page possède un menu horizontal de 9 éléments qui était auparavant une simple successions de :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <a href="blablabla">
         <img src="blablab"/>
    </a>
    Pour y apporter plus de stabilité, j'ai voulu tout mettre dans une liste horizontale :

    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
    <ul style="list-style-type: none;">
      <li style="display: inline; padding: 0; margin: 0;">
         <a href="blablabla">
         <img src="blablab"/>
         </a>
      </li>
     
      <li style="display: inline; padding: 0; margin: 0;">
         <a href="blablabla">
         <img src="blablab"/>
         </a>
      </li>
     
      .....9 fois....
        <li style="display: inline; padding: 0; margin: 0;">
         <a href="blablabla">
         <img src="blablab"/>
         </a>
      </li>
    </ul>
    Seulement, un petit espace entre les <li> subsiste encore et toujours.
    J'ai tout essayé (même les trucs les plus farfelus. Sait-on jamais...) : margin :0; margin: 0px; margin-left:0px; margin-right:0px.

    Cela est non seulement très moche, mais en plus le 9e élément de ma liste se retrouve sur la ligne suivante !

    Si quelqu'un pouvait me dire où je me trompe ou ce que j'oublie pour avoir des éléments de liste bien collés les uns aux autres, ce serait très sympa.

    Merci d'avance !

  2. #2
    Membre averti
    Homme Profil pro
    Webmarketer
    Inscrit en
    Mars 2011
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Webmarketer
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Mars 2011
    Messages : 14
    Par défaut
    La réponse est toute simple : les marges négatives ! (je ne savais pas que celà était possible)

    J'ai trouvé la réponse sur ce thread.

    En spécifiant des marges de -3px dans les styles de toutes mes <li>, ces dernières sont bien collées et le menu tient ainsi sur une ligne.

    Je laisse aux modérateurs le soin de supprimer cette discussion (qui finalement n'en était pas vraiment une), ou de la laisser en ligne.

    Merci

  3. #3
    Membre chevronné Avatar de nadox
    Homme Profil pro
    Développeur
    Inscrit en
    Février 2010
    Messages
    360
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2010
    Messages : 360
    Par défaut
    Bonjour,
    Qu'est ce que cela donne en ajoutant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
    * {
    padding: 0;
    margin: 0;
    }
    ???

    tes balises 'img' et 'a' peuvent décaler les balises 'li' si elles ont un margin...
    d'ailleurs pour être moins stricte, il faudrait plutôt :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
     
    li a,
    li img
    {
        padding: 0;
        margin: 0;
    }
    Les margin négatif me semble plutôt être la solution de dernier recours(pas forcément bien géré sur tout les navigateurs), donc pas nécessaire dans ce cas...

    Au fait : le style dans les balises HTML ne te gêne pas ?
    (il s'agit de revoir un code existant, donc peut-être que c'est aussi l'occasion d'y apporter un peu plus de propreté ?)

  4. #4
    Membre chevronné Avatar de nadox
    Homme Profil pro
    Développeur
    Inscrit en
    Février 2010
    Messages
    360
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : Développeur
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Février 2010
    Messages : 360
    Par défaut
    Oups, je n'avais pas lu le thread jusqu'au bout, mais toi non plus me semble-t-il....

    Citation Envoyé par c_s_s Voir le message
    Ok.

    Par défaut, les listes <li> sont des éléments de type block qui s'affichent les uns sous les autres.

    Pour que les listes s'affichent les unes à côté des autres, il y a deux solutions : utiliser un display:inline (c'est le cas ici) ou utiliser un float:left;

    Le petit "souci" avec l'utilisation de display:inline; c'est que l'affichage dans le navigateur prend en compte les retours à la ligne présents dans le code HTML.

    Concrètement qu'est ce que ça veut dire ?

    Avec ce code (celui présent actuellement), il y aura des marges entre les onglets :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <ul>
    	<li></li>
    	<li></li>
    	<li></li>
    </ul>
    Avec ce code, il n'y aura pas de marges entre les onglets :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <ul><li></li><li></li><li></li></ul>

Discussions similaires

  1. Redimensionnement des cellule d'un Menu
    Par Nicos77 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 01/12/2005, 15h32
  2. [CSS] Couleur et forme bordure entre cellules
    Par Trunks dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 10/05/2005, 14h19
  3. prob menu horizontal
    Par tinkye_winkye dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 25/01/2005, 11h19

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