Page 1 sur 1

cliquer et faire apparaitre une sous fenêtre

Publié : 10 févr. 2009, 14:08
par quandiris
J'avance, j'avance dans mon site internet. J'ai fait des tas de choses et je suis assez contente de moi! Exemple une carte du territoire avec des noms clignotants qui quand on clique nous dirige vers le lien!

Mais là je bloque.....

je cherche à faire des boutons avec quand on passe dessus ou quand on clique une "petite" fenêtre qui apparait avec un petit texte. c'est à dire que ma page reste en fond.

Pourriez vous me guider et me dire comment je dois m'y prendre

merci!
quandiris


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 10 févr. 2009, 16:33
par Fabrice.Tres.Net
Rapidos.

Tu peux utiliser pour les liens le champ title qui s'affiche au survol.

Sinon il faut regarder avec la propriété css :hover qui permet de faire (ap ou dis)paraître des choses au survol également.
En code cela va donner:

Code : Tout sélectionner

<a class="popupcss" href="..."><span> Texte caché qui n'apparait qu'au survol</span><img src="image.png" /> </a>

En css tu auras qlq chose comme :

a.popupcss  span {
  display: none;
}
a.popupcss:hover  span {
  display: block;
  position: absolute;
  left: 15px
}

[/code]

Publié : 10 févr. 2009, 16:44
par quandiris
Merci

oui ça pourrait répondre à ma recherche, je vais essayer!

merci à toi :)

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 12 févr. 2009, 10:05
par quandiris
Bon ben j'y arrive pas!!!!! :oops:

Puis je savoir comment vous faite entre votre CSS et votre HTML
est-ce que vous faites des fichiers séparés!

Moi j'ai codé avec Kompozer, les deux sont dans le même fichier!

Après si on regarde bien on devrait se retrouver avec des fichiers comme quand on code avec Notepad non? La je trouve que ça fait fouilli!

Je veux bien vos expériences et comment vous avez fait pour vous y retrouver? :roll:

:shock: tapez pas, j'suis vraiment novice!!! :roll: :cry:



Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 12 févr. 2009, 10:44
par chinon37
le mieux serait que ce soit toi qui envoie ton code: on pourrait voir où tu as fait l'erreur, si erreur il y a...

Publié : 12 févr. 2009, 11:21
par quandiris

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html
 lang="fr-fr"><head><meta
 content="text/html; charset=ISO-8859-1"
 http-equiv="content-type"><title>Mise en page CSS</title><style
 type="text/css">
#entete {
width: 100%;
}
#menu {
border-style: groove;
border-color: #3333ff;
float: left;
list-style-type: none;
position: absolute;
width: 196px;
background-color: #85b2ff;
list-style-image: url(image/puce.jpg);
list-style-position: inside;
}
#texte {
margin-left: 250px;
}
#pied {
border-style: groove;
border-color: #000099;
clear: left;
background-color: #85b2ff;
position: absolute;
}
</style></head>
<body
 style="margin-top: 0px; height: 675px; margin-left: 0px; width: 730px;"><div
 style="width: 1004px; height: 100px;" id="entete"><span
 style="text-decoration: underline;"><img
 style="width: 1000px; height: 105px;" alt=""
 src="../image/icones/entete.jpg"></span><br></div><div
 style="width: 235px; left: -2px; bottom: auto; top: 106px; height: 458px;"
 id="menu"><div><div><a
 href="file:///C:/CCM/ccm/Presentation/competences.html"><img
 style="border: 0px solid ; left: 8px; top: 154px; width: 233px; height: 33px;"
 alt="comp&eacute;tences" src="../image/icones/actif/commissions.jpg"></a></div></div><div></div><br><br><br><a
 href="Presentation.html"><img
 style="border: 0px solid ; left: 1px; width: 236px; top: 400px; height: 21px;"
 alt="RETOUR" src="../image/GIF/perso.gif"></a><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><div
 style="text-align: center;"><img
 src="../kompozer_80x15.png" alt="kompozer_80x15.png"><br></div></div><div
 style="width: 723px;" id="texte"><br><div
 style="text-align: center;"><br></div><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></div><div
 style="text-align: center; margin-top: 360px; width: 1000px; height: 29px; top: 208px; left: -2px;"
 id="pied">&nbsp;<a href="../index.html">Accueil</a>
| <a href="../Environnement/Environnement.html">Environnement</a>
| <a href="../Economie/Economie.html">Economie</a>
| <a href="../Logement/logementcadredevie.html">Logement
et cadre de
vie</a> | <a href="../Vie%20locale/Vielocale.html">Vie
locale</a>
| <a href="../marches/Marches.html">March&eacute;s</a>
|
<a href="../liens/Liens.html">Liens</a>
| <a href="mailto:../Contact.html">Contact</a></div></body></html>
Alors ça va faire brouillon mais ça c'est mon code de page avant d'avoir inséré mon image pour laquelle je veux ouvrir une petite fenête sans enlevé ce qui est inscrit autour!

Je vais faire ma présentation sans ce lien et je vous remets le code!

:( je trouve que ça fait pas clean mon truc!!!

Je ne sais pas si je peux coder dans notepad et reprendre dans Komposer?
Avec le xhtml et le css dans note pad je m'en sors car c'est structuré!
:shock:


Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6

Publié : 12 févr. 2009, 13:32
par chinon37
Tu peux installer l'extension Nsmcontext pour Kpz, tidy, et Notepad++.
Avec tout ça, tu as un outil super.
Tu pourras faire la navette facilement entre Notepad++ (ou un autre éditeur de texte comme Komodo edit) et KpZ.
Les modalités d'installation sont là: http://josar.free.fr/tutoKompozer/kompozerInstal.html

Message envoyé avec : Mozilla/5.0 (X11; U; Linux x86_64; fr; rv:1.9.0.6) Gecko/2009020911 Ubuntu/8.04 (hardy) Firefox/3.0.6