Page 1 sur 1
lien <=> images rollover css ...avec les classes...[RE
Publié : 17 mai 2009, 21:13
par ToutiWeb
Bonsoir à tous !
hé oui c'est encore moi ...
je fais ma partie "enfants" sur mon site pour avancer tout de même un peu ...
vu que je n'arrive pas à changer les styles...
mais voilà j'ai lu les tutos traditionnellement doués et donnés...et les différents posts sur le sujet ... et si j'ai réussis à faire (grâce au forum) :
- mon positionnement css pour le design
- des rollovers sur deux images ...
...
je planche , pioche , sèche sur :
comment mettre un lien en classe
pour lien 1 ( sur le livre vers mon livre d'or :
http://www.i-services.net/membres/livre ... &sid=76078 )
puis lien 2 (sur l'étiquette vers ma ToutiWeboutique :
http://www.comboutique.com/toutiweboutique )
puis les autres futurs liens de la page
qui se nommeraient lien3
...
voici ma page essai :
http://toutiweb.free.fr/ToutiWebambinos/essaicss2.html
et mon code css :
Code : Tout sélectionner
/* Generated by KompoZer */
.entete {
width: 960px;
background-image: url(images/designToutiWebambinos_01.jpg);
background-position: center center;
background-repeat: no-repeat;
height: 128px;
}
.entete:hover {
background-position: center center;
background-repeat: no-repeat;
width: 960px;
height: 128px;
background-image: url(images/designToutiWebambinos_01-ov.jpg);
}
.ToutiWeboutique {
background-position: center center;
background-repeat: no-repeat;
width: 132px;
height: 155px;
background-image: url(images/designToutiWebambinos_02.jpg);
}
.ToutiWeboutique:hover {
background-position: center center;
background-repeat: no-repeat;
width: 132px;
height: 155px;
background-image: url(images/designToutiWebambinos_02-ov.jpg);
}
#menugeneral {
background-image: url(images/designToutiWebambinos_03.jpg);
background-position: center center;
background-repeat: no-repeat;
width: 828px;
height: 155px;
margin-left: 132px;
margin-top: -155px;
}
#ballon {
background-image: url(images/designToutiWebambinos_04.jpg);
background-position: center center;
background-repeat: no-repeat;
width: 132px;
height: 840px;
}
#contenu {
background-color: white;
width: 503px;
height: 840px;
margin-left: 132px;
margin-top: -840px;
}
#arbre {
background-image: url(images/designToutiWebambinos_06.jpg);
background-position: center center;
background-repeat: no-repeat;
margin-left: 635px;
margin-top: -840px;
width: 325px;
height: 840px;
}
#racine {
background-image: url(images/designToutiWebambinos_07.jpg);
background-position: center center;
background-repeat: no-repeat;
width: 960px;
height: 255px;
}
voilà merci d'avance !
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
Publié : 18 mai 2009, 13:11
par Invité
Bonjour Toutiweb,
Il me semble que dans le code html il faudrait voir l'indication des liens (a href...) Tant que tu n'indiques pas le chemin de la page à lier, je pense que ça ne peut pas fonctionner. Mais tu auras sans doute des avis plus autorisés que le mien.
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
Publié : 18 mai 2009, 13:34
par Gagea
L'invité c'était moi. Je n'avais pas vu que j'étais déconnectée. De plus, ce matin, tout le forum était verrouillé !
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
Publié : 18 mai 2009, 16:34
par ToutiWeb
oui j'ai vu que le forum était vérouiller ça m'a fait bizarre ! hihihi
mais c'est passé apparement...
pour mettre le href c'est là que je bloque car lorsque je le mets dans la classe ou le div ou y'a l'image ça ne fonctionne pas
donc là j'ai tout épuré pour être sûre de partir "au propre" et de comprendre les aides qui me seront dictées ... hihihi
mais bon j'y travaille je vais voir ...
merci
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
Publié : 18 mai 2009, 16:50
par chinon37
Il n'est pas possible de mettre un lien sur un div vide! ni sur une image de fond.
Donc soit tu mets l'image insérée dans le div ace lien sur cette image, soit du contenu texte pour le lien.
Le forum était en migration vers de nouveaux serveurs ce matin, avec nettoyage de printemps!
Publié : 18 mai 2009, 16:53
par ToutiWeb
chinon37 a écrit :Il n'est pas possible de mettre un lien sur un div vide! ni sur une image de fond.
pffff zut et flûte !
chinon37 a écrit :
Donc soit tu mets l'image insérée dans le div avec lien sur cette image, soit du contenu texte pour le lien.
si je mets l'image insérée dans le div je ne pourrais plus écrire dessus non ? car c'est ce que j'avais fait et lorsque je voulais écrire du texte dessus ça ne faisait que la sélectionner ...
chinon37 a écrit :Le forum était en migration vers de nouveaux serveurs ce matin, avec nettoyage de printemps!
ahhhh aaaahhh bonne nouvelle ça !!
merci de ton aide
edit :
ce design a été fait sous photoshop ...
et voici le code qu'il donne :
Code : Tout sélectionner
<!-- ImageReady Slices (designToutiWebambinos.psd) -->
<table id="Tableau_01" border="0" cellpadding="0" cellspacing="0" width="960" height="1378">
<tbody><tr>
<td colspan="3">
<a href="#" onmouseover="changeImages('designToutiWebambinos_01', 'images/designToutiWebambinos_01-ov.jpg'); return true;" onmouseout="changeImages('designToutiWebambinos_01', 'images/designToutiWebambinos_01.jpg'); return true;" onmousedown="changeImages('designToutiWebambinos_01', 'images/designToutiWebambinos_01-ov.jpg'); return true;" onmouseup="changeImages('designToutiWebambinos_01', 'images/designToutiWebambinos_01-ov.jpg'); return true;">
<img name="designToutiWebambinos_01" src="images/designToutiWebambinos_01.jpg" alt="" border="0" width="960" height="128"></a></td>
</tr>
<tr>
<td>
<a href="#" onmouseover="changeImages('designToutiWebambinos_02', 'images/designToutiWebambinos_02-ov.jpg'); return true;" onmouseout="changeImages('designToutiWebambinos_02', 'images/designToutiWebambinos_02.jpg'); return true;" onmousedown="changeImages('designToutiWebambinos_02', 'images/designToutiWebambinos_02-ov.jpg'); return true;" onmouseup="changeImages('designToutiWebambinos_02', 'images/designToutiWebambinos_02-ov.jpg'); return true;">
<img name="designToutiWebambinos_02" src="images/designToutiWebambinos_02.jpg" alt="" border="0" width="132" height="155"></a></td>
<td colspan="2">
<img src="images/designToutiWebambinos_03.jpg" alt="" width="828" height="155"></td>
</tr>
<tr>
<td>
<img src="images/designToutiWebambinos_04.jpg" alt="" width="132" height="840"></td>
<td>
<img src="images/designToutiWebambinos_05.jpg" alt="" width="503" height="840"></td>
<td>
<img src="images/designToutiWebambinos_06.jpg" alt="" width="325" height="840"></td>
</tr>
<tr>
<td colspan="3">
<img src="images/designToutiWebambinos_07.jpg" alt="" width="960" height="255"></td>
</tr>
</tbody></table>
<!-- End ImageReady Slices -->
peut-il à votre avis être adapté tout de même ? ou puis-je faire autrement pour l'utiliser qu'avec les css ? sous kompozer si je prends cette image je ne réussie pas à écrire dessus (=à la mettre en fond)
mais peut-être que vous vous auriez une idée ?
merci d'avance !
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10
Publié : 19 mai 2009, 07:55
par ToutiWeb
bon ben voilà ce n'est pas parfait
mais j'ai trouvé une solution avec le code donné par photoshop ...
je garderais ça
http://toutiweb.free.fr/ToutiWebambinos/essai1.html
l
e temps de pouvoir savoir comment mettre le lien sur une images tout en pouvant écrire dans mon cadre blanc ... et pour faire mes menus !
voilà n'hésitez pas si vous savez comment faire ça serait "plus propre" que ce code à mon avis !
Merci
Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9.0.10) Gecko/2009042316 Firefox/3.0.10