Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2692 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Petit soucis sur mon tableau CSS

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Petit soucis sur mon tableau CSS

n°1197741
barthoose
Posté le 12-09-2005 à 16:24:27  profilanswer
 

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.

mood
Publicité
Posté le 12-09-2005 à 16:24:27  profilanswer
 

n°1197764
FlorentG
Unité de Masse
Posté le 12-09-2005 à 16:53:53  profilanswer
 

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]

n°1197783
barthoose
Posté le 12-09-2005 à 17:05:30  profilanswer
 

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

n°1197796
xtof_83
Freeride Spirit
Posté le 12-09-2005 à 17:13:35  profilanswer
 

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

n°1197801
barthoose
Posté le 12-09-2005 à 17:28:51  profilanswer
 

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

n°1197826
barthoose
Posté le 12-09-2005 à 18:11:26  profilanswer
 

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>

n°1197844
Masenko
Posté le 12-09-2005 à 19:00:26  profilanswer
 

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:

n°1197943
barthoose
Posté le 12-09-2005 à 22:34:02  profilanswer
 

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
n°1197971
barthoose
Posté le 12-09-2005 à 23:45:07  profilanswer
 

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

n°1198032
FlorentG
Unité de Masse
Posté le 13-09-2005 à 09:14:52  profilanswer
 

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

mood
Publicité
Posté le 13-09-2005 à 09:14:52  profilanswer
 

n°1198039
gatsusat
Posté le 13-09-2005 à 09:20:59  profilanswer
 

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>

n°1198054
omega2
Posté le 13-09-2005 à 09:32:04  profilanswer
 

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.

n°1198172
barthoose
Posté le 13-09-2005 à 10:32:44  profilanswer
 

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

n°1198177
barthoose
Posté le 13-09-2005 à 10:34:51  profilanswer
 

[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
n°1198185
barthoose
Posté le 13-09-2005 à 10:37:10  profilanswer
 

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:

n°1198187
gatsusat
Posté le 13-09-2005 à 10:37:13  profilanswer
 

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

n°1198211
xtof_83
Freeride Spirit
Posté le 13-09-2005 à 10:50:46  profilanswer
 

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

n°1198237
barthoose
Posté le 13-09-2005 à 11:00:52  profilanswer
 

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
n°1198259
xtof_83
Freeride Spirit
Posté le 13-09-2005 à 11:07:33  profilanswer
 

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

n°1198276
barthoose
Posté le 13-09-2005 à 11:12:02  profilanswer
 

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 ?

n°1198278
FlorentG
Unité de Masse
Posté le 13-09-2005 à 11:13:01  profilanswer
 

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]

n°1198300
omega2
Posté le 13-09-2005 à 11:19:10  profilanswer
 

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.

n°1198310
barthoose
Posté le 13-09-2005 à 11:24:15  profilanswer
 

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

n°1198366
barthoose
Posté le 13-09-2005 à 11:48:13  profilanswer
 

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

n°1198441
omega2
Posté le 13-09-2005 à 13:43:44  profilanswer
 

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.

n°1198461
barthoose
Posté le 13-09-2005 à 14:01:01  profilanswer
 

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
n°1198494
omega2
Posté le 13-09-2005 à 14:18:46  profilanswer
 

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?

n°1198507
barthoose
Posté le 13-09-2005 à 14:34:00  profilanswer
 

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

n°1198509
barthoose
Posté le 13-09-2005 à 14:36:21  profilanswer
 

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.

n°1198522
omega2
Posté le 13-09-2005 à 14:41:58  profilanswer
 

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ù.

n°1198836
barthoose
Posté le 13-09-2005 à 19:44:23  profilanswer
 

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

n°1198837
FlorentG
Unité de Masse
Posté le 13-09-2005 à 19:46:10  profilanswer
 

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
n°1198849
Lra|zr
Posté le 13-09-2005 à 20:26:16  profilanswer
 

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
+
 

n°1198859
barthoose
Posté le 13-09-2005 à 20:50:42  profilanswer
 

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 !

n°1198878
omega2
Posté le 13-09-2005 à 21:47:47  profilanswer
 

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.

n°1198887
barthoose
Posté le 13-09-2005 à 22:02:18  profilanswer
 

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

n°1198919
barthoose
Posté le 13-09-2005 à 23:12:19  profilanswer
 

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>

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Petit soucis sur mon tableau CSS

 

Sujets relatifs
[CSS]Compatibilité avec IE[CSS] Petit bug d'affichage sous IE maybe les float: en cause
[XHTML et CSS]Projet: Quand le neophyte apprend les standards(v Page3)CSS : quelle solution pour conserver mise en page avec layout ?
[CSS] Problème avec hover & active[CSS] mise en page d'un menu vertical : pb sous FF
[MySQL / Java] Petit souci avec les champs de type DATE[réglé] firefox ne lit plus ma feuille CSS mais IE oui!
CSS probleme avec le tag <label> dans firefox 
Plus de sujets relatifs à : Petit soucis sur mon tableau CSS

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.168 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR