28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous.

Je travaille actuellement sur un template pour le CMS Joomla! dans sa version 1.5.

J'ai trouvé un composant sympathique pour un Glossaire, qui détecte les mots présents dans ce glossaire dans les articles et permet au survol de la souris de les afficher.

Le rendu actuel (après quelques modifs CSS) est le suivant:

http://data.imagup.com/9/1122979154.png

Le problème surviens quand ce mot est placé sur le bord de l'article (en bas ou à droite), car la le span est "coupé" en ne s'affiche pas totalement:

http://data.imagup.com/8/1122979252.png

Voici le code en question:


a.glossarylink {
	background: url(../images/plugin/ext_popup.gif) 0 4px no-repeat;
	padding:0 0 0 12px;
	border-bottom: 1px dashed #802A2A;
	text-decoration: none;
	position:relative;
	z-index:24;
}

a.glossarylink:hover {
	position: relative;
	text-decoration: none;
	z-index:25;
}

a.glossarylink span {
	display: none;
}

a.glossarylink:hover span {
	display: block;
	position: absolute;
	top: 10px;
	left: 0;
	width: 18em;
	padding: 5px;
	margin: 10px;
	z-index: 100000;
	background-color: #f0f0f0;
	border: 1px dotted #c0c0c0;
	text-decoration: none;
}



<a class="glossarylink" title="titre" href="/liens-vers-le-glossaire.html">
nous
<span>Contenu du bloc présentant le mot du glossaire (en gris sur l'image)</span>
</a>


Pouvez vous me dire ce qu'il ne vas pas et comment je pourrais faire en sorte que le bloc s'affiche sur une position différente si le mot est prés d'un des bords ?

Merci à vous. Smiley smile
Le bloc qui contient l'article (ou meme celui qui contient tous les article) doit avoir un paramètre:

orverflow: hidden;

Passe le en overflow: visible; voir kill completement la ligne.
il doit y avoir un overflow : hidden dans un des conteneurs je pense

ah grillée par ptitvincent je vois Smiley smile Smiley smile
Bonjour.

Effectivement, le problème était bien celui la.

Cependant, le fait de l'avoir enlevé, ne risque pas de poser d'autres problèmes ?

Merci à vous. Smiley ravi