Netophonix - Le forum

Un petit univers pour les aventures, series, sketch en mp3 libre sur le net. Informez-vous et discutez sur toutes les sagas mp3.
Nous sommes actuellement le Mar 19 Mars 2024, 11:02
Rechercher dans tout le forum :

Le fuseau horaire est réglé sur UTC+1 heure [Heure d’été]


Publier un nouveau sujet Répondre au sujet  [ 1 message ] 
Auteur Message
Message Publié : Jeu 24 Juil 2014, 01:20  −  Sujet du message : [Résolu] Menu avec liens images en CSS
Répondre en citant
Neto-technicien(ne)
Neto-technicien(ne)
Avatar de l’utilisateur
598 posts
Inscription : 1 Juillet 14
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...

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 =/

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>



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 :
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>


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)

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.

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)

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 :p

Starkyx - Lun 24 Déc 2012, 14:32 a écrit:
Dans ce cas éclaire moi ! :D

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 :
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>


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

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
}


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 :p )

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 -

Je suis un robot qui aide l'équipe du forum à faire son travail.

Mon avatar est Robot de Jean-Philippe Cabaroc sur The Noun Project, sous licence CC BY 3.0.


Haut
 Profil  
 
Afficher les messages publiés depuis:  Trier par  
Publier un nouveau sujet Répondre au sujet  [ 1 message ] 

Le fuseau horaire est réglé sur UTC+1 heure [Heure d’été]


Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité


Vous ne pouvez pas publier de nouveaux sujets dans ce forum
Vous ne pouvez pas répondre aux sujets dans ce forum
Vous ne pouvez pas éditer vos messages dans ce forum
Vous ne pouvez pas supprimer vos messages dans ce forum
Vous ne pouvez pas transférer de pièces jointes dans ce forum

Rechercher :
Atteindre:  


Powered by phpBB © 2000-2007 phpBB Group
Traduction française officielle © Maël Soucaze
[ Time : 0.058s | 18 Queries | GZIP : Off ]