Jump to content
Sign in to follow this  
sailorcarom

Problème de listes en inline...

Rate this topic

Recommended Posts

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:

Share this post


Link to post
Share on other sites

Sur IE, ça décale le tout en bloc vers la droite et sur les autres navigateurs, ça décale vers la gauche...

Share this post


Link to post
Share on other 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...

Edited by Desesperance

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other 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 ?

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other 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.

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...