28172 sujets

CSS et mise en forme, CSS3

Inversion d'ordre d'élément affiché suivant affichage avec ou sans c

Bonjour,

j'ai un pb concernant le codage css/xhtml... je ne sais pas comment m'y prendre...

pour faire simple, j'ai un tableau de 3 colonnes qui me sert de listage de sous-rubrique...la ligne remplit de gauche à droite, puis passage à la ligne suivante.

Dans chaque case j'ai un bloc avec une image et une légende. La légende et aussi le titre de la rubrique. Au passage de la souris, une présentation de la rubrique apparaît en infobulle.

Ceci est fonctionnel. Mais j'aurais aimé (pour une meilleur indexation et une meilleur lecture sans css) de façon à ce qu'en affichage sans css ça soit qqch du style

Titre
Image
Description

et en lecture avec les images:
Image
Titre (avec Description en info-bulle au passage de la souris)

et je ne sais pas comment coder ça en xhtml et css...
heu... suis-je clair??

Merci
As-tu une image ou un site en ligne où nous pourrions voir ce que tu cherches à faire ? Puisque c'est fonctionnel, ça ne devrait pas être un gros problème.

Car, malheureusement, je ne visualise pas du tout ce que tu veux faire Smiley cligne
Créer un class unique en css qui définira une info-bulle L'info-bulle apparaîtra à un endroit précis sous la cellule au passage de la souris. Par exemple comme ceci:
-css-
.infobulle
{
display:inline;
position:relative
}

.infobulle:hover
{
z-index:5 /*INDICE DE PLAN SUPERIEUR A LA CELLULE*/
}

.infobulle span /*L'INFOBULLE DEMEURE CACHEE JUSQU'AU PASSAGE DE LA SOURIS*/
   {
   display: none 
   }

.infobulle:hover span
   {
   display:inline;
   position: absolute;
   text-align: center; 
   background-color: #_ _ _; /*UN FOND COLORE EST INTERSSANT*/
   color: #_ _ _; /*UNE AUTRES COULEUR DE TEXTE*/
   border:1px solid #_ _ _; /*UNE BORDURE ...*/
   padding: 5px;
   bottom: 0; /*PLACEMENT DE L'INFOBULLE SOUS LA CELLULE*/
   left: 0;
   }


-html-(à rédiger pour chaque cellule)

<a class="infobulle">TEXTE<span>TEXTE<img src="_/_.jpg alt="" /></span></a>


Il suffirait d'ajuster les "_ _ _" à vos besoins. Si un 0 est noté en d'autres chiffres, ne pas omettre d'y faire suivre "px" (sans espace, par ex: 6px)

Un intérêt du <span>_</span> est de charger le contenu des info-bulles à l'ouverture de la page, et d'être rendu instantanément au passage de la souris. Ce principe peut-être même appliqué à des sons .swf ou des vidéos .swf: le résultat est alors bluffant!
Dans mon post j'ai omis de fermer la src="_"

<a class="infobulle">TEXTE<span>TEXTE<img src="_/_.jpg" alt="" /></span></a>
Sujet clos
Aller à