Problème de listes en inline...

[sailorcarom]

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

[Desesperance]

Salut,

En enlèvant le margin de "ul" ça donne quoi ?

[sailorcarom]

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

[Desesperance]

(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é 20 Juillet 2004 par Desesperance

[sailorcarom]

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

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

Vive les boss qui veullent des desings pas fesable !

Merci

Caro

[sailorcarom]

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 )

Merci à tous !

Caro

[Desesperance]

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 ?

[sailorcarom]

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 ) 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

[LaurentDenis]

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

référence  ) 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.

[sailorcarom]

Hello !

Merci pour la spécification

J'étais pas au courrant

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

Caro