Problème de Rollover sous Dreamweaver
Résolu
Ben
-
Ben -
Ben -
Bonjour,
Je suis néophyte en HTML et en CSS. De nature assez débrouillarde, je me suis lancé dans la création d'un site pour un proche. J'ai suivi un canevas de création qui semble standard : design sous Photoshop, exportation des tranches sous Dream et intégration du reste du code Html/Css. Seulement voilà, je bloque complètement sur l'intégration de Rollovers pour trois de mes menus. Je passe la fonction intégrer un Rollover sous Dream, après m'être placé dans la tranche adéquate, et misère : au lieu de venir recouvrir l'image existante, le Rollover se décale sur la droite et me fout en l'air ma mise en page (je précise qu'à ce stade je n'ai encore pas tapé une ligne de code, il ne s'agit donc pas d'un conflit avec une autre ligne, en tout cas pas par ma faute). Voici le code généré :
<td colspan="3">
<img src="images/home.jpg" width="106" height="29" alt=""><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','images/contactalt.jpg',1)"><img src="images/home.jpg" name="Image36" width="106" height="29" border="0"></a></td>
<td colspan="3" rowspan="2">
Lorsque je passe par une balise AP Div, même problème, en un peu moins grave. La seule chose qui semble solutionner mon problème, est de démarrer un nouveau doc html, d'intégrer mon graphisme comme une image de fond (centrée à gauche par défaut), et d'intégrer mon Rollover dans une Ap Div. Là, plus de souci et cela fonctionne dans Safari et Firefox. Deux soucis de taille pourtant : je veux que mon site soit centré, et dès que j'active cette option, que ce soit par CSS ou Html, je me retrouve avec des décalages de position pour mes Rollover, variables selon Safari et Firefox. Pas très pratique...la deuxième chose c'est que j'avais fait une anim' en Gif sous Photoshop pour ma bannière, qui n'existe pas sur un fond Jpeg...C'est à se tordre le cerveau, je sèche !
J'en profite pour poser la question à laquelle je ne trouve pas de réponse : Quelle est la manière la plus utilisée pour intégrer un design dans Dreamweaver, en passant par la fonction "sauver pour le web de Photoshop" et en utilisant le fichier Html ainsi crée, ou bien en l'intégrant comme une image de fond sous Dream ? Comment intégrer au mieux mes Rollovers sans foutre en l'air ma mise en page ? Dois-je renoncer à centrer mon site ? Dernière précision, j'ai essayé de l'intégrer en image de fond, mais aussi dans un tableau. Que je centre l'image de fond ou bien le tableau, je suis face aux mêmes décalages.
Voilà, j'espère que c'est compréhensible. Je ne trouve pas de fonction pour intégrer des images à mon message, ce qui serait bien plus parlant...j'attends vos remarques.
Merci d'avance,
Ben
Je suis néophyte en HTML et en CSS. De nature assez débrouillarde, je me suis lancé dans la création d'un site pour un proche. J'ai suivi un canevas de création qui semble standard : design sous Photoshop, exportation des tranches sous Dream et intégration du reste du code Html/Css. Seulement voilà, je bloque complètement sur l'intégration de Rollovers pour trois de mes menus. Je passe la fonction intégrer un Rollover sous Dream, après m'être placé dans la tranche adéquate, et misère : au lieu de venir recouvrir l'image existante, le Rollover se décale sur la droite et me fout en l'air ma mise en page (je précise qu'à ce stade je n'ai encore pas tapé une ligne de code, il ne s'agit donc pas d'un conflit avec une autre ligne, en tout cas pas par ma faute). Voici le code généré :
<td colspan="3">
<img src="images/home.jpg" width="106" height="29" alt=""><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image36','','images/contactalt.jpg',1)"><img src="images/home.jpg" name="Image36" width="106" height="29" border="0"></a></td>
<td colspan="3" rowspan="2">
Lorsque je passe par une balise AP Div, même problème, en un peu moins grave. La seule chose qui semble solutionner mon problème, est de démarrer un nouveau doc html, d'intégrer mon graphisme comme une image de fond (centrée à gauche par défaut), et d'intégrer mon Rollover dans une Ap Div. Là, plus de souci et cela fonctionne dans Safari et Firefox. Deux soucis de taille pourtant : je veux que mon site soit centré, et dès que j'active cette option, que ce soit par CSS ou Html, je me retrouve avec des décalages de position pour mes Rollover, variables selon Safari et Firefox. Pas très pratique...la deuxième chose c'est que j'avais fait une anim' en Gif sous Photoshop pour ma bannière, qui n'existe pas sur un fond Jpeg...C'est à se tordre le cerveau, je sèche !
J'en profite pour poser la question à laquelle je ne trouve pas de réponse : Quelle est la manière la plus utilisée pour intégrer un design dans Dreamweaver, en passant par la fonction "sauver pour le web de Photoshop" et en utilisant le fichier Html ainsi crée, ou bien en l'intégrant comme une image de fond sous Dream ? Comment intégrer au mieux mes Rollovers sans foutre en l'air ma mise en page ? Dois-je renoncer à centrer mon site ? Dernière précision, j'ai essayé de l'intégrer en image de fond, mais aussi dans un tableau. Que je centre l'image de fond ou bien le tableau, je suis face aux mêmes décalages.
Voilà, j'espère que c'est compréhensible. Je ne trouve pas de fonction pour intégrer des images à mon message, ce qui serait bien plus parlant...j'attends vos remarques.
Merci d'avance,
Ben
A voir également:
- Problème de Rollover sous Dreamweaver
- Iframe sous dreamweaver - Forum HTML
- Interlignes sous dreamweaver - Forum Logiciels
- Dreamweaver - Forum Gestion et lecture audio
- Telecharger dreamweaver ✓ - Forum Webmastering
- Ou telecharger gratuitement dreamweaver ? - Forum Logiciels
2 réponses
Découpe l'image avec photoshop et place tout en CSS.
J'avais fait un tuto ici: http://doc.arthezius.fr/art-1.html
J'avais fait un tuto ici: http://doc.arthezius.fr/art-1.html
Comment intégrer au mieux mes Rollovers sans foutre en l'air ma mise en page ?
Si tu veux continuer dans ta lancé avec la méthode des <table>, il faudrait exporter uniquement le bouton de survol depuis Photoshop.
Comment faire ?
Découpe ton bouton avec les tranches exactement de la même dimension que le bouton d'origine (même hauteur, même largeur).
En exportant pour le web, vérifie que ton bouton soit bien sélectionné dans l'aperçu.
Fais "enregistrer".
Au moment de choisir un dossier, regarde en bas de cette fenêtre, il y a une liste déroulante "toutes les tranches". Surtout changes cela, et sélectionne "tranche sélectionnée".
Dois-je renoncer à centrer mon site ?
Nan, tout le monde centre leur site. C'est conseillé de le faire par rapport aux écrans qui aujourd'hui sont de plus en plus grand...
Comment centrer son site ?
Si tu restes en méthode <table>, place une balise <center> dans la balise qui englobe tout le site.
Comme ceci :
<center>
<table>
....
</table>
</center>
Dans la méthode avec des <div>, il faut également une balise qui englobe tout le site qu'il faut styliser en CSS comme ceci :
en html :
<div id="mon_site_entier">
</div>
en css :
div#mon_site_entier {
width: 960px;
margin: 0 auto;
}
j'ai essayé de l'intégrer en image de fond, mais aussi dans un tableau. Que je centre l'image de fond ou bien le tableau, je suis face aux mêmes décalages.
As-tu mis une taille sur chaque éléments comprenant ton fond ?
Petite info : la méthode des tableaux est déconseillée sur internet. Ca n'aide pas à bien référencer ton site d'une part et parce que les tableaux sont obsolètes à présents et ne sont utilisé soit pour des données à informations présenter comme un tableaux (ex: caractéristique d'un produit) ou alors dans les newsletter, mais surtout pas pour intégrer un site entier.
Bon courage
Si tu veux continuer dans ta lancé avec la méthode des <table>, il faudrait exporter uniquement le bouton de survol depuis Photoshop.
Comment faire ?
Découpe ton bouton avec les tranches exactement de la même dimension que le bouton d'origine (même hauteur, même largeur).
En exportant pour le web, vérifie que ton bouton soit bien sélectionné dans l'aperçu.
Fais "enregistrer".
Au moment de choisir un dossier, regarde en bas de cette fenêtre, il y a une liste déroulante "toutes les tranches". Surtout changes cela, et sélectionne "tranche sélectionnée".
Dois-je renoncer à centrer mon site ?
Nan, tout le monde centre leur site. C'est conseillé de le faire par rapport aux écrans qui aujourd'hui sont de plus en plus grand...
Comment centrer son site ?
Si tu restes en méthode <table>, place une balise <center> dans la balise qui englobe tout le site.
Comme ceci :
<center>
<table>
....
</table>
</center>
Dans la méthode avec des <div>, il faut également une balise qui englobe tout le site qu'il faut styliser en CSS comme ceci :
en html :
<div id="mon_site_entier">
</div>
en css :
div#mon_site_entier {
width: 960px;
margin: 0 auto;
}
j'ai essayé de l'intégrer en image de fond, mais aussi dans un tableau. Que je centre l'image de fond ou bien le tableau, je suis face aux mêmes décalages.
As-tu mis une taille sur chaque éléments comprenant ton fond ?
Petite info : la méthode des tableaux est déconseillée sur internet. Ca n'aide pas à bien référencer ton site d'une part et parce que les tableaux sont obsolètes à présents et ne sont utilisé soit pour des données à informations présenter comme un tableaux (ex: caractéristique d'un produit) ou alors dans les newsletter, mais surtout pas pour intégrer un site entier.
Bon courage
Bonjour et encore merci pour vos réponses !
J'ai bien noté vos commentaires sur les tableaux. J'ai trouvé un semblant de solution à mon problème : toujours dans Photoshop avec "enregistrer pour le web", je choisis d'enregistrer mes tranches directement en CSS, comme "ID". Et là, pas de problème, j'ouvre le HTML crée sous Dream et je peux centrer et poser mes rollovers. Et ça fonctionne sous Firefox et sous Safari :
http://delairdutemps.org/echange/Navigation/
Si vous vous sentez de jeter un oeil au code, voir si ça n'est pas trop pourri...je vais mettre le sujet en résolu.
Dernière précision : pour centrer mon site, j'ai utilisé la fonction CSS "left" à laquelle j'ai attribué une valeur de "25%", sur la balise qui contient toutes les autres. Peut être existe-t-il une façon plus propre de faire ça ?
Merci
Ben
J'ai bien noté vos commentaires sur les tableaux. J'ai trouvé un semblant de solution à mon problème : toujours dans Photoshop avec "enregistrer pour le web", je choisis d'enregistrer mes tranches directement en CSS, comme "ID". Et là, pas de problème, j'ouvre le HTML crée sous Dream et je peux centrer et poser mes rollovers. Et ça fonctionne sous Firefox et sous Safari :
http://delairdutemps.org/echange/Navigation/
Si vous vous sentez de jeter un oeil au code, voir si ça n'est pas trop pourri...je vais mettre le sujet en résolu.
Dernière précision : pour centrer mon site, j'ai utilisé la fonction CSS "left" à laquelle j'ai attribué une valeur de "25%", sur la balise qui contient toutes les autres. Peut être existe-t-il une façon plus propre de faire ça ?
Merci
Ben
Tout d'abord merci pour ta réponse. J'ai regardé un peu ton tuto. J'ai l'impression que mon cas est quand même un peu différent : pour gagner du temps je passe par la fonction "sauver pour le web" de Photoshop, ce qui fait que ma page est pré-découpée et que mes anims sont déjà en place (choses que je ne sais pas faire ou qui me prendraient un temps fou sous Dreamweaver). J'aimerais vraiment partir de cette base et savoir quelle est la meilleure façon d'intégrer des éléments de mise en page comme mon Rollover sans que cela nuise au reste ! Dans le code pondu par Photoshop, mon arrière-plan est intégré dans un tableau. Est-ce que c'est une erreur ?
Ben
Autrefois, avant l'avènement du CSS, les tableaux étaient utilisés pour faire la structure d'une mise en page. Toutefois, ce n'est totalement pas le but des tableaux. Le but étant de présenter des données sous forme d'un tableau. Rien de plus.
Le CSS est quand à lui un langage prévu pour la mise en page.
Un découpage fait sous Photoshop avec l'outils tranche et la fonction "Enregistrer pour le web" ne fait pas forcement un découpage adapté puisqu'il va te découper l'image en plusieurs morceau là où ça n'est pas forcement justifié. Tu sera de toute façon obligé de reprendre la page en éditant le code de celle-ci pour y ajouter ton contenu comme tu le souhaiterai.
Autant prendre l'habitude dès le départ de coder correctement son site.
Au besoin, met moi un lien vers ton image que je t'aide a faire le découpage.