IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Menu (jump) langue avec image


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre confirmé
    Inscrit en
    Novembre 2010
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Novembre 2010
    Messages : 54
    Par défaut Menu (jump) langue avec image
    N'ayant pas trouvé une solution pour mon problème en javascript, j'ai cherché une alternative pour créer un menu langue ayant le drapeau à côté du nom de pays.
    La solution suivante (moins esthétique) fonctionne mais uniquement avec Firefox.
    Est-ce que quelqu'un a une solution ou une alternative pour que cela fonctionne avec Explorer et Chrome?

    p.s.: je viens de trouver la traduction de jumpmenu. Il s'agit d'un menu de reroutage.

    Code html
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <select name="jumpMenu" id="jumpMenu">
      <option id="imguk" value="http://www.monsite.fr/eng">&nbsp;&nbsp;&nbsp;&nbsp; English</option>
      <option id="imgfr" value="http://www.monsite.fr/fra">&nbsp;&nbsp;&nbsp;&nbsp; français</option>
      <option id="imgit" value="http://www.monsite.fr/ita">&nbsp;&nbsp;&nbsp;&nbsp; français</option>  
    </select>
    css
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    	#imgfr {
    	background-image: url(images/fr.gif);
    	background-repeat:no-repeat;
    	height:11px;
    	width:16px;
    	border-left:#FFFFFF solid 4px;
    	padding: 1px 170px 3px 4px;
    	}
     
    		#imgit {
    	background-image: url(images/it.gif);
    	background-repeat:no-repeat;
    	height:11px;
    	width:16px;
    	border-left:#FFFFFF solid 4px;
    	padding: 1px 170px 3px 4px;
    	}
     
    		#imguk {
    	background-image: url(images/uk.gif);
    	background-repeat:no-repeat;
    	height:11px;
    	width:16px;
    	border-left:#FFFFFF solid 4px;
    	padding: 1px 170px 3px 4px;
    	}

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 213
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 213
    Par défaut
    Bonjour à toi aussi,
    pourquoi ne pas faire un truc simple du style
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <a href="http://www.monsite.fr/fra" title="Francais"><img src="images/fr.gif" alt="Francais"></a>
    <a href="http://www.monsite.fr/ita" title="Italian"><img src="images/it.gif" alt="Italian"></a>
    <a href="http://www.monsite.fr/eng" title="English"><img src="images/uk.gif" alt="English"></a>

  3. #3
    Membre confirmé
    Inscrit en
    Novembre 2010
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Novembre 2010
    Messages : 54
    Par défaut
    Bonjour,
    C'est juste que je trouve plus original et esthétique la version du menu de reroutage.

  4. #4
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093

  5. #5
    Membre confirmé
    Inscrit en
    Novembre 2010
    Messages
    54
    Détails du profil
    Informations forums :
    Inscription : Novembre 2010
    Messages : 54
    Par défaut
    Bonjour,

    Désolé mais je ne suis pas très expérimenté et je ne vois pas comment résoudre mon problème (afficher le drapeau à côté de la sélection du pays) avec ce tutoriel.
    Si tu regarde ma page en ligne, peut-être peux-voir où es l'erreur dans mon drapeau?
    ici

  6. #6
    Expert confirmé
    Avatar de 12monkeys
    Homme Profil pro
    Webmaster
    Inscrit en
    Novembre 2006
    Messages
    4 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Webmaster
    Secteur : Service public

    Informations forums :
    Inscription : Novembre 2006
    Messages : 4 093
    Par défaut
    Ton code au début était une balise select, donc je t'ai mis ce lien pour te dire qu'il ne me semblait pas possible de styliser un select ainsi et qu'il fallait utiliser une liste en association avec JavaScript.
    Maintenant je constate que c'est déjà ce que tu fais...

    J'ai regardé ton test sur IE 7 et l'affichage est relativement correct, l'image est juste un peu décalée, il faut alors appliquer un style CSS spécifique à IE.

Discussions similaires

  1. Un menu en CSS avec images
    Par Olivier Regnier dans le forum Mise en page CSS
    Réponses: 9
    Dernier message: 20/09/2007, 09h19
  2. Menu horizontal avec images car font exotic
    Par enestaf dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 11/07/2007, 11h40
  3. comment faire un simple menu avec images en background
    Par cortex024 dans le forum ASP.NET
    Réponses: 6
    Dernier message: 03/05/2007, 20h57
  4. Problème d'espace sur IE menu vertical avec image de fond
    Par dom dom from the dom dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 09/03/2007, 11h30
  5. boutons avec images sur un menu
    Par ENDAMA NDONG dans le forum VB 6 et antérieur
    Réponses: 2
    Dernier message: 23/11/2005, 11h30

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo