Styliser la balise OL

[fireworks]

J'ai beaucoup l'article: http://www.davesite.com/webstation/css/chap07.shtml et j'aimerais l'appliquer à mon site: www.fireworkszone.

La pièce jointe est une page html d'un tutorial de mon site (http://www.fireworkszone.com/gif-ani...tdown_635.html) et tout fonctionne à merveille.

Mais je n'arrive pas à appliquer la stylisation des balises OL à mon site ou plutot qu'à moitié.

Si vous regarder au début du text: Final Result il devrait y avoir '1-Final result' et tous les autres titres devraient porter un numéro.

A partir de: Select Window > States to display the States panel la classe 'o' est appliquée.

La classe "o" se trouve dans la feuille de style tutorial.css


Donc voilà je me casse les dents sur la stylisation de la balise OL qui fonctionne parfaitement sur une page html mais pas sur mon site.

Pour ceux qui voudraient voir sur le serveur je peux leur donner un accès.

[Bisûnûrs]

C'est à cause du padding:0 qui bouffe la marge intérieure et donc par la même occasion tes numéros.
Donc soit rajoute un padding-left, soit rajoute list-style-position: inside.

[fireworks]

Envoyé par Bisûnûrs

C'est à cause du padding:0 qui bouffe la marge intérieure et donc par la même occasion tes numéros.
Donc soit rajoute un padding-left, soit rajoute list-style-position: inside.

Merci Bisunurs c'est du génie

En fait j'ai rajouté: list-style-position: inside et ça marche

Il fallait quand même trouvé.

[fireworks]

En fait il reste 2 petits problèmes: http://www.fireworkszone.com/gif-ani...tdown_635.html

1- En bas de la page, il y a 'Where to go from here:' qui est décalé vers la droite.

2- Et je n'arrive pas à mettre en gras et augmenter la taille du numéro des titres comme 1- Final result

En fait, dans la feuille main.css j'ai supprimé le padding=0

[Bisûnûrs]

1. Regarde ton imbrication de balises, elle est un peu foireuse ..

2. Le style doit être sur les li directement pour que ça fonctionne, pas sur les span dans les li.

[fireworks]

Bon, j'ai enlevé les span maintenant pour les titres on a: <li>General</li>.


Mais il y a un problème: quand j'augmente la taille dans OL.o le texte augmente aussi. Qu'est ce qui se passe?


Le titre 'Where to go from here:' est toujours décalé vers la droite?


Au fait, merci de ton aide

[Bisûnûrs]

Pour la taille du texte, ça s'appelle la cascade.

Et si ce texte est décalé sur la droite c'est parce qu'il est dans un ol ..

[fireworks]

Je suis nul en CSS donc s'il te plait ne m'en veut pas si je comprends pas tout ce que tu dis.

Voilà actuellement l'architecture du tutorial:

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<ol class="o">
<li>Final Result</li>
 
<li>General</li>
 
<li>Shared layer vs unshared layer</li>
 
<li>Film Countdown</li>
 
 
<li>Wedges</li>
 
<li>Animation speed</li>
 
 
<li>Export an animation</li>
 
 
<li>Looping</li>
 
 
 
<ol>
<li></li>
 
<li></li>
 
<li></li>
 
<ol>
<li></li>
 
 
</ol>
</ol>
</ol>

1- Peux tu corriger l'architecture s'il te plait?
2- Je ne comprends pas pourquoi lorsque j'augmente la taille des titres le texte augmente avec? Voir: http://www.fireworkszone.com/gif-ani...tdown_635.html

[Bisûnûrs]

Déjà tu ne peux pas avoir un ol dans un ol, ni un h1 dans un ol, un enfant d'un ol est forcément un li.

Exemple faux :

Code html :

1
2
3
4
5
6
7
<ol>
   <ol>
      <li></li>
      <li></li>
   </ol>
   <h1></h1>
</ol>

Exemple bon :

Code html :

1
2
3
4
5
6
7
8
9
<ol>
   <li>
      <ol>
         <li></li>
         <li></li>
      </ol>
      <h1></h1>
   </li>
</ol>

Or toi tu cumules les erreurs de l'exemple faux.

Pour la taille du texte, un élément enfant hérite des caractéristiques de son parent :

Code html :

<p>Un texte <strong>Du texte</strong></p>

Si tu mets une taille de texte au p, l'élément strong l'aura aussi, c'est ce qui arrive dans ton cas. Si tu veux que le strong (dans mon exemple) soit plus petit, il faut redéfinir un style pour lui.

[fireworks]

Je suis un vrai boulet, je n'ai pas compris ton 'bon' exemple, moi il me faut du concret pour comprendre. C'est pour cela que tu trouveras en pièce jointe le fichier php et sur lequel tu pourras faire les modifs adéquates.

[fireworks]

