28173 sujets

CSS et mise en forme, CSS3

Mettre un tableau en infobulle

Bonjour à tous,

Jusqu'à maintenant j'avais réussi à ne pas poster de question sur le forum mais là je sèche... et j'ai besoin de vous.

Pour mon boulot je dois afficher la liste de nos serveurs à maintenir avec des codes couleurs en fonction de leur état. vert, orange, rouge.
Dans chaque case s'affiche donc le nom du serveur et son type et je veux mettre sur chacun de ces deux liens une infobulle en css sous forme de tableau :

- Le premier lien (nom) affichera en infobulle et dans un tableau la liste des libellés d'erreurs (récupérés en base de données auparavant) de la machine à un moment donné.
- Le second lien (type) affichera en infobulle et dans un tableau toutes les infos sur le serveur en question : @IP, localisation, contrat de maintenance etc...

Mes problèmes :

- Autant je sais grâce à vos conseils comment afficher une image ou du texte en infobulle grâce au span autant afficher un tableau à la place du texte par exemple je ne sais pas faire. (Rajouter un tableau dans le span fonctionne mais n'est pas du tout conforme aux normes...)

- Mon tableau principal fait une taille de 95% de l'écran pour que tout loge sans barre de défilement et je vais donc afficher le tableau d'infobulle très à droite et très en bas de l'écran ce qui va faire sortir les infobulles de l'écran Smiley decu Je voudrais éviter cela.

Notre version actuelle fonctionne avec un Javascript mais je voudrais éviter d'en mettre sur ce site. Et petite précision cette page doit fonctionner sous IE et Firefox.

Si quelque chose vous manque comme info n'hésitez pas à me poser la question.
J'attend votre aide avec impatience.
D'avance merci.
Voici un aperçu de ce que je voudrais obtenir.
Bon là c'est juste une ébauche sans mise en forme. Le paufinage viendra plus tard...

upload/9106-info.jpg

On obtient le tableau en passant simplement la souris sur un des liens "Type de serveur" ou "nom du serveur"
Modérateur
bonjour,

une solution js serait plus approprié Smiley smile .

un essai "css" :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML 4.01 </title>
<style type='text/css'>
a span.presente { /* on cache en visuel seulement */
	position:absolute; 
	height:0;
	width:0;
	overflow:hidden;
	z-index:-1;
}
a:hover span.presente {
	border:1px outset  #333;
	padding:0.2em 0.2em 0em;
	width:31em;
	overflow:hidden;
	background:#ddd;
	height:auto;
	z-index:1;
	display:block;
}
a:hover {
	width:auto;
	color:#555;
	text-decoration:none;
}
a:hover span.presente {
zoom:1;
}
p {width:200px;}

a:hover span.presente b {
	/*display:inline-block;*/
	float:left;
	width:12em;
	border:1px inset  #333;
	margin-bottom:0.2em;
	padding-right:1em;
	text-align:right;
	background:#eee;
	clear:left; 
}
a:hover span.presente span {
	border:1px inset  #333;
	/*display:inline-block;*/
	float:right;
	text-align:center;
	width:17.4em;
	margin-bottom:0.2em;
	overflow:hidden;
	background:#eee;
}
</style>
</head>
<body>

<p>Pour voir les infos complementaires  survolé ou cliquer le lien suivant	<a href="#" title="aller au Serveur" >test tab over
<span class="presente">
	<b>Type/Nom du serveur :</b>
	<span >Serveur 1</span>

	<b>Adresse IP :</b>
	<span >0</span>

	<b>Lieu :</b>
	<span >0</span>

	<b>Salle :</b>
	<span >0</span>

	<b>Digiport :</b>
	<span >0</span>
</span>
 .</a>
test sur  hover</p>
</body>
</html>


Il est fortement deconseillé d'avoir des liens avec un contenu si long , cela a étè évoqué sur le forum ici : http://forum.alsacreations.com/topic.php?fid=1&tid=18370&s=hover

++
Eneffet il risque d'y avoir pas mal de contenu dans chaque infobulle avec probablement des liens...

Tant pis je vais me repencher sur le javascript alors Smiley ohwell

Merci pour ta réponse et d'avoir pris le temps de te pencher sur ma question.
Sujet clos
Aller à