28220 sujets

CSS et mise en forme, CSS3

Margin négatif possible ?

Bonjour,
je cherche à faire une info_bulle mais je ne parviens pas à positionner la bulle en haut à gauche du lien...
Je recopie ici la partie qui gère me semble-t-il, le positionnement avec "margin".
J'ai mis de signe - devant, ça change rien.
Il faut dire que je suis assez nul en code...!(;o))))
Merci pour les aides !

.infobulle{
	position: absolute;
	visibility : hidden;
	border: 1px solid Black;
	padding: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #FFFFCC;
	margin: 10px 40px;
}

Modifié par metis15 (09 Nov 2005 - 18:20)
Bonjour Metis et bienvenu sur ce forum,
Juste pour bien commencer, il faudrait que tu mettes le code que tu as inséré en forme avec les balises code comme c'est précisé dans les règles du forum et plus particulièrement celle-ci:
http://forum.alsacreations.com/help.php#regle13
tu peux éditer ton message pour le refaire.

Ensuite à quel élément attribues-tu cette classe infobulle ? C'est difficile de te répondre si on ne le sait pas.

A plus tard Smiley cligne

julien
energizer a écrit :
Ensuite à quel élément attribues-tu cette classe infobulle ?


Vala-vala, j'ai trouvé ça dans le site code source je crois.
Ca marche bien, mais il y a quelques problèmes, dès la balise html !!(;o))

Désolé pour les bêtises, je le savais, mais...

<html>.../... Je vire ce code qui bouffe de la place pour rien !! [biggrin] 
</html>

Modifié par metis15 (10 Nov 2005 - 12:01)
Je ne sais pas exactement quel rendu tu veux obtenir, mais au vu du code que tu as mis, je te propose d'aller faire un tour sur un tutoriel de raphael.
Quand je vois un code comme celui que tu as mis, ça me fait peur. Quand je vois celui du tuto, je redeviens zen. Smiley biggrin

Je pense que ce tutoriel s'approche de ce que tu cherches
Modifié par energizer (09 Nov 2005 - 18:38)
energizer a écrit :
Je ne sais pas exactement quel rendu tu veux obtenir, mais au vu du code que tu as mis, je te propose d'aller faire un tour sur un tutoriel de raphael.
Quand je vois un code comme celui que tu as mis, ça me fait peur. Quand je vois celui du tuto, je redeviens zen.


Oui c'est sur. Je suis déjà allé voir cette page. Ce que je cherche
est dans le chapitre...
Des popups qui s'affichent en survolant des liens (infobulles améliorées)
Mais j'ai tout essayé, ça marche pas.
Raphael a écrit :

Hello,
Et ceci ?


Vi !!! ça, ça marche !
Faut juste que j'adapte la "boîte", filet noir autour, fond, tout ça !(;o))

Mais la question était de faire surgir cette boîte plutôt en bas à gauche du pointeur quand il survol le lien...
Ca, j'ai pas réussi !
Merci pour les tuyaux complémentaires s'il y en a ! Smiley smile
Raphael a écrit :
Hmm en modifiant les valeurs top et left par exemple, ou en remplaçant left par right ?


Non, ça marche pas. Ca fait des trucs bizarres (décalage à fond à droite, etc.).
Le seul truc qui va bien, c'est fixer la largeur de la boîte (300px par exemple) et de mettre une valeur négative sur left (voir ci-dessous).

Si on ne fixe pas la taille de la boîte, elle ne s'étalle pas sur la largeur disponible ; le texte passe à la ligne sous l'effet de ce qu'il y a en dessous, le bord d'un tableau par exemple. En fixant la largeur, ça le fait plus.

Mais il y a un autre problème :
Le fond et le cadre 1px de la boîte est comme transparent lorsque cette boîte est au dessus d'un champ de formulaire !
Image ci-dessous.

a.info:hover span {
	display: inline;
	position: absolute;
	top: 3em;
	left: -4em;
	background: #FFCCCC;
	text-align: left;
	color: black;
	padding: 2px;
	border: 1px solid #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	width: 300px;
upload/4019-boitebulle.gif
Je viens de faire quelques essais sur Mac :
La cata !!!!
IE 5.2, quand on survole, ça plante l'application !
Safari, les boîtes sont découpées en petits morceaux selon un dessin qui ne correspond même pas à ce qu'il y a dessous...

Donc, abandon de cette voie ? Smiley decu
Sujet clos
Aller à