Petit soucis sur mon tableau CSS

Petit soucis sur mon tableau CSS - HTML/CSS - Programmation

Marsh Posté le 12-09-2005 à 16:24:27    

Bonjour,
 
après quelques séances d'arrachage de cheveux, j'ai enfin réussi à faire une structure de tableau en CSS.
 
Il utilise 3 niveaux d'imbrication qui fonctionnent.
Le 3e niveau est dynamique, c'est à dire qu'à son survol, un texte apparait.
Mon problème est que ce texte apparait en bas du niveau 3, alors que je souhaiterais le faire apparaître à droite.
Je suis sur qu'il manque un truc dans ma feuille de style, mais je n'arrive pas à trouver.
 
Voici le contenu de la page :
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  7. <head>
  8. <title>Site Industrie EAT</title>
  10. <meta http-equiv="Content-Language" content="fr">
  11. <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  13. <meta http-equiv="Content-style-type" content="text/css" />
  15. <style type="text/css">
  18. <!--
  19. a {
  20. text-decoration: none; /* définition du lien qui affichera le "calque" */
  21. }
  22. a:hover {
  23. background: none; /* correction d'un bug IE */
  24. }
  25. a span { /* définition de la balise <span> inclue dans <a> */
  26. display: none;
  27. }
  28. a:hover span { /* définition de la balise <span> au survol */
  29. display: block;
  30. top: 0px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
  31. left: 0px;
  32. background: blue;
  33. text-align: center;
  34. color: white;
  35. }
  37. .conteneur {
  38. padding-top: 10px;
  39. padding-left: 100px;
  41. }
  43. .conteneur2 {
  44. padding-left: 100px;
  45. }
  48. .bloc1 {
  49. background-color: blue;
  50. width: 100px;
  51. text-align:center;
  52. }
  54. .bloc2 {
  55. background-color: green;
  56. width: 100px;
  57. text-align: center;
  58. float:left;
  60. }
  62. .bloc3 {
  63. width: 100px;
  64. text-align: left;
  65. margin-left: 20px;
  66. }
  69. -->
  70. </style>
  73. </head>
  76. <body>
  79. <div class="bloc1">Niveau 1</div>
  81. <div class="conteneur">
  82. <div class="bloc2">1er Niveau 2</div>
  83. <div class="bloc3">
  84. <a href="#">Niveau 3
  85. <span>Texte et images</ br>Texte 2</ br>Texte 3</ br></span>
  86. </a>
  87. </div>
  88. </div>
  92. <div class="conteneur">
  93. <div class="bloc2">2e Niveau 2</div>
  94. <div class="bloc3">
  95. <a href="#">Niveau 3
  96. <span>Texte et images</span>
  97. </a>
  98. </div>
  99. </div>
  101. <div class="bloc1">2e Niveau 1</div>
  103. </body>
  105. </html>


 
Quelqu'un a une idée ?
 
Merci d'avance.

Reply

Marsh Posté le 12-09-2005 à 16:24:27   

Reply

Marsh Posté le 12-09-2005 à 16:53:53    

Mais où est-ce que t'as vu les </ br> [:johneh] [:johneh] [:johneh] [:johneh]
 
 
P'tain, c'est la première fois de ma vie que je vois ça [:johneh][:johneh][:johneh][:johneh][:johneh]
 
Ca s'écrit :

<br />


 
[:johneh][:johneh][:johneh][:johneh][:johneh]

Reply

Marsh Posté le 12-09-2005 à 17:05:30    

FlorentG a écrit :

Mais où est-ce que t'as vu les </ br> [:johneh] [:johneh] [:johneh] [:johneh]
 
 
P'tain, c'est la première fois de ma vie que je vois ça [:johneh][:johneh][:johneh][:johneh][:johneh]
 
Ca s'écrit :

<br />


 
[:johneh][:johneh][:johneh][:johneh][:johneh]


 
Oups désolé, je débute hein :D

Reply

Marsh Posté le 12-09-2005 à 17:13:35    

C'est con je t'avais trouvé une solution, pour une ligne...
 
Mais là...c'est plus tip top
Comme quoi faut jamais faire confiance ;) et toujours tout vérifié... :lol:
 
Soit prudent la prochaine fois....

Reply

Marsh Posté le 12-09-2005 à 17:28:51    

Allez, je cherche aussi de mon côté, on va bien trouver ;)

Reply

Marsh Posté le 12-09-2005 à 18:11:26    

J'ai trouvé  :bounce:  
 
Il fallait ajouter des position:absolute; un peu partout :D
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  7. <head>
  8.  <title>Site Industrie EAT</title>
  10.  <meta http-equiv="Content-Language" content="fr">
  11.      <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  13.     <meta http-equiv="Content-style-type" content="text/css" />
  15. <style type="text/css">
  18. <!--
  19. a {
  20. text-decoration: none; /* définition du lien qui affichera le "calque" */
  21. }
  22. a:hover {
  23. background: none; /* correction d'un bug IE */
  24. }
  25. a span { /* définition de la balise <span> inclue dans <a> */
  26. display: none;
  27. }
  29. a:hover span { /* définition de la balise <span> au survol */
  30. position:absolute;
  31. display: block;
  32. width: 100px;
  33. height: 60px;
  34. background:green;
  35. text-align: center;
  36. color: white;
  37. float:right;
  38. }
  40. .conteneur {
  42.   padding-top: 10px;
  43.   padding-left: 100px;
  45. }
  47. .conteneur2 {
  48.   position:absolute;
  49.   padding-left: 100px;
  50. }
  53. .bloc1 {
  54. background-color: blue;
  55. width: 100px;
  56. text-align:center;
  57. }
  59. .bloc2 {
  60. background-color: green;
  61. width: 100px;
  62. text-align: center;
  63. float:left;
  65. }
  67. .bloc3 {
  68. width: 100px;
  69. text-align: left;
  70. margin-left: 20px;
  71. }
  74. -->
  75. </style>
  78. </head>
  81. <body>
  84. <div class="bloc1">Niveau 1</div>
  86. <div class="conteneur">
  87. <div class="bloc2">1er Niveau 2</div>
  88.  <div class="bloc3">
  90.   <a href="#"><img src="test.jpg"/>
  91.    <span>Texte et images<br />Texte 2<br />Texte 3<br /></span>
  92.   </a>
  93.  </div>
  95. </div>
  99. <div class="conteneur">
  100. <div class="bloc2">2e Niveau 2</div>
  101. <div class="bloc3">
  102.  <a href="#"><img src="test.jpg"/>
  103.   <span>Texte et images</span>
  104.  </a>
  105. </div>
  106. </div>
  109. <div class="bloc1">2e Niveau 1</div>
  111. </body>
  113. </html>

Reply

Marsh Posté le 12-09-2005 à 19:00:26    

FlorentG a écrit :

Mais où est-ce que t'as vu les </ br> [:johneh] [:johneh] [:johneh] [:johneh]
 
 
P'tain, c'est la première fois de ma vie que je vois ça [:johneh][:johneh][:johneh][:johneh][:johneh]
 
Ca s'écrit :

<br />


 
[:johneh][:johneh][:johneh][:johneh][:johneh]


 
 :pt1cable:

Reply

Marsh Posté le 12-09-2005 à 22:34:02    

Oups, j'ai parlé trop vite, sous firefox le texte qui apparait lors du survol de l'image est en dessous de l'image...
J'y comprends plus rien !


Message édité par barthoose le 12-09-2005 à 22:36:07
Reply

Marsh Posté le 12-09-2005 à 23:45:07    

Je vais résumer mon problème :
 
Le tableau que j'ai fait fonctionne très bien sous IE :
 
http://www.nicoco.free.fr/temp/ie.bmp
 
Au survol de test, le texte s'affiche à droite de "Test"
 
Sous firefox :
 
http://www.nicoco.free.fr/temp/firefox.bmp
 
Là, ca change car "test" se trouve en dessous des niveaux 2, et le texte au survol se trouve aussi en dessous de "test".
 
Je pense que les deux points cités proviennent du meme probleme, mais je n'arrive pas à le résoudre...
 
Help !!
 
Voici la page :
http://www.nicoco.free.fr/temp/test.htm

