Twitter box

Hello à tous,

Je suis face à une interrogation sur le développement d'un push Twitter sur un mini-site.
En fait, voici ce qui a été maquetté.

http://tchock.celeonet.fr/temp/twitt.png

L'idée est donc qu'au rollover sur l'icône twitter (PNG), cette box d'affiche en dessous.

Je me demandais quelle solution vous emploieriez en HTML/CSS pour que ça soit correct question W3C et surtout en tentant de se coller à ce design ?

Des petits conseils seraient les bienvenus

Un grand merci !

Hello,

astuce pas super chouette, le tout dans une div avec un css visibility:hidden. le moineau twitter (img) avec un css visibility:visible. un div:hover avec un visibility:visible.
pas compatible IE vieille version.

pour un truc plus harmonieux, du javascript/jquery serait plus adapté.

Pour moi çà ressemble à un "tooltip", donc soit css soit jquery.
En css, çà sera difficile de personnaliser l'apparition de la bulle.
Jquery sera plus personnalisable, et plus fluide dans l'animation.
Tu peux voir ici http://pierrebertet.net/projects/jquery_simpletooltip/

Pour l'apparence, tu devras mettre l'image rayé en background du div, puis centrer un div blanc dedans...

Maxiou a écrit :
L'idée est donc qu'au rollover ET AU FOCUS sur l'icône twitter (PNG), cette box d'affiche en dessous.

Le texte de couleur #999 sur fond blanc présente un rapport de contraste de seulement 2,8:1 on est loin des 4,5:1 demandés par les WCAG 2.0

Astuce tirée du bouquin de Raphaël Goetter intitulé « CSS2 » :
HTML :

<a href="#" class="twitter"><img src="twitter.png"><span>Ici le contenu de la boîte</span></a>

CSS :

a.twitter {
  position: relative;
  margin: 0;
  padding: 0
  background: #404040;
}

a.twitter span {
  display: none;
}

a.twitter:hover {
  background: #FFF;
  border: #DDD outset 1px;
  z-index: 500;
}

a.twitter:hover span {
  display: block;
  margin: 0;
  padding: 20px;
  color: #A0A0A0;
  width: 420px;
  height: 190px
  position: absolute;
  z-index: 500;
  top: Xpx;
  left: -Ypx;
  background: transparent url(fond-infobulle.png);       
}

Fonctionne en principe sur IE anciennes versions
Défaut : pas la possibilité d'intégrer des éléments block (pas de li, de p, ...)
Modifié par jojaba (19 Sep 2011 - 21:52)