28173 sujets

CSS et mise en forme, CSS3

[Réouvert] Info-Bulle CSS

Bonjour à tous,

Un petit souci dans l'application du système d'info bulle tout en CSS (trouvé sur Alsa et un peu partout sur le net).

L'adresse de mon site est la suivante http://www. rapidojeux.com/

Mon test porte sur les liens (nom du jeu + image) du bloc "Notre sélection de jeux gratuits".
Je souhaite y mettre une infobulle mais celle-ci ne s'affiche pas entièrement (sauf sous IE) et bien qu'ayant précisé la largeur, le texte ne revient pas à la la ligne.

En revanche, dès que j'aaplique cette technique en dehors de la liste à puces que represente ces blcs, tout semble bien marcher...

Mon css sur la liste:



.hasard {
	float:left;
}
.hasard h3 {
	margin-top: 8px;
	background: #CC3300;
	padding-left: 5px;
	border-left: 5px solid #839F13;
	color: #FFF;
	font: bold 1.1em inherit;
}
.hasard li {
	float: left;
	text-align: center;
	display: inline;
	margin: 0 2px 5px 2px;
	width: 126px;
	font-size: 0.8em;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;}
.hasard a {
  position:relative;
}
.hasard a:hover {
  text-decoration: none;
  background: none;
}
.hasard a span {display: none;}
.hasard a:hover span {
  display: inline;
  position: absolute; 
  top:1.5em;
  left:0.5em;
  z-index: 20;
  background: #446D87;
  color: #fff;
  border:1px solid #000;
  width:150px;
  text-align:center;
  font-weight:normal;
  font-size: 10px;
  line-height:12px;
  padding:2px 4px;
}


Toute aide serait la bienvenue Smiley biggrin
Modifié par jojo3c (19 Jun 2007 - 21:36)
Salut,

Pour essayer:
.hasard li {
	float: left;
	text-align: center;
	margin: 0 2px 5px 2px;
	width: 126px;
	font-size: 0.8em;
}
	

.hasard a {
	display: block;
	width: 126px;
  	position:relative;
}
.hasard a:hover {
  	text-decoration: none;
  	background: none;
}
.hasard a span {display: none;}
.hasard a:hover span {
 	display: block; 
 	position: absolute; 
 	top:1.5em;
 	left:0.5em;
 	z-index: 20;
 	background: #446D87;
	color: #fff;
  	border:1px solid #000;
  	width:150px;
  	text-align:center;
  	font-weight:normal;
  	font-size: 10px;
  	line-height:12px;
  	padding:2px 4px;
}
 
.hasard a img {	 /* En prime [lol] ...*/
	margin:0;
	padding: 0;
	width: 90px;
	height: 60px;
}

.hasard a em {	/* En prime [lol] ...*/
	display: block;
	width: 126px;
	height: 32px;
	font-weight: bold;
	font-style: normal;
	line-height: 10px;

}


Et
			<ul class="hasard">
				<li><a href="http://www.rapidojeux.com/Braap-Braap,jeux-auto-moto.html" title="Braap Braap"><em>Dangerous Dave and Brutal Bob Mole Surfing</em><img src="http://www.rapidojeux.com/jeux/auto-moto/braapbraap.gif" alt="Braap Braap" /><span>texte et images peuvent être placés ici</span></a>Auto Moto</li>

<li><a href="http://www.rapidojeux.com/Simon,jeux-enfant.html" title="Simon"><em>Simon</em><img src="http://www.rapidojeux.com/jeux/enfant/simon.gif"  alt="Simon" /><span>texte et images peuvent être placés ici texte et images peuvent être placés ici</span></a>Enfant</li>	

<li><a href="http://www.rapidojeux.com/Frozen-Bubble,jeux-arcade.html" title="Frozen Bubble"><em>Frozen Bubble</em><img src="http://www.rapidojeux.com/jeux/arcade/frozenbubble/frozenbubble.gif"  alt="Frozen Bubble" /><span>texte et images peuvent être placés ici texte et images peuvent être placés ici texte et images peuvent être placés ici</span></a>Arcade</li>

<li><a href="http://www.rapidojeux.com/Makos,jeux-reflexion.html" title="Makos"><em>Makos</em><img src="http://www.rapidojeux.com/jeux/reflexion/makos.jpg" alt="Makos" /><span>texte et images peuvent être placés ici</span></a>Réflexion</li>

<li><a href="http://www.rapidojeux.com/Bomb-It,jeux-combat.html" title="Bomb It"><em>Bomb It</em><img src="http://www.rapidojeux.com/jeux/combat/bomb_it.gif" alt="Bomb It" /><span>texte et images peuvent être placés ici</span></a>Combat</li>
			</ul>
Merci du coup de main ghost ! On y est presque.
Cela s'affiche parfaitement sous FF 1.5 (ubuntu)
En revanche sous FF 2.0 et IE 6 sous windows, les bulles passent sous les vignettes de droite ou du dessous (en fonction de la taille du texte) et sont donc à moitié masquées...
Et un ami qui l'a testé semble lui, avoir la bulle au dessus du pointeur de la souris...

J'ai essayé de jouer sur les z-index en ajoutant sur l'image par exemple mais cela ne semble rien changer...
Modifié par jojo3c (16 Apr 2007 - 22:15)
Désolé Smiley lol 
.hasard li {
	float: left;
	text-align: center;
}

.hasard a {
	display: block;
	width: 125px;
  	position:relative;
	margin: 2px 2px 5px 2px;
	width: 125px;
	font-size: 0.8em;
}

.hasard a:hover {
  	text-decoration: none;
  	background: none;
	z-index: 500;
}

.hasard a span {display: none;}
.hasard a:hover span {
 	display: block; 
 	position: absolute; 
 	top:1.5em;
 	left:0.5em;
 	background: #446D87;
	color: #fff;
  	border:1px solid #000;
  	width:200px;
  	text-align:center;
  	font-weight:normal;
  	font-size: 10px;
  	line-height:12px;
  	padding:2px 4px;
	z-index: 50;
}


Ca devrait coller maintenant
Super Ghost ca marche impec !

J'ai encore une petite correction pour centrer le texte sous la vignette dans FF (ok sous IE) et à mettre en forme la bulle.

Encore un grand merci car là j'étais un peu perdu. Smiley biggrin Smiley biggrin
Salut,

Pour le centrage essaye :
				<li><a href="http://www.rapidojeux.com/RaidenX,jeux-shootem-up.html" title="RaidenX"><em>RaidenX</em><img src="http://www.rapidojeux.com/jeux/shootem-up/raidenx.gif" width="90" height="60" alt="RaidenX" /><span>Ce shootemup est exceptionnel. A essayer sans tarder ! <strong>Attention, c'est assez lourd à charger</strong><br />
<u>Pour votre culture</u> : "Raiden" est mot japonais qui signifie "combattre le tonnerre", tout est dit.</span><br />Shoot'em up</a></li>


Sur tes <li>

Bon courage
Bon j'ai bien avancé mais j'ai encore quelques soucis :

1. j'ai mis une info-bulle dans le menu de gauche, qui affiche une vignette du jeu.
>Pb sous IE car la vignette passe en dessous des vignettes situées sur le bloc central. De même la vignette passe en dessous du contenu lorsque je suis sur un jeu... j'ai testé quelques z-index sans succès...

2. le temps de chargement sous IE a cause des images dans le menu est horrible. Y a t'il un moyen pour ne charger ces vignettes qu'au moment ou l'on survole le lien ?

Merci d'avance à vous (et peut-etre à Ghost Smiley cligne )
Bonjour à tous,

J'ai abandonné les questions précédentes (car pas très genantes au fond). En revanche, j'ai un nouveau souci que je n'arrive pas à regler.

Uniquement sous IE 6, sur cette page http://www.rapidojeux.com/jeux-reflexion,1.html :

1. quand je survole le logo flash, mon bloc disparait en partie ce qui fait que je ne peux plus cliquer sur le lien.
En procédant par élimination, j'en suis arrvié à la conclusion que c'est las balise <a> qui pose problème mais je n'arrive pas à voir pourquoi...
2. la bulle qui s'affiche au survol est bien trop décalé à droite (à comparer avec FF ou IE7 pour le comportement normal).

Si quelqu'un pouvait m'aider (surtout pour le point 1), car c'est aussi le même styme qui est utilisé pour la suppression de ses jeux par l'utilisateur, et du coup impossible pour lui de les supprimer.

Merci d'avance à tous !
Modifié par jojo3c (19 Jun 2007 - 21:34)
Salut Ghost,

C'était juste un problème d'url ou tu veux un screenshot pour t'aider à comprendre ?

Merci par avance de ton aide Smiley biggrin
Salut,

Désolé c'est trop emberlificoté pour moi Smiley cligne tente un commentaire conditionnel pour IE6 ...

<edit>
Heu ...
HTML: Failed validation, 103 errors
CSS : 11 erreurs
</edit>
Modifié par ghost (21 Jun 2007 - 01:43)
Sujet clos
Aller à