28173 sujets

CSS et mise en forme, CSS3

Bonjour, j'ai écrit un dossier que j'ai mis en page en css avec des listes pour avoir une numérotation de paragraphes soignée.
Sous Firefox, pas de problèmes, l'affichage est tel que je le souhaite.
Sous IE par contre, tout foire !
Pouvez vous m'aider ?
Merci !

Voici le lien : http://tinyurl.com/ty2tb
Bonsoir,

Pour comprendre ton problème, tu devrais mettre ton code css et html, en utilisant les balises [code].

merci, après on pourra voir ton problème.
Ben le code est dans la page, si je copie/colle tout ça fait beaucoup et je ne sais pas si le problème est contenu dans ce que je vais poster ici ... :
body {
	background-color: #232e38;
	color: #CCCCCC;
	font: 0.7em Verdana, Geneva, Arial, Helvetica, sans-serif;
	line-height: 1.6em;
	margin:0px;
}
h1,h2,h3,h4,h5,.rubtitle,.sousrubtitle, .sousrubtitle2 {
	color: #FFFFFF;
	font-family: Georgia, "Times New Roman", Times, serif;
}
h3,.rubtitle {
font-size: 2em;
}
h4,.sousrubtitle {
font-size: 1.5em;
margin-left:10px;
}
h5, .sousrubtitle2 {
font-size: 1em;
margin-left:10px;
}

