argggggg je bloque sur des <li> e <ul> en css !!

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par wana, 17 Décembre 2007.

  1. wana
    wana WRInaute discret
    Inscrit:
    23 Octobre 2007
    Messages:
    80
    J'aime reçus:
    0
    Salut la communuaté !

    Merci d'avance de votre aide.
    Ce n'est pas dans mon habitude de venir demander mais là j'y suis depuis 2 h et je perds trop de temps et surtout trop de cheveux.... :lol:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    
    <style type="text/css">
    ul#tabnav {
        list-style-type: none;
        padding-bottom: 28px;
        border-bottom: 1px solid black;
        margin: 0px 2px 0px 2px;
    }
    
    ul#tabnav li {
        float: left;
        height: 28px;
    }
    
    ul#tabnav li.active {
        border-bottom: 1px solid #FF83BB;
        background-color: #FF83BB;
    }
    
    
    
    
    
    #tabnav a:hover {
        background: #FF83BB;
    }
    </style>
    </head>
    
    <body>
    
    <ul id="tabnav">
    <li> Salut 1 </li>
           <li> Salut 2 </li>
    	   <li> Salut 3 </li>
    </ul>
    
    </body>
    </html>
    
    Voilà... pour une fois c'est sous IE que ça marche, lol
    Mais sous FF le "Salut 1" est décalé vers la droite
    j'ai tout essayé... en vain, ce fichu "Salut 1" reste décalé vers la droite alors qu'il devrait être collé à gauche.

    Une âme charitable qui maîtrise le CSS pour m'aider ? ;)

    thx
     
  2. Victor BRITO
    Victor BRITO WRInaute occasionnel
    Inscrit:
    21 Décembre 2006
    Messages:
    332
    J'aime reçus:
    0
    Dans ta CSS, ul est superflu : #tabnav suffit largement pour sélectionner la liste en question. :wink:

    Essaie de supprimer les marges de tes li.
     
  3. wana
    wana WRInaute discret
    Inscrit:
    23 Octobre 2007
    Messages:
    80
    J'aime reçus:
    0
    Merci Victor

    Selon tes recommandations j'ai fait ceci :

    Code:
    <style type="text/css">
    #tabnav {
        list-style-type: none;
        padding-bottom: 28px;
        border-bottom: 1px solid black;
    }
    
    #tabnav li {
        float: left;
        height: 28px;
    }
    
    #tabnav li.active {
        border-bottom: 1px solid #FF83BB;
        background-color: #FF83BB;
    }
    
    
    
    
    
    #tabnav a:hover {
        background: #FF83BB;
    }
    </style>
    ... mais rien à faire... sous FF le "Salut1" est décalé vers la droite
    Sous IE ça marche bien, le Salut1 est à gauche et commence au même endroit que le trait noir du dessous.
    Sous FF j'aimerais que le texte commence au même niveau que le trait noir :/
     
  4. Victor BRITO
    Victor BRITO WRInaute occasionnel
    Inscrit:
    21 Décembre 2006
    Messages:
    332
    J'aime reçus:
    0
    Définis une hauteur à #tabnav.
     
  5. wana
    wana WRInaute discret
    Inscrit:
    23 Octobre 2007
    Messages:
    80
    J'aime reçus:
    0
    :/ aucun changement même en faisant une hauteur.

    Je crois qu'en fait le soucis c'est que FF fait un retrait droit sur le premier "Salut1" car c'est une liste
    Donc comment empêcher que FF fasse ce retrait ?
    si c bien ça le soucis...

    Merci
     
  6. Victor BRITO
    Victor BRITO WRInaute occasionnel
    Inscrit:
    21 Décembre 2006
    Messages:
    332
    J'aime reçus:
    0
    Remplace list-style-type par list-style tout court et supprime les marges de tes li.
     
  7. wana
    wana WRInaute discret
    Inscrit:
    23 Octobre 2007
    Messages:
    80
    J'aime reçus:
    0
    Toujours pareil, ça marche sous IE mais pas FF
    le texte est toujours décalé vers la droite ! je vais devenir chèvre

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Document sans nom</title>
    
    <style type="text/css">
    #tabnav {
    list-style:none;
        padding-bottom: 28px;
        border-bottom: 1px solid black;
    }
    
    #tabnav li {
        float: left;
        height: 28px;
    }
    
    #tabnav li.active {
        border-bottom: 1px solid #FF83BB;
        background-color: #FF83BB;
    }
    
    
    
    
    
    #tabnav a:hover {
        background: #FF83BB;
    }
    </style>
    </head>
    
    <body>
    
    <ul id="tabnav">
    <li> Salut 1 </li>
           <li> Salut 2 </li>
    	   <li> Salut 3 </li>
    </ul>
    
    </body>
    </html>
    
     
  8. darkjukka
    darkjukka WRInaute impliqué
    Inscrit:
    28 Avril 2007
    Messages:
    574
    J'aime reçus:
    0
    Code:
    #tabnav {
    list-style:none;
        padding-bottom: 28px;
        border-bottom: 1px solid black;
        padding-left: 0px;
    }
    Avec ce padding-left, le texte reste collé à gauche ;)
     
  9. Victor BRITO
    Victor BRITO WRInaute occasionnel
    Inscrit:
    21 Décembre 2006
    Messages:
    332
    J'aime reçus:
    0
    Un problème de marge interne. Corrige comme suit :
    Code:
    #tabnav {
    list-style:none;
        padding: 0 0 28px 0;
        border-bottom: 1px solid black;
    }
    En gros, tu n'as modifié que la marge interne inférieure, en laissant les autres à leur valeur par défaut, variable selon les navigateurs (FF, Opera et Safari, par exemple, définissent des padding à li, contrairement à IE). Un peu de lecture à ce sujet sur Alsacréations.

    Édition : grillé :p
     
  10. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 672
    J'aime reçus:
    0
    display:block ? sur tes li .. non?
    une url ca sera plus simple pour tester avec l'extension webdevelopper
     
  11. Victor BRITO
    Victor BRITO WRInaute occasionnel
    Inscrit:
    21 Décembre 2006
    Messages:
    332
    J'aime reçus:
    0
    Un display: block sur un élément li est quasi superflu (je dis quasi car, par défaut, cet élément reçoit un display: list-item dans la feuille de style des navigateurs, du moins si ces derniers s'inspirent de celle suggérée par le W3C). :wink:
     
  12. bproductiv
    bproductiv WRInaute accro
    Inscrit:
    27 Décembre 2004
    Messages:
    3 672
    J'aime reçus:
    0
    Le float left il sert a quoi en fait?? pour les mettre en ligne? alors met display:inline...
     
  13. Victor BRITO
    Victor BRITO WRInaute occasionnel
    Inscrit:
    21 Décembre 2006
    Messages:
    332
    J'aime reçus:
    0
    Si tu utilises display: inline, tu ne pourras définir ni hauteur, ni largeur, ni marges. Une autre solution consiste à utiliser display: inline-block, mais ça ne marchera ni sous IE ni sous FF (pour les versions antérieures à la 3).
     
  14. wana
    wana WRInaute discret
    Inscrit:
    23 Octobre 2007
    Messages:
    80
    J'aime reçus:
    0
    yessssss en définissant le padding left ça marche nickel !
    vous êtes vraiment des pros les gars
    spécial thx à Victor

    @++++++
     
Chargement...
Similar Threads - argggggg bloque <li> Forum Date
Impossible d'accéder à compte facebook (non bloqué pourtant) Facebook 1 Décembre 2022
Page signalée bloquée par ma Console Google Search Débuter en référencement 27 Novembre 2022
Mon forum se bloque a cause de la surcharge du CPU qui m'est alloué chez mon hébergeur URL Rewriting et .htaccess 13 Novembre 2022
Bloqués sur notre Stratégie de SEO Demandes d'avis et de conseils sur vos sites 30 Octobre 2022
Astuce Bloquer ip utilisateur actions étranges sur mon site Le café de WebRankInfo 13 Août 2022
robots.txt bloque l'accès à mon site par Google Débuter en référencement 7 Juillet 2022
Bots scrapers et impact SEO : comment les bloquer ? Crawl et indexation Google, sitemaps 21 Mai 2022
Problème : Google Crawl et Index des pages en No Index et bloqué par le robot.txt Crawl et indexation Google, sitemaps 26 Avril 2022
Bloquer les IP d'un pays Administration d'un site Web 4 Mars 2022
Le thread principal a été bloqué Google Analytics 23 Novembre 2021
suppression des pages bloquées par robots.txt Débuter en référencement 18 Octobre 2021
Transfert d'un .fr bloqué par l'hébergeur Noms de domaine et référencement 9 Mai 2021
Compte Twitter bloqué : cela peut vous arriver ! Twitter 25 Avril 2021
Comment bloquer à coup sûr l'indexation par les moteurs de recherche Crawl et indexation Google, sitemaps 7 Décembre 2020
Google me dit que ma page est bien indexée mais bloquée par robots.txt Crawl et indexation Google, sitemaps 25 Novembre 2020
Du nouveau chez Adsense? Mes ads ne sont plus bloquées par les AdBlockers! AdSense 21 Août 2020
Annonces bloqués systématiquement sur les articles populaires AdSense 5 Juillet 2020
Pourquoi Facebook bloque le partage de mon site ? Facebook 3 Juillet 2020
Amazon Partenaires : compte bloqué Monétisation d'un site web 13 Avril 2020
url bloquées du jour au lendemain Problèmes de référencement spécifiques à vos sites 16 Décembre 2019