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 :

Déplacement de menu dû à une image


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Invité4
    Invité(e)
    Par défaut Déplacement de menu dû à une image
    Bonjour,

    comment puis-je faire pour que dans mon site, l'image en haut à droite (la plante) ne déplace pas le menu (accueil, jouer, forum).

    Lien: http://www.ice-conquest.net/

    Voici une partie du code
    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
    	<body style="font-size: 11px; padding-top: 10px;"> 
    		<div style="text-align: center;"> 
    			<!-- Cadre principal --> 
    			<div style="margin-left: auto; margin-right: auto; font-color: #040604; width: 770px; margin-top: 5px; margin-bottom: 5px; padding: 3px; text-align: center; font-family: Verdana; font-size: 12px; background-color: #29B540; border: 1px solid #093611;"> 
    				<!-- Titre --> 
    				<div style="text-align: left; margin: 2px; padding: 3px; background-color: #3DC153; font-size: 19px;"> 
    					<img src="img/logo.png" alt="Ice-Conquest - Jeu gratuit multijoueur" title="Ice-Conquest" border="0" /> <img src="img/plantes/1.png" alt="Plante du continent" style="float: right; position: relative; left: 10px;" /> 
    					<div style="font-size: 15px;"> 
    						&nbsp;&nbsp;&nbsp;&nbsp;<i>Jeu gratuit et multijoueur sur internet</i> 
    					</div> 
    				</div> 
     
    				<!-- Menu --> 
    				<div style="text-align: center; margin: 2px; padding: 3px; background-color: #3DC153; font-size: 11px;"> 
    					<img alt="menu" src="img/menu1.png" />&nbsp;&nbsp;&nbsp;<a href="/?page=accueil">Accueil</a> | <a href="/?page=jouer">Jouer</a> | <a href="/forum/">Forum</a> | <a href="/?page=documentation">Documentation et aide</a> | <a href="/?page=credits">A propos</a>&nbsp;&nbsp;&nbsp;<img alt="menu" src="img/menu2.png" /> 
    				</div>
    Merci,
    Salutations

  2. #2
    Invité4
    Invité(e)
    Par défaut
    en fait, c'est le float: right qui décale le menu.
    Comment faire une image qui ne décale rien ?

    Merci

  3. #3
    Expert confirmé
    Avatar de vodiem
    Homme Profil pro
    Vivre
    Inscrit en
    Avril 2006
    Messages
    2 895
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Vivre
    Secteur : Conseil

    Informations forums :
    Inscription : Avril 2006
    Messages : 2 895
    Par défaut
    salut BenjT,

    une solution simple: change dans la balise img la position en absolute.

    ps: précises avec quel navigateur cela se produit car sous FF il n'y a pas de pb.


  4. #4
    Invité4
    Invité(e)
    Par défaut
    merci, j'ai fini par régler le bug.

Discussions similaires

  1. déplacement en boucle d'une image ?
    Par keokaz dans le forum jQuery
    Réponses: 2
    Dernier message: 24/09/2010, 12h44
  2. [Conception] Créer un menu sur une image
    Par JC learner dans le forum Webdesign & Ergonomie
    Réponses: 4
    Dernier message: 22/07/2008, 21h11
  3. Google map - Déplacement en cliquant sur une image
    Par Laurelaie dans le forum GWT et Vaadin
    Réponses: 2
    Dernier message: 06/05/2008, 15h53
  4. problème d'affichage d'un menu sur une image de fond
    Par Nata31 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 23/06/2006, 07h53
  5. [MFC]déplacement des pixels d'une image
    Par hagui dans le forum MFC
    Réponses: 8
    Dernier message: 19/01/2006, 16h51

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