Aller au contenu

Problème de listes en inline...


sailorcarom

Sujets conseillés

Hello,

J'essais de mettre une liste en inline qui s'affiche comme ça :

Le point-virgule | Le deux-points | Les points de suspension | Le point d'interrogation |

Le point d'exclamation | Les guillemets | La virgule | Exercices supplémentaires |

<ironique>Grosse surprise !</ironique> ça marche pas sur Explorer !

<question ironique>Pourquoi les 2 avions sont pas tombés sur la tour à Bill Gate ?</question ironique>

Quand ça va sur plus qu'une ligne, celles qui suivent décalent d'une dizaines de px vers la gauche...

Le point-virgule | Le deux-points | Les points de suspension | Le point d'interrogation |

Le point d'exclamation | Les guillemets | La virgule | Exercices supplémentaires |

CSS :

ul.ul_tablematieres_h {
margin : 15px 0 5px -10px !important;
padding : 0;
clear : right;
}

ul.ul_tablematieres_h li {
list-style: none;
list-style-image : none;
list-style-type : none;
background-image : none;
display: inline;
border-right : solid 1px #003399;
padding: 0 12px 0 10px !important;
padding: 0 5px 0 10px;
}

Code :

<ul class="ul_tablematieres_h">
    <li><a href="#0">Le point-virgule</a></li>
    <li><a href="#1">Le deux-points</a></li>
    <li><a href="#2">Les points de suspension</a></li>
    <li><a href="#3">Le point d'interrogation</a></li>
    <li><a href="#4">Le point d'exclamation</a></li>
    <li><a href="#5">Les guillemets</a></li>
    <li><a href="#6">La virgule</a></li>
    <li><a href="#7">Exercices supplémentaires</a></li>
</ul>

Quelqu'un a-t'il la vérité incarné ???

Merci

Caro :flower:

Lien vers le commentaire
Partager sur d’autres sites

(vais-he pouvoir répondre cette fois ? erreurs de fichier non trouvé à chaque fois !)

C'est vrai que c'était l'ul, excuses ma stupidité.

C'est ton padding qui décale la première ligne :

padding: 0 12px 0 10px !important;

padding: 0 5px 0 10px;

Ces deux lignes sont contradictoires d'ailleurs...

Modifié par Desesperance
Lien vers le commentaire
Partager sur d’autres sites

La contradiction, c'est encore à cause d'IE

Quand on met !important à une ligne,

Tous les nouveaux navigateurs prenne lui, même si tu en met d'autre en dessous..

Tandis que les anciens navigateur... IE.... et lui-même...

Prend celui d'en dessous...

Je préfère cette solution à celle ou l'ont fait «planter» IE...

Ta solution est bonne (Je l'avais déjà trouvé...)

Mais elle apporte un autre problème :

ul.ul_tablematieres_h {
   /*margin : 15px 0 5px -10px !important;*/ /*avant*/
   margin : 15px 0 5px 0px !important;
   padding : 0;
}

ul.ul_tablematieres_h li {
   list-style: none;
   list-style-image : none;
   list-style-type : none;
   background-image : none;
   display: inline;
   border-right : solid 1px #003399;
   padding: 0 12px 0 10px !important;
   padding: 0 5px 0 10px;
   margin-left : -10px !important; /*Ça c'était pas là*/    
}

Les mots de droite sont collés contre les lignes à

gauche...

Le point-virgule |Le deux-points |Les points de suspension |Le point

d'interrogation

Là je suis en train d'essayer en ajoutant un background d'image :

background-image : url(/imgsite/img_ul_bleugouv.gif);
background-repeat : repeat-y;
background-position: right top;

Mais là pour une raison encore inconue de moi-même ;)

Ben quand il y a un changement de ligne automatique, ben l'image va se placer drette sur la fin du mot...

Donc j'aime pas full ça :P

C'est tu le fun se casser la tête pour des conneries !

Vive les boss qui veullent des desings pas fesable !

Merci

Caro :flower:

Lien vers le commentaire
Partager sur d’autres sites

Hello !

Finalement j'ai réussit à contourner le problème ^_^

Vu que le contenu de mes listes sont toujours des liens :

ul.ul_tablematieres_h {
margin : 15px 0 5px -10px !important;
margin : 15px 0 5px 0px;
padding : 0;
}

ul.ul_tablematieres_h li {
list-style: none;
list-style-image : none;
list-style-type : none;
background-image : none;
display: inline;
padding: 0 0 0 10px !important;
padding: 0 5px 0 0;
}

ul.ul_tablematieres_h li a {
white-space: nowrap;
border-right : solid 1px #003399;
padding-right: 10px;
}

J'applique la barre bleu sur le lien, comme ça plus de problème avec la satané liste :o)

Merci à tous !

Caro :flower:

Lien vers le commentaire
Partager sur d’autres sites

content que tu ais trouvé la solution, et merci de m'avoir appris ceci.

Est-ce que ta feuille de style avec cet ajout est toujours validée par le w3 ?

Ca pourrait m'éviter beaucoup de lignes supplémentaires pour IE !

Sinon, mettre du padding à droite n'aurait-il pas été suffisant ?

Lien vers le commentaire
Partager sur d’autres sites

Pour le !important :)

Ouaip, le validateur le laisse passer sans problème,

Sauf qu'au départ, c'est pas supposé servir pour ça...

Le problème (très mineur selon moi...mais suis peut-être pas une bonne

référence :shutup: ) c'est que si quelqu'un applique sa propre feuille de style sur le site (sans avoir préalablement désactiver celle en ligne) tout ce qui est marqué comme !important passera avant la feuille de style de l'utilisateur...

Mais j'connais pas grand monde qui se promène avec leur feuille de style...

Byebye

Caro :flower:

Lien vers le commentaire
Partager sur d’autres sites

Le problème (très mineur selon moi...mais suis peut-être pas une bonne

référence  :shutup: ) c'est que si quelqu'un applique sa propre feuille de style sur le site (sans avoir préalablement désactiver celle en ligne) tout ce qui est marqué comme !important passera avant la feuille de style de l'utilisateur...

Mais j'connais pas grand monde qui se promène avec leur feuille de style...

Non. C'était le cas selon CSS1, mais le tir a été heureusement rectifié avec CSS2:

Aussi bien les feuilles de style de l'auteur que celles de l'utilisateur peuvent contenir des déclarations avec "!important", celles de l'utilisateurs ayant priorité. Cette fonction de CSS améliore l'accessibilité des documents, offrant à ceux des utilisateurs qui ont des besoins particuliers (une grande taille de police, d'autres combinaisons de couleur, etc.), une certaine maîtrise de la présentation.

Remarque : Voici un changement sémantique par rapport à CSS1. Dans cette spécification-là, les règles avec "!important" d'un auteur avaient préséance sur celles de l'utilisateur.

http://www.yoyodesign.org/doc/w3c/css2/cas...important-rules

Dans tous les cas, la feuille de style utilisateur l'emporte sur les styles auteurs.

Lien vers le commentaire
Partager sur d’autres sites

Hello !

Merci pour la spécification ^_^

J'étais pas au courrant :rolleyes:

Alors il n'y a plus rien qui empèche la terre entière d'utiliser le !important pour contrer Explorer et les démons de l'enfers !!!

Merci :D

Caro :flower:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...