La structure de l'''exemple bon' que tu as la gentillesse de me donner à l'air compliquée et peut être pas adaptée à la structure d'un tutoriel. Qu'en penses tu?

Comment je pourrais avoir une structure plus simple (adptée à mes tutoriels) comme celle ci?


<titre 1>

<sous-titre 1>

<sous-sous-titre 1>


ou alors est ce qu'il ne serait pas plus simple d'utiliser h1,2,3,4 etc. ?

[Bisûnûrs]

Rien ne t'empêche de garder cette structure, mais en mettant bien le contenu là où il doit être, exemple :

Code html :

1
2
3
4
5
6
7
8
9
10
<ol>
   <li>
      <h1>Titre 1</h1>
      <div class="contenu">Blabla</div>
   </li>
   <li>
      <h1>Titre 2</h1>
      <div class="contenu">Blabla</div>
   </li>
</ol>

Code :

1
2
3
4
5
6
7
8
ol li {
   font-size : 20px;
   color : red;
}
ol li .contenu {
   font-size : 12px;
   color : black;
}

[fireworks]

Comment faire pour avoir dans un titre deux couleurs différentes; une pour le numéro et une pour le titre lui meme? Si c'est possible.


'Where to go from here' est toujours décalé vers la droite. Pourtant on a

Code :

1
2
3
4
5
6
7
8
9
10
<li>Looping</li>
 
<ol>
<li></li>
</ol>
 
<h1>Where to go from here:</h1>
<ol>
<li></li>
</ol>

[Bisûnûrs]

Ton texte décalé l'est parce que ton h1 est dans le ol alors que tes autres titres ne sont pas dans un ol.

[fireworks]

Envoyé par Bisûnûrs

Ton texte décalé l'est parce que ton h1 est dans le ol alors que tes autres titres ne sont pas dans un ol.

Dans mon example, le h1 est en dehors des deux ol

[Bisûnûrs]

Oui, mais si je regarde ton code ...:

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ol>
 
<li>Select Window > States to display the States panel.</li>
 
<li>Click the GIF Animation Looping button at the bottom of the panel.</li>
 
<li>Select the number of times to repeat the animation after the first time. If you select 4, for example, the animation plays five times in all. Forever repeats the animation continuously.</li>
</ol>
 
<h1>Where to go from here:</h1>
<div class="wheretogofrom">
<ol>
<li><a href="http://www.adobe.com/devnet/fireworks/articles/pages_states_layers.html">Using pages, states, and layers in Fireworks CS4</a></li>
</div>
 
</ol>
 
 
</ol>
<h1>Download</h1>

On voit bien juste avant le h1 "Download" qu'il y a encore un ol qui traine ! Ton h1 "Download" n'y est pas dedans, alors que ton h1 "Where to go from here" si.

[fireworks]

Bonjour Josselin,

Je respecte le fait que tu veuilles rester bénévole.

Je souhaiterais que tu m'aides à re-structurer mes tutoriels. Dans un précédent post tu parlais de remplacer, pour le texte, les <p> par des <div>:

Code :

<div class="contenu">Blabla</div>

Mais il est impensable pour moi de modifier tous mes tutoriels déjà existants et remplacer les <p> par des <div>. Est ce que tu n'aurais pas une autre solution?

Tu peux me contacter au contact@fireworkszone.com parce que je n'arrive pas à te répondre par MP.

[Bisûnûrs]

Heu, tu ne t'es pas plutôt dit que ça arrivait aux gens de ne pas être connecté ..? Plus encore le week-end ?

Et je ne t'ai jamais dit de remplacer des p par des div, le code que j'ai donné plus haut était un exemple ..

[fireworks]

Envoyé par Bisûnûrs

Heu, tu ne t'es pas plutôt dit que ça arrivait aux gens de ne pas être connecté ..? Plus encore le week-end ?

Et je ne t'ai jamais dit de remplacer des p par des div, le code que j'ai donné plus haut était un exemple ..

Bonjour,
J'ai essayé plusieurs fois de t'envoyer des messages par PM et ça ne marche pas. J'espère que tu as passé un bon week end.

En ce qui concerne la re-structuration de mes tutoriels, on peut prendre comme exemple ce tutoriel: http://www.fireworkszone.com/gif-ani...tdown_635.html

On peut continuer notre discussion par email: contact@fireworkszone.com

[Bisûnûrs]

Envoyé par fireworks

J'ai essayé plusieurs fois de t'envoyer des messages par PM et ça ne marche pas.

Si si, ça fonctionne très bien, tu as spammé correctement ma messagerie.

Envoyé par fireworks

En ce qui concerne la re-structuration de mes tutoriels, on peut prendre comme exemple ce tutoriel: http://www.fireworkszone.com/gif-ani...tdown_635.html

Comprends bien que personne ne te fera jamais ton travail sur ce site. C'est un forum d'entraide, pas un forum de "je-cherche-des-développeurs-qui-me-feront-mon-site-pour-pas-un-sous". Si tu veux quelqu'un qui te reprenne l'ensemble de tes tutoriels, il y a une section Offres d'emploi sur le forum.

Envoyé par fireworks

On peut continuer notre discussion par email: contact@fireworkszone.com

Merci, mais non merci. Encore une fois, c'est un forum et les réponses qui y sont doivent/pourraient profiter à d'autres gens. Et comprends bien que si je passais mon temps à répondre à tous les problèmes des gens par e-mail, j'y passerais mes journées.