Portion de code HTML :
		<ol class="rub">

		<p>Tim Burton est un réalisateur américain né le 25 août 1958, premier des deux fils de Bill Burton et Jean Erikson.</p>
		<li class="rubtitle">Naissance, enfance, adolescence</li>
          <p>
		  <div class="photodossier" style="float:left"><a href="dossiers/bio/photos/bio/tb_young.jpg" class="thickbox" title="Tim Burton alors qu'il était jeune"><img src="dossiers/bio/photos/bio/miniature/tb_young.jpg"/></a></div>
		  Il grandit dans la maison familiale de Burbank, une petite ville Californienne située aux alentours de Los Angeles qui avait pour particularité d'accueillir bon nombre de studios de cinéma très renommés tels Columbia, Warner Bros et surtout Disney. <br />
            Bien que Burbank puisse sembler en endroit particulièrement excitant pour le futur réalisateur que sera Tim Burton; il n'en garde que le souvenir d'une ville plutôt paisible mais sans âme, peuplée de gens à la normalité déconcertante et à l'ouverture d'esprit toute relative, figure d'une certaine Amérique qu'il s'essaiera plusieurs fois à dénoncer dans son travail ultérieur. </p>
          <p>Introverti et éprouvant des difficultés autant à la maison qu'à l'école, il passe le plus clair de ses temps libres à regarder des films de monstres et d'horreur, à la télé ou au cinéma. Il y découvre donc un certain cinéma qui aura une influence cruciale sur sa carrière à venir, à travers les films de la Hammer (un studio anglais qui produisit des films d'horreurs &quot;gothiques&quot; depuis la fin des années 50 aux années 70), l'emblématique acteur Vincent Price (auquel il rendra plus tard hommage et qui deviendra son ami) ou l'excentricité du réalisateur Ed Wood (au sujet duquel il fera également un film). </p>

          <blockquote>Quand tu es plus jeune, tu crées ta propre mythologie et tu détermines ce qui te touche. Et ces films, leur poésie, ces personnages plus grands que nature qui traversaient tant de tourments – la plupart imaginaires – m'interpellaient comme d'autres enfants ont pu être interpellés par les films de Gary Cooper ou John Wayne.» </blockquote>
          <p>A part cela, il est un enfant comme les autres, qui aime dessiner, jouer ou regarder passer les avions décollant et atterrissant de l'aéroport tout proche.<br />
            Quelques faits anecdotiques marquent tout de même son enfance, comme le fait de terroriser son petit voisin en lui faisant croire à l'invasion imminente des martiens; ou encore le fait que ses parents aient murés, pour une raison inconnue, la fenêtre de sa chambre donnant vue sur le jardin. Il se voyait alors obligé d'escalader son bureau pour pouvoir apercevoir l'extérieur, évènement qu'il associa &quot;<em>à la nouvelle d'Edgar Allan Poe où un homme est emmuré vivant et brûlé vif. Voilà le genre de sentiments que j'éprouvais à l'égard de mon monde. Burbank, cet endroit mystérieux!</em>&quot;. </p>
          <p>S'entendant apparemment peu avec sa famille, il quitte la maison familiale à 12 ans, et s'en va vivre chez sa grand-mère, qui lui louera ensuite un petit studio à ses 16 ans.</p>
          <li class="rubtitle">Tim Burton au royaume enchanté</li>

		  <ol class="sousrub">
		  <li class="sousrubtitle">Calarts</li>
           <p>En 1976, alors âgé de 18 ans, Tim et son talent très précoce sont repérés par des chasseurs de têtes travaillant pour Disney et obtient une bourse pour intégrer CalArts (California Institute for the Arts), une école fondée par le studio pour constituer un &quot;réservoir&quot; de talents dont beaucoup travailleront ensuite au sein de la célèbre entreprise.<div class="photodossier" style="float:right"><a href="dossiers/bio/photos/calarts.jpg" class="thickbox" title="California Institute for the Arts"><img src="dossiers/bio/photos/calarts_pt.jpg"/></a></div>
           </p>
          <p>Il y rencontrera certaines pointures actuelles (John &quot;Pixar&quot; Lasseter, Brad Bird, John Musker, Glen Keane...) et quelques uns de ses futurs collaborateurs, dont Rick Heinrichs ou encore Henry Selick (réalisateur de <span class="filmtitle">l'&Eacute;trange Noël de Mr Jack</span>) qu'il côtoiera au cours d'animation expérimentale enseigné par Jules Engel.<br />

            S'il supporte mal l'enseignement &quot;militaire&quot; de l'établissement, il y réalise <span class="filmtitle">Stalk of The Celery Monster</span> par lequel il se fera remarquer avant d'être embauché comme animateur dans le studio.<br />
          <li class="sousrubtitle">Tim Burton employé chez Disney</li>
          <p>Il y passera trois années difficiles, incapable d'intégrer les &quot;codes&quot; formatés du studio et faisant preuve d'une ténacité à toute épreuve en refusant de faire des concessions sur ses opinions artistiques, et comprenant mal qu'on exige de lui et de ses collègues d'être &quot;<em>à la fois un artiste et un zombie oeuvrant sans personnalité. Il faut être quelqu'un d'unique pour pouvoir faire coexister ces deux états dans un même cerveau.</em>&quot;</p>

		  <ol class="sousrub2">
		  <li class="sousrubtitle2">Animateur</li>
          <p>Il y travaillera entre autres sur <span class="filmtitle">Tron</span> (non-crédité, en tant qu'animateur), <span class="filmtitle">The Lords of The Rings</span> (non crédité, en tant qu'intervalliste), ainsi que sur <span class="filmtitle">Rox et Roucky</span> (en tant qu'animateur) :<br />

          <blockquote>Je n'arrivais même pas à imiter le style Disney. Les miens [renards] ressemblaient à une route défoncée.(…) J'avais l'impression de subir le supplice de la goutte d'eau. (…) Je n'avais pas la force d'endurer cela, c'était au dessus de mes forces.</blockquote>
            Il adapte son comportement en conséquence, dormant souvent entre 8 et 10h par jour, auxquelles il faut ajouter jusqu'à parfois 4h de sommeil supplémentaire pendant ses heures de travail, les yeux clôts mais bien assis derrière sa planche à dessin, le crayon à la main,prêt à gribouiller à la moindre entrée inattendue dans son bureau…</p>
            <blockquote>Je me comportais de manière étrange (…). Je m'installais fréquemment au fond d'une armoire dont je ne sortais pas, ou je m'asseyais sur mon bureau – ou au-dessous –, ou je faisais des trucs étranges comme me faire arracher une dent de sagesse et inonder de sang les couloirs. Mais je suis arrivé à dépasser ce stade. Je ne m'enferme plus dans une armoire. J'étais gardé à distance respectable, mais j'avais la paix.</blockquote>
Administrateur
gordie a écrit :
Ben le code est dans la page, si je copie/colle tout ça fait beaucoup et je ne sais pas si le problème est contenu dans ce que je vais poster ici ... :

Hello,

En effet, dans le code que tu donnes, il n'y a strictement aucune propriété qui est appliquée à une liste (pour rappel, les éléments de liste sont <ol>, <ul> et <li>).

Autre point important : les éléments <ol> et <ul> ne peuvent contenir directement que des items de liste (balise <li>), ce qui n'est pas du tout ton cas lorsque l'on voit ton code HTML.
Il faudrait commencer par remédier à cela.
Mais si <ol> et <ul> ne peuvent contenir que des éléments de liste, comment puis-je construire une numérotation dans mon article ?
C'est impossible ?
Genre :
1 montitre
-mon texte ici
1.a mon titre
--mon texte ici
1.b mon titre
--mon texte ici
1.b.i
---mon texte ici
2 montitre
-mon texte ici

Suis je obligé de faire la numérotation manuellement ? Ce serait trop dommage...
Les formats standards ne permettent pas de numérotation telles que
1.b
1.b.i
mais ils permettent
1. Titre principal 1
     a. sous-chapitre
     b. sous-chapitre
2. Titre principal 2
etc.


Trouvé sur http://aide.over-blog.com/ :

Il y a deux familles d'aspect de puces : les types standard et le type personnalisé (par une image) définis respectivement par list-style-type et list-style-image.
Voici un résumé des valeurs standard admises :
<ul>
   <li style="list-style-type:disc">disc</li>
   <li style="list-style-type:circle">circle</li>
   <li style="list-style-type:square">square</li>
   <li style="list-style-type:decimal">decimal</li>
   <li style="list-style-type:lower-roman">lower-roman</li>
   <li style="list-style-type:upper-roman">upper-roman</li>
   <li style="list-style-type:lower-alpha">lower-alpha</li>
   <li style="list-style-type:upper-alpha">upper-alpha</li>
   <li style="list-style-type:none">none</li>
   <li style="list-style-image:url(http://idata.over-blog.com/0/01/15/48/puce.gif)">Image personnalisée</li>
 </ul> 

http://www.rankspirit.com/forums/listes.gif
Soit,
Est ce qu'il est possible d'utiliser les listes pour faire

Genre :
1 montitre
-mon texte ici
-a mon titre
--mon texte ici
-b mon titre
--mon texte ici
---i mon titre
---mon texte ici
2 montitre
-mon texte ici
Tu peux faire quelque chose comme ça :
[b]CSS :[/b]
ol {list-style-type: decimal;}
ol ol {list-style-type: lower-alpha;}

[b]HTML :[/b]
<ol><li>Mon titre
	<p>Mon texte</p>
	<ol><li>Mon titre
		<p>Mon texte</p>
	</li><li>Mon titre
		<p>Mon texte</p>
	</li></ol>
</li><li>Mon titre
	<p>Mon texte</p>
</li></ol>
Désolé, mais je ne suis toujours pas.
Voici ce que j'ai fait :
<style>
body {
	font: 0.7em Verdana, Geneva, Arial, Helvetica, sans-serif;
}
.rubtitle {
list-style-type: decimal;
font-size: 2em;
}
.sousrubtitle {
list-style-type: lower-alpha;
font-size: 1.5em;
margin-left:10px;
}
.sousrubtitle2 {
list-style-type: lower-roman;
font-size: 1em;
margin-left:10px;
}
.rubtitle,.sousrubtitle, .sousrubtitle2 {
	font-family: Georgia, "Times New Roman", Times, serif;
}
</style>

<ol>
	<li class="rubtitle">Mon titre de rubrique</li>
	<p>Mon texte</p>
	<ol>
		<li class="sousrubtitle">Mon titre de sous-rubrique</li>
		<ol>
			<li class="sousrubtitle2">Mon titre de sous-sous-rubrique</li>
		</ol>
		<p>Mon texte</p>
		<li class="sousrubtitle">Mon titre de sous-rubrique</li>
		<p>Mon texte</p>
	</ol>
<li class="rubtitle">Mon titre de rubrique</li>
	<p>Mon texte</p>
</ol>


Mais c'est toujours foireux : le texte "standart" change de taille sous IE. (encore une fois, le résultat est nickel sous firefox).
Help !