Reply

Marsh Posté le 13-09-2005 à 09:14:52    

En fait, c'est quoi le but de la manoeuvre ? Quel type d'informations se trouveront dans ta page ?

Reply

Marsh Posté le 13-09-2005 à 09:14:52   

Reply

Marsh Posté le 13-09-2005 à 09:20:59    

déjà il manque une balise fermante dans ton bordel
 

Code :
  1. <div class="bloc1">Niveau 1</div>
  3. <div class="conteneur">
  4.     <div class="bloc2">1er Niveau 2</div>
  5.         <div class="bloc3">
  7.             <a href="#"><img src="test.jpg"/>
  8.                 <span>Texte et images<br />Texte 2<br />Texte 3<br /></span>
  9.             </a>
  10.         </div>
  11.     </div><==== là il manquait une balise
  12. </div>
  16. <div class="conteneur">
  17.     <div class="bloc2">2e Niveau 2</div>
  18.     <div class="bloc3">
  19.         <a href="#"><img src="test.jpg"/>
  20.             <span>Texte et images</span>
  21.         </a>
  22.     </div>
  23. </div>
  26. <div class="bloc1">2e Niveau 1</div>

Reply

Marsh Posté le 13-09-2005 à 09:32:04    

barthoose a écrit :

Je vais résumer mon problème :
Le tableau que j'ai fait fonctionne très bien sous IE :
Là, ca change car "test" se trouve en dessous des niveaux 2, et le texte au survol se trouve aussi en dessous de "test".


Et si tu faisais tes tests avec la même taille de fenêtre dans les deux cas? Par ce qu'avec des fenêtre minuscules, c'est peut être normal qu'il y ai des trucs bizare.

Reply

Marsh Posté le 13-09-2005 à 10:32:44    

omega2 a écrit :

Et si tu faisais tes tests avec la même taille de fenêtre dans les deux cas? Par ce qu'avec des fenêtre minuscules, c'est peut être normal qu'il y ai des trucs bizare.


 
je fais mes tests avec des tailles de fenetre normales, je les ai réduites pour diminuer la taille des images

Reply

Marsh Posté le 13-09-2005 à 10:34:51    

[quotemsg=1198039,11,68526]déjà il manque une balise fermante dans ton bordel
 
quotemsg]
 
Je ne pense pas. Je reconnais que les tablulations ont été mal faites.
 

Code :
  1. <div class="conteneur">
  2. <div class="bloc2">1er Niveau 2</div>   <===== elle est là
  3.  <div class="bloc3">
  4.   <a href="#">test
  5.    <span>Texte et images<br />Texte 2<br />Texte 3<br /></span>
  6.   </a>
  7.  </div>
  9. </div>


Message édité par barthoose le 13-09-2005 à 10:35:25
Reply

Marsh Posté le 13-09-2005 à 10:37:10    

FlorentG a écrit :

En fait, c'est quoi le but de la manoeuvre ? Quel type d'informations se trouveront dans ta page ?


 
Le but de la manoeuvre est :
 
