28220 sujets

CSS et mise en forme, CSS3

[Eureka, Resolu]Formatage liste ordonnée ?

Bonjour,

Si j'ai bien compris le formatage des listes non ordonnées en CSS:
http://forum.alsacreations.com/topic.php?fid=2&tid=1169

Pourquoi je n'y arrrive pas avec les listes ordonnées:

Code XHTML
<ol [#red]class[/#] =[#violet]"upperroman"[/#] ;>
  <li>1er paragraphe</li>
  <ol [#red]class[/#] =[#violet]"ol1"[/#];>
    <li>Article 1</li>
    <li>Article 2</li>
  </ol>
  <li>2ème paragraphe</li>
  <li>3ème paragraphe</li>
</ol>


Code CSS

.[#darkblue]upperroman[/#]
{
   list-style-type: inside; [#violet]upper-roman[/#];
   margin-left: 2em;
}

.[#darkblue]ol1[/#]
{
   list-style-type: inside; [#blue]A[/#];
   margin-left: 2em;
}

Et les puces ne s'affichent pas !!!!
Une idée ?

Modifié le 07 Jan 2005 - 00:08
Bonjour,
A priori tu as un soucis de syntaxe. Pour les propriétés de listes par exemple:

list-style-image: none;
list-style-position: inside;
list-style-type: disc;

et la même en raccourcie:

list-style: disc inside none;
Merci,

Doomer,
ol1, pour le différencier d'un ol2 que je définirai différement pour modifier l'affichage d'une sous-liste.

igor,
Merci de l'dée, mais j'ai testé et toujours rien !

Merci encore!

d'autres piste ?

A+ dans l'après midi.
Ben ça marche comme ça en tout cas :

.upperroman

{

   list-style-position : inside;
   list-style-type : upper-roman;
   margin-left: 2em;

}

.ol1
{
   list-style-position: inside;
   margin-left: 2em;

}
Quand je parlais de syntaxe, c'est parce que tes déclarations sont mal rédigées:
.upperroman
{ list-style-type: inside;/* c'est le type de puce qu'il faut mettre, pas la position*/
upper-roman;/*me parait bien isolé l'upper-roman*/
margin-left: 2em;

}



.ol1

{

   list-style-type: inside; A;/* même remarque, et A est-il une propriété, une valeur css ? */

   margin-left: 2em;

}
Me revoilà,

Après quelques heures de recherche, j'ai enfin trouvé le fautif.

dl, dt, dd, ul, [#red]li[/#] { 
		margin: 0;									
		padding: 0;									
		[#red]list-style-type: none;[/#]						
		}


Lorsque je le supprime, ma liste ordonnée s'affiche bien ( Smiley biggrin super !)
Mais, mes sous-menus s'affichent transparents et décalés ( Smiley ohwell flute !)

Le problème résolu m'en génère un autre; je me l'explique d'autant moins que ça avait bien marché pour la redéfinition de "square, circle et disc".

C'est ce qui m'a fait chercher si longtemps car j'étais à cent lieu de penser qu'il désactivait aussi "ol et ul" Smiley biggol



Je suis obligé de le désactiver, aucune manip n'a fonctionné, ou je ne connais pas la bonne (je pencherais volontier pour cette hypothèse, ça m'éviterais de reprendre le code de mes menus).

Quelqu'un a-t-il une idée pour me sortir de là ?

Merci de vous pencher sur mon problème.
La solution:

Je redéfini ma numérotation de puces dans *.css


.decimal {
   list-style-position : inside;
   list-style-type : decimal;
}

.upperalpha {
   list-style-position : inside;
   list-style-type : upper-alpha;
}

.loweralpha {
   list-style-position : inside;
   list-style-type : lower-alpha;
}

.upperroman {
   list-style-position : inside;
   list-style-type : upper-roman;
}

.lowerroman {
   list-style-position : inside;
   list-style-type : lower-roman;
}


Et voici mon code dans mon *.html:


<ol>
   <li>1er paragraphe </li>
  	<ol [#red]class[/#]=[#violet]"upperroman"[/#]>
    	   <li>Article 1 </li>
      		<ol [#red]class[/#]=[#violet]"lowerroman"[/#]>
    		   <li>Article 1 </li> 
    		   <li>Article 2</li>
  		</ol>
    	   <li>Article 2</li>
  	</ol>
   <li>2ème paragraphe</li>
  	<ol [#red]class[/#]=[#violet]"upperalpha"[/#]>
    	   <li>Article 1</li>       						
               <ol [#red]class[/#]=[#violet]"loweralpha"[/#]>
    		   <li>Article 1</i> 
                   <li>Article 2</li>
 		</ol>
           <li>Article 2</li>
	</ol>
   <li>3ème paragraphe</li>
</ol>
Sujet clos
Aller à