Starkyx - Lun 24 Déc 2012, 12:49 a écrit:
Bonjour (et joyeux noël) à tous !
Je suis actuellement en train d'essayer de faire mon propre site web à partir de rien, en HTML et CSS.
Malheureusement, je rencontre une difficulté que je n'arrive vraiment pas à résoudre seul, même en ayant essayé plusieurs tutoriels trouvé par-ci par-là :
J'ai créé un design pour mon site web avec Photoshop et j'ai découpé chaque élément. Avec le HTML et le CSS j'ai placé mes trucs etc... tout va bien sauf mon menu : je n'arrive pas à placer mon menu correctement, c'est à dire mes cinq boutons l'un à côté de l'autre, ainsi que les zones cliquables des boutons, qui ne sont pas toujours les mêmes que les images utilisées...
Je ne sais pas si je m'exprime correctement, voici donc une illustration de mon problème :
http://image.noelshack.com/fichiers/201 ... obleme.png
Légende :
- Entouré en rouge : l'image du bouton
- Légèrement bleuté : la zone cliquable
Je ne veux donc pas que les espèces d'ailes en haut à droite et en haut à gauche du menu, ou même les espaces au dessus des boutons soit cliquable...
Je suis actuellement en train d'essayer de faire mon propre site web à partir de rien, en HTML et CSS.
Malheureusement, je rencontre une difficulté que je n'arrive vraiment pas à résoudre seul, même en ayant essayé plusieurs tutoriels trouvé par-ci par-là :
J'ai créé un design pour mon site web avec Photoshop et j'ai découpé chaque élément. Avec le HTML et le CSS j'ai placé mes trucs etc... tout va bien sauf mon menu : je n'arrive pas à placer mon menu correctement, c'est à dire mes cinq boutons l'un à côté de l'autre, ainsi que les zones cliquables des boutons, qui ne sont pas toujours les mêmes que les images utilisées...
Je ne sais pas si je m'exprime correctement, voici donc une illustration de mon problème :
http://image.noelshack.com/fichiers/201 ... obleme.png
Légende :
- Entouré en rouge : l'image du bouton
- Légèrement bleuté : la zone cliquable
Je ne veux donc pas que les espèces d'ailes en haut à droite et en haut à gauche du menu, ou même les espaces au dessus des boutons soit cliquable...
Bardyl - Lun 24 Déc 2012, 12:51 a écrit:
Les liens sont sur quoi ? Nous faudrait ton code si tu veux qu'on t'aide un peu plus :/
Starkyx - Lun 24 Déc 2012, 13:04 a écrit:
C'est bien le problème, je n'arrivais à rien alors j'ai tout supprimé, j'ai juste la structure de base du HTML et encore je ne sais pas si c'est là qu'on mets les images où si c'est dans le CSS pour faire ça, mais bon je tente des trucs quoi, et je débute en plus =/
Et dans le CSS il n'y a plus rien concernant le menu.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Starkyx Creations</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles/design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="menu">
<ul id="menu_h">
<li id="accueil"><a herf="main.html"><img src="images/Accueil.png" border="0"></a></li>
<li id="news"><a href="news.html"><img src="images/News.png" border="0"></a></li>
<li id="crea"><a href="creationsmp3.html"><img src="images/CreationsMP3.png" border="0"></a></li>
<li id="contact"><a href="contact.html"><img src="images/Contact.png" border="0"></a></li>
<li id="liens"><a href="liens.html"><img src="images/Liens.png" border="0"></a></li>
</ul>
</div>
<div id="corps_haut"></div>
<div id="corps"></div>
<div id="corps_bas"></div>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Starkyx Creations</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styles/design.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="conteneur">
<div id="header"></div>
<div id="menu">
<ul id="menu_h">
<li id="accueil"><a herf="main.html"><img src="images/Accueil.png" border="0"></a></li>
<li id="news"><a href="news.html"><img src="images/News.png" border="0"></a></li>
<li id="crea"><a href="creationsmp3.html"><img src="images/CreationsMP3.png" border="0"></a></li>
<li id="contact"><a href="contact.html"><img src="images/Contact.png" border="0"></a></li>
<li id="liens"><a href="liens.html"><img src="images/Liens.png" border="0"></a></li>
</ul>
</div>
<div id="corps_haut"></div>
<div id="corps"></div>
<div id="corps_bas"></div>
</div>
</body>
</html>
Et dans le CSS il n'y a plus rien concernant le menu.
XIIIsan - Lun 24 Déc 2012, 13:28 a écrit:
Selon moi, le mieux c'est de prendre l'image en entier et de faire un mapping de ton image, par exemple aveccc ton image de "probleme" le code que tu peux insérer ça donne ça :
Si tu veux changer les "zones" cliquables les 2 premiers nombres (ex: 57,55) sont les coordonnées du coin supérieur gauche et les 2 derniers (ex: 282,105) sont celles du coin inférieur droit.
voilà j'espère que ça fera l'affaire
Code:
<map name="menu">
<area shape="rect" coords="57,55,282,105" href="main.html">
<area shape="rect" coords="282,55,494,105" href="news.html">
<area shape="rect" coords="500,55,713,105" href="creationsmp3.html">
<area shape="rect" coords="720,55,931,105" href="contact.html">
<area shape="rect" coords="936,55,1155,105" href="liens.html">
</map>
<center><img src="http://image.noelshack.com/fichiers/2012/52/1356352978-menuprobleme.png" usemap="#menu"></center>
<area shape="rect" coords="57,55,282,105" href="main.html">
<area shape="rect" coords="282,55,494,105" href="news.html">
<area shape="rect" coords="500,55,713,105" href="creationsmp3.html">
<area shape="rect" coords="720,55,931,105" href="contact.html">
<area shape="rect" coords="936,55,1155,105" href="liens.html">
</map>
<center><img src="http://image.noelshack.com/fichiers/2012/52/1356352978-menuprobleme.png" usemap="#menu"></center>
Si tu veux changer les "zones" cliquables les 2 premiers nombres (ex: 57,55) sont les coordonnées du coin supérieur gauche et les 2 derniers (ex: 282,105) sont celles du coin inférieur droit.
voilà j'espère que ça fera l'affaire
Starkyx - Lun 24 Déc 2012, 13:40 a écrit:
J'y crois pas, ça marche *_* !!!
Merci beaucoup ! Encore quelques questions :
Comment fais-tu pour avoir exactement les bonnes coordonnées de pixels ?
Comment je fais si maintenant je veux remplacer l'image d'un bouton lorsqu'on passe la souris dessus ? (hover)
Merci beaucoup ! Encore quelques questions :
Comment fais-tu pour avoir exactement les bonnes coordonnées de pixels ?
Comment je fais si maintenant je veux remplacer l'image d'un bouton lorsqu'on passe la souris dessus ? (hover)
XIIIsan - Lun 24 Déc 2012, 13:54 a écrit:
A ce moment la faut faire soit plusieurs mapping, soit tu fais entièrement le menu en css (pour le hover) avec une image de fond.
Pour savoir exactement les pixels moi je mets l'image sur Gimp et je regarde les coordonnées qui s'affichent en bas à gauche.
Pour savoir exactement les pixels moi je mets l'image sur Gimp et je regarde les coordonnées qui s'affichent en bas à gauche.
Starkyx - Lun 24 Déc 2012, 13:56 a écrit:
Je vois pas trop comment faire avec plusieurs mapping...
Et en CSS c'est justement ce que j'ai essayé de faire mais j'y arrive vraiment pas (voir premier post)
Et en CSS c'est justement ce que j'ai essayé de faire mais j'y arrive vraiment pas (voir premier post)
XIIIsan - Lun 24 Déc 2012, 13:59 a écrit:
Voyons voir... Envoie moi les images sans modifications et les hovers et je vais essayer de faire quelque chose.
Bardyl - Lun 24 Déc 2012, 14:25 a écrit:
Note quand même histoire de passer pour un gros lourd, cette faon d'intégrer ton site internet est assez catastrophique. Certes a marchera mais t'auras aucun texte donc aucun référencement et sans doute beaucoup de bugs à la longue. Sache en tout cas que ce n'est pas une manière de faire un site internet :/
Après on viendra peut être me tomber dessus j'en sais rien mais voila quoi
Après on viendra peut être me tomber dessus j'en sais rien mais voila quoi
Starkyx - Lun 24 Déc 2012, 14:32 a écrit:
Dans ce cas éclaire moi ! 
XIIIsan : je t'ai envoyé tout ça par MP !
XIIIsan : je t'ai envoyé tout ça par MP !
Verdey - Lun 24 Déc 2012, 15:12 a écrit:
XIIIsan a écrit:
Selon moi, le mieux c'est de prendre l'image en entier et de faire un mapping de ton image, par exemple aveccc ton image de "probleme" le code que tu peux insérer ça donne ça :
Si tu veux changer les "zones" cliquables les 2 premiers nombres (ex: 57,55) sont les coordonnées du coin supérieur gauche et les 2 derniers (ex: 282,105) sont celles du coin inférieur droit.
voilà j'espère que ça fera l'affaire
Code:
<map name="menu">
<area shape="rect" coords="57,55,282,105" href="main.html">
<area shape="rect" coords="282,55,494,105" href="news.html">
<area shape="rect" coords="500,55,713,105" href="creationsmp3.html">
<area shape="rect" coords="720,55,931,105" href="contact.html">
<area shape="rect" coords="936,55,1155,105" href="liens.html">
</map>
<center><img src="http://image.noelshack.com/fichiers/2012/52/1356352978-menuprobleme.png" usemap="#menu"></center>
<area shape="rect" coords="57,55,282,105" href="main.html">
<area shape="rect" coords="282,55,494,105" href="news.html">
<area shape="rect" coords="500,55,713,105" href="creationsmp3.html">
<area shape="rect" coords="720,55,931,105" href="contact.html">
<area shape="rect" coords="936,55,1155,105" href="liens.html">
</map>
<center><img src="http://image.noelshack.com/fichiers/2012/52/1356352978-menuprobleme.png" usemap="#menu"></center>
Si tu veux changer les "zones" cliquables les 2 premiers nombres (ex: 57,55) sont les coordonnées du coin supérieur gauche et les 2 derniers (ex: 282,105) sont celles du coin inférieur droit.
voilà j'espère que ça fera l'affaire
C'est pas mieux d'utiliser des positions relatives plutot qu'absolues ?
En meme temps, dans ce cas la, je saurais pas trop comment adapter.
Zywa - Lun 24 Déc 2012, 15:15 a écrit:
Je plussoie Bardyl.
Je pense que le mieux c'est de faire comme le dit XIIIsan un peu plus haut : "fais entièrement le menu en css (pour le hover) avec une image de fond."
(Au passage, ça fait moins d'images à télécharger : une seule image de fond plus petite + l'image lorsque la souris passe dessus)
Voici quelques pistes à explorer :
propriété hover css
Bon, je vais préparer noël moi, mais si y a encore besoin d'info je repasserais demain ou après demain
!
Bon courage !
PS : je plussoie Verdey
Le positionnement absolu est rarement une bonne idée. Cela ne s’adapte pas à différente tailles d'écran...
(quelques piste : display block sur les lien (balise a) avec des float right, ou display inline-block, (après il est possible de donner des taille en pourcentage), Sur ce point du positionnement, je m'y connais moins. Bardyl saura mieux que moi )
EDIT : Quelques chose qui m'a toujours beaucoup aider pour des base de CSS :
http://www.alsacreations.com/static/gabarits/liste.html
Je pense que le mieux c'est de faire comme le dit XIIIsan un peu plus haut : "fais entièrement le menu en css (pour le hover) avec une image de fond."
(Au passage, ça fait moins d'images à télécharger : une seule image de fond plus petite + l'image lorsque la souris passe dessus)
Voici quelques pistes à explorer :
propriété hover css
Code:
#menu a
{
background-image:// ton image rectangle pour UN lien
color:black;
}
#menu a:hover
{
background-image:// ton image quand la souris passe
color:rgb(200,200,200); //coleur du text quand la souris passe
}
{
background-image:// ton image rectangle pour UN lien
color:black;
}
#menu a:hover
{
background-image:// ton image quand la souris passe
color:rgb(200,200,200); //coleur du text quand la souris passe
}
Bon, je vais préparer noël moi, mais si y a encore besoin d'info je repasserais demain ou après demain
!Bon courage !
PS : je plussoie Verdey
Le positionnement absolu est rarement une bonne idée. Cela ne s’adapte pas à différente tailles d'écran...
(quelques piste : display block sur les lien (balise a) avec des float right, ou display inline-block, (après il est possible de donner des taille en pourcentage), Sur ce point du positionnement, je m'y connais moins. Bardyl saura mieux que moi
)EDIT : Quelques chose qui m'a toujours beaucoup aider pour des base de CSS :
http://www.alsacreations.com/static/gabarits/liste.html
Starkyx - Lun 24 Déc 2012, 15:17 a écrit:
Je sais faire ça, le problème c'est qu'il n'y a pas de texte pour le menu, puisque les liens sont des images...
Kak Miortvi Pengvin - Lun 24 Déc 2012, 15:20 a écrit:
Un div pour l'ensemble du menu, des liens à l'intérieur avec des dimensions fixées en CSS, une image de fond et un :hover/:focus unique pour tous et utilisation des propriétés CSS :before et :after pour les deux "ailes" latérales. Ca ne serait pas plus simple, plus rapide et plus modulable pour un menu sur une seule ligne ?
Starkyx - Lun 24 Déc 2012, 15:22 a écrit:
C'est ce que je cherche à faire dans l'idéal, sans y arriver malheureusement.
- Page 2 manquante -