Avoir du texte dans les niveaux 1 et niveaux 2
Avoir une image à la place de "test" (je garde test pour l'instant)
Avoir un texte qui s'affiche lors du survol de l'image (test pour l'instant)
 
 :hello:

Reply

Marsh Posté le 13-09-2005 à 10:37:13    

au oui j'avais mal vu pardon
 
 
mais quand on fais un menu monsieur, ou un truc à plusieur niveaux, on utilise des UL LI UL LI UL LI  
 
et pas des DIV à 2 balles

Reply

Marsh Posté le 13-09-2005 à 10:50:46    

gatsusat a écrit :

au oui j'avais mal vu pardon
 
 
mais quand on fais un menu monsieur, ou un truc à plusieur niveaux, on utilise des UL LI UL LI UL LI  
 
et pas des DIV à 2 balles


 
Ah enfin,
j'attendais que quelqu'un le lui dise....;)

Reply

Marsh Posté le 13-09-2005 à 11:00:52    

Sorry :jap:
j'avais vu ce tuto http://css.alsacreations.com/Bases [...] ses-en-CSS
Faut que je reprenne à zéro... Je sens que je vais en ch***


Message édité par barthoose le 13-09-2005 à 11:01:04
Reply

Marsh Posté le 13-09-2005 à 11:07:33    

Mais non ce sera tous de suite plus simple...

Reply

Marsh Posté le 13-09-2005 à 11:12:02    

Le problème, c'est que j'y pige pas grand chose, je ne sais pas quoi mettre en div, quoi mettre en UL LI UL LI, si je dois mettre des dd dl dt.
Honnêtement, je nage :(
Pouvez vous me donner une piste (je ne vous demande pas le code hein) sur la structure à adopter ?

Reply

Marsh Posté le 13-09-2005 à 11:13:01    

Un div sert à grouper des éléments et à donner un peu de structure.
 
Un ul est une liste non-ordonnée...  
 
As-tu déjà lu la recommandation HTML ? [:dawa]

Reply

Marsh Posté le 13-09-2005 à 11:19:10    

barthoose a écrit :

Le problème, c'est que j'y pige pas grand chose, je ne sais pas quoi mettre en div, quoi mettre en UL LI UL LI, si je dois mettre des dd dl dt.
Honnêtement, je nage :(
Pouvez vous me donner une piste (je ne vous demande pas le code hein) sur la structure à adopter ?

En fait, pour savoir quoi utiliser, il ne faut plus penser en affichage mais en signification des éléments.
 
Par exemple, quand tu regardes la "Table des matières" d'un livre, qu'est ce que tu regardes : la liste des chapitres.
Pour site web, ca sera pareil : quand tu regardes un menu, qu'est ce que tu vois : la liste des sections du site.
il faut donc alors utiliser les balises des listes (UL et LI)
 
Evidement, ca nécessite de conaitre la signification des différentes balises.

Reply

Marsh Posté le 13-09-2005 à 11:24:15    

FlorentG a écrit :

Un div sert à grouper des éléments et à donner un peu de structure.
 
Un ul est une liste non-ordonnée...  
 
As-tu déjà lu la recommandation HTML ? [:dawa]


 
Je reconnais que non (pas taper !), car je fais tout celà pendant mon temps libre le soir et j'ai des délais assez courts.
 
Ce que je veux faire c'est un tableau qui ressemble à ca :
 
TEXTE NIV 1
              TEXTE NIVEAU 2        IMAGE       TEXTE AFFICHé au survol Image      
 
              TEXTE NIVEAU 2        IMAGE       TEXTE AFFICHé au survol Image      
 
              TEXTE NIVEAU 2        IMAGE       TEXTE AFFICHé au survol Image      
 
TEXTE NIV 1
 
              TEXTE NIVEAU 2        IMAGE       TEXTE AFFICHé au survol Image            
 
              TEXTE NIVEAU 2        IMAGE       TEXTE AFFICHé au survol Image      
 
 
etc...

Reply

Marsh Posté le 13-09-2005 à 11:48:13    

Je précise juste que chaque niveau de texte doit avoir une apparence différente.

Reply

Marsh Posté le 13-09-2005 à 13:43:44    

barthoose a écrit :

Je précise juste que chaque niveau de texte doit avoir une apparence différente.


Facile, t'as les UL pour le niveau 1 les LI pour le niveau 2
et si tu veux rajouter un autre niveau; il suffirait de faire des listes de listes (bien que côté sémantique, je suis pas sur que ca soit le top) et, dans le css, ca se traduira alors par :
UL LI UL {blablabla}
et UL LI UL LI {blablabla}
 
Voir chapitre 5.1 de la documentation officielle pour plus d'infos et des motifs plus précis.

Reply

Marsh Posté le 13-09-2005 à 14:01:01    

Merci pour vos contributions.
 
Voici ce que j'ai fait, je ne dis pas que c'est tip top hein !
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  7. <head>
  8.  <title>Site Industrie EAT</title>
  10.  <meta http-equiv="Content-Language" content="fr">
  11.      <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  13.     <meta http-equiv="Content-style-type" content="text/css" />
  15. <style type="text/css">
  18. <!--
  21. a {
  22. text-decoration: none; /* définition du lien qui affichera le "calque" */
  23. }
  24. a:hover {
  25. background: none; /* correction d'un bug IE */
  26. }
  27. a span { /* définition de la balise <span> inclue dans <a> */
  28. display: none;
  29. }
  30. a:hover span { /* définition de la balise <span> au survol */
  31. display: block;
  32. float: left;
  33. top: 0px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
  34. left: 0px;
  35. background: blue;
  36. text-align: center;
  37. color: white;
  38. }
  42. -->
  43. </style>
  46. </head>
  49. <body>
  53. <div>
  54. <ul>
  55. <li>Niveau 1
  56.     <ul>
  57.          <li>Niveau 2
  58.          <ul>
  59.    <a href="#">Texte 1<br />Texte 2<br />Texte 3<br />Texte 4<br />
  60.     <span>
  61.      <li>Texte 1</li>
  62.      <li>Texte 2</li>
  63.     </span>
  64.    </a>
  65.          </ul>
  66.  </li>
  67.     </ul>
  68. </li>
  69. <li>Niveau 1
  70.     <ul>
  71.          <li>Niveau 2
  72.          <ul>
  73.    <a href="#">Texte 1<br />Texte 2<br />Texte 3<br />Texte 4<br />
  74.     <span>
  75.      <li>Texte 1</li>
  76.      <li>Texte 2</li>
  77.     </span>
  78.    </a>
  79.          </ul>
  80.  </li>
  81.     </ul>
  82. </li> <li>Niveau 1
  83.     <ul>
  84.          <li>Niveau 2
  85.          <ul>
  86.    <a href="#">Texte 1<br />Texte 2<br />Texte 3<br />Texte 4<br />
  87.     <span>
  88.      <li>Texte 1</li>
  89.      <li>Texte 2</li>
  90.     </span>
  91.    </a>
  92.          </ul>
  93.  </li>
  94.     </ul>
  95. </li>
  96. </ul>
  97. </div>
  100. </body>
  102. </html>


 
Qu'en pensez vous ?
 
Il me reste à faire en sorte que le texte qui s'affiche au survol soit à droite de 'Texte 1' + 'Texte 2' + 'Texte 3' + 'Texte 4', là je coince depuis le début...
Ensuite il faudra que je puisse afficher les niveaux 1 et les niveaux 2 d'une couleur différence, et là je ne te suis plus omega2... !
 


Message édité par barthoose le 13-09-2005 à 14:02:00
Reply

Marsh Posté le 13-09-2005 à 14:18:46    

barthoose a écrit :


Ensuite il faudra que je puisse afficher les niveaux 1 et les niveaux 2 d'une couleur différence, et là je ne te suis plus omega2... !


Un exemple étant mieux qu'un long discourt, essaye donc :
ul li { /* toutes les listes auront un fond bleu */  
background: blue;
}
ul li ul li{ /* toutes les listes situé dans des listes auront un fond rouge */
background: red;
}
 
Au fait, c'est moi qui me trompe ou on peut mettre également du texte directement dans les <ul> en tant que titre de liste?

Reply

Marsh Posté le 13-09-2005 à 14:34:00    

omega2 a écrit :

Un exemple étant mieux qu'un long discourt, essaye donc :
ul li { /* toutes les listes auront un fond bleu */  
background: blue;
}
ul li ul li{ /* toutes les listes situé dans des listes auront un fond rouge */
background: red;
}
 
Au fait, c'est moi qui me trompe ou on peut mettre également du texte directement dans les <ul> en tant que titre de liste?


 
Merci, je vais essayer.
J'ai essayé et effectuvement tu peux mettre du texte dans les ul.
Encore merci !!!!

Reply

Marsh Posté le 13-09-2005 à 14:36:21    

Ca marche nickel !
Reste encore comment supprimer les puces et surtout comment afficher mon fameux texte au survol sur la droite et pas en bas.

Reply

Marsh Posté le 13-09-2005 à 14:41:58    

http://openweb.eu.org/articles/puces_images/
il y a ce qu'il faut pour ne pas mettre de puces (même si eux ils rajoutent une image à la place.
 
Pour ton texte en survol, je te laisses chercher, il doit y avoir ce qu'il faut sur ce site, mais je sais pas exactement où.

Reply

Marsh Posté le 13-09-2005 à 19:44:23    

J'ai cherché et re-cherché... je commence à désespérer. :(
Si ca continue, j'abandonne le CSS

Reply

Marsh Posté le 13-09-2005 à 19:46:10    

barthoose a écrit :

Si ca continue, j'abandonne le CSS


Pour faire quoi ? Des sites en HTML 3.2 comme en 1995 ? Hyper-lourdingues ? Qui ne vaudront que dalle à moyen-terme ? Complètement immaintenables ? :(


Message édité par FlorentG le 13-09-2005 à 19:46:52
Reply

Marsh Posté le 13-09-2005 à 20:26:16    

des a et des span dans un ul argggg
avant d'abandonner le css, il faudrait deja des bases en html !
 
cette page pourra t'aider : http://css.alsacreations.com/Const [...] horizontal
+
 

Reply

Marsh Posté le 13-09-2005 à 20:50:42    

Je ne savais pas qu'on pouvait mettre des divs et des spans dans un ul...
 
Je suis complètement débutant en CSS, j'ai des délais assez courts et j'ai pas vraiment le temps d'approfondir la chose pour le moment.
Le site alsacréations m'a indiqué comment faire pour faire apparaitre le texte au survol de la zone de texte.
Ce que je souhaite faire est assez simple au niveau visuel,  
 
cf mon post http://forum.hardware.fr/forum2.ph [...] 0#t1198310
 
Les balises ul ne sont pas celles que je dois prendre ?
Merci pour votre aide préciseuse !

Reply

Marsh Posté le 13-09-2005 à 21:47:47    

directement dans les ul c'et des li qu'on met, En francais on déclare une liste (<ul> </ul> )et on met les éléments de la liste à l'intérieur (<LI> </LI> ) aprés, si tu veux mettre des a ou de sopan, c'est plustôt dans les LI.

Reply

Marsh Posté le 13-09-2005 à 22:02:18    

Ok merci, je vais déjà tester ceci !

Reply

Marsh Posté le 13-09-2005 à 23:12:19    

J'ai tout mis dans des li... ca ne change pas grand chose... !
 

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  7. <head>
  8.  <title>Site Industrie EAT</title>
  10.  <meta http-equiv="Content-Language" content="fr" />
  11.      <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-1" />
  13.    <meta http-equiv="Content-style-type" content="text/css" />
  15.  <style type="text/css">
  18. <!--
  20. .details li {
  21. float: left;
  22. }
  24. a {
  25. text-decoration: none; /* définition du lien qui affichera le "calque" */
  26. }
  28. a:hover {
  29. background: none; /* correction d'un bug IE */
  30. }
  32. a span { /* définition de la balise <span> inclue dans <a> */
  33. display: none;
  34. }
  36. a:hover span { /* définition de la balise <span> au survol */
  37. position:relative;
  38. display: inline;
  39. top: 0px; /* positions et dimensions du calque, que vous pouvez changer à loisir */
  40. left: 20px;
  41. background: blue;
  42. text-align: center;
  43. color: black;
  44. }
  46. ul li { /* toutes les listes auront un fond bleu */ 
  47. background: blue;
  48. display:inline;
  50. }
  51. ul li ul li{ /* toutes les listes situé dans des listes auront un fond rouge */
  52. background: red;
  53. }
  55. ul li ul li ul li{
  56. /* toutes les listes situé dans des listes auront un fond vert */
  57. background: green;
  58. }
  61. -->
  62. </style>
  65. </head>
  68. <body>
  72. <ul>
  73. <li>Niveau 1
  74.  <ul>
  75.           <li>Niveau 2
  76.    <ul class="detail">
  77.            <li>
  78.      <a href="#"><img src="test.jpg" alt="Test"/>
  79.       <span>Texte 1 Texte 2</span>
  80.      </a>
  81.     </li>
  82.    </ul>
  83.   </li>
  84.  </ul>
  85. </li>
  86. </ul>
  91. </body>
  93. </html>

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed