Connexion à votre interface Wifeo
X
Nom d'utilisateur :
Mot de passe :


Mot de passe oublié ?

Pas encore inscrit ? Créez votre site gratuitement !
Connexion
 FERMER LE MENU


Menu du forum :

Accueil du forum

Derniers messages

S'inscrire au forum

Se connecter au forum

Mot de passe oublié

Menu général de Wifeo :

Accueil de Wifeo

Connexion

Créer un site

Nouveautés Wifeo

Blog

Forum

Boite à outils

Documentations

Liens et Menu > Menu qui déforme le reste de la page

Connectez-vous au forum     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite

Menu qui déforme le reste de la page

Répondre
La question
Posté le 29 Février 2016 à 19:24
nemmagique

12 messages
Inscrit le 3/5/2011
Salut à tous,

Je reviens vous voir car j'ai quasiment terminé mon nouveau menu (il ne restera qu'à implémenter un rollover différent sur chaque bouton, ce qui au passage ne paraît pas simple).
Donc j'ai essayé de mettre le menu sur le site "pour voir". Le résultat n'a pas vraiment été à la hauteur de mes espérances.
En effet, une fois le menu mis en place, ça décale tout le reste de la page vers le bas et ça réduit la largeur la zone centrale des pages (celle où est écrit le texte, entre autre).

J'ai beau cherché, je ne trouve pas ce qui cloche.
Voici une copie du code, si une bonne âme charitable (et plus douée que moi) peut y jeter un coup d??il pour trouver où est le grain de sable, je lui en serais reconnaissant :

<style type="text/css">*{font-size:20px; font-family:arial; padding:0;}
ul{list-style-type:none; margin:0;}
li{width:115px; height:40px; float:left; margin:auto;}
li:hover ul li{float:none;}
ul li ul{display:none;}
ul li:hover ul{display:block;}
ul li ul{position:relative; width:450px;}
ul li ul li{display:block; float:left; margin:auto;}
a{margin-left:auto; margin-right:auto; color:white; display:block; background:transparent; text-align:center; line-height:10%; text-decoration:none;}
a:hover{text-decoration:underline;}
</style>
<div align="center">
<ul style="width:1000px;">
<li>&nbsp;</li>
<li><a href="http://www.astibouille.com/index.php" target="_self" title="Bouton accueil"><img alt="Bouton accueil 2016" src="http://astibouille.wifeo.com/images/b/bou/bouton-accueil.png" style="width: 105px; height: 37px;" /></a></li>
<li><a href="#"><img alt="Bouton menu livres 0-3 ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-0-3-ans-2016.png" style="width: 105px; height: 37px;" /></a>
<ul style="left:-165px;">
<li><a href="http://www.astibouille.com/les-doigts-sur-le-livre.php" target="_self" title="Bouton DSL 0-3 ans"><img alt="Bouton menu Les Doigts sur le livre enfants de 0 à 3 ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-menu-dsl-times-0-3.png" style="width: 85px; height: 30px;" /></a></li>
</ul>
</li>
<li><a href="#"><img alt="Bouton menu livres-jeux 3 à 6 ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-3-6-ans-2016.png" style="width: 105px; height: 37px;" /></a>
<ul style="left:-165px;">
<li><a href="http://www.astibouille.com/les-doigts-sur-le-livre.php" target="_self" title="Bouton DSL 3-6 ans"><img alt="Bouton menu Les Doigts sur le livre enfants de 3 à 6 ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-menu-dsl-times-3-6.png" style="width: 85px; height: 30px;" /></a></li>
<li><a href="http://www.astibouille.com/cartes-et-histoires.php" target="_self" title="Bouton CH 3-6 ans"><img alt="Bouton menu Cartes et histoires enfants de 3 à 6 ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-menu-ch-times-3-6.png" style="width: 85px; height: 30px;" /></a></li>
</ul>
</li>
<li><a href="#"><img alt="Bouton menu livres-jeux 6 à 9 ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-6-9-ans-2016.png" style="width: 105px; height: 37px;" /></a>
<ul style="left:-165px;">
<li><a href="http://www.astibouille.com/cartes-et-histoires.php" target="_self" title="Bouton CH 6-9 ans"><img alt="Bouton menu Cartes et histoires enfants de 6 à 9ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-menu-ch-times-6-9.png" style="width: 85px; height: 30px;" /></a></li>
<li><a href="http://www.astibouille.com/je-dessine-mon-histoire.php" target="_self" title="Bouton JD 6-9 ans"><img alt="Bouton menu Je dessine mon histoire enfants de 6 à 9ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-menu-jd-times-6-9.png" style="width: 85px; height: 30px;" /></a></li>
</ul>
</li>
<li><a href="#"><img alt="Bouton menu livres-jeux 9 à 11 ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-9-11-ans-2016.png" style="width: 105px; height: 37px;" /></a>
<ul style="left:-165px;">
<li><a href="http://www.astibouille.com/fripin-poussiere-de-magie.php" target="_self" title="Bouton Fripin 9-11 ans"><img alt="Bouton menu Fripin poussière de magie enfants de 9 à 11 ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-menu-fripin-times-9-11.png" style="width: 85px; height: 30px;" /></a></li>
<li><a href="http://www.astibouille.com/je-dessine-mon-histoire.php" target="_self" title="Bouton JD 9-11 ans"><img alt="Bouton menu Je dessine mon histoire enfants de 9 à 11 ans" src="http://astibouille.wifeo.com/images/b/bou/bouton-menu-jd-times-9-11.png" style="width: 85px; height: 30px;" /></a></li>
</ul>
</li>
<li><a href="#"><img alt="Bouton menu livres professionnels orthophonistes maternelle primaire médiathèque" src="http://astibouille.wifeo.com/images/b/bou/bouton-pro-2016.png" style="width: 105px; height: 37px;" /></a>
<ul style="left:-165px;">
</ul>
</li>
<li><a href="http://www.astibouille.com/service-blog.html" target="_self" title="Bouton Blog"><img alt="Bouton menu blog enfants" src="http://astibouille.wifeo.com/images/b/bou/bouton-blog-2016.png" style="width: 105px; height: 37px;" /></a>
<ul style="left:-165px;">
</ul>
</li>
</ul>
</div>

Par avance merci.

Nem

Voir mon site

 
Navigateur utilisé : Firefox
 
Dernière modification du message le 29/2/2016 à 19:25:06.

 
Posté le 1 Mars 2016 à 10:14
vincent-support

Bonjour, pourquoi tu n'utilises pas un menu de Wifeo et sinon le code que tu as donné, c'est le menu actuel sur ton site ?
 
Navigateur utilisé : Firefox

Enjoy & share !


 
Posté le 2 Mars 2016 à 18:52
nemmagique

12 messages
Inscrit le 3/5/2011
Bonjour Vincent,

Je n'utilise pas le menu Wifeo car je n?arrive pas à faire ce que je veux avec.

Sinon, le code donné est celui de mon futur menu, je ne l'ai pas encore mis en production. Lorsque je vais vu que ça n'allait pas j'ai remis l'ancien.

 
Navigateur utilisé : Firefox

 
Posté le 3 Mars 2016 à 12:49
vincent-support

Bonjour, personnellement je n 'ai pas le temps de me plonger dans ton code, peut être un utilisateur prendra le temps d'analyser ton code.
 
Navigateur utilisé : Firefox

Enjoy & share !


 
Posté le 3 Mars 2016 à 17:25
fanfan88


1741 messages
Inscrit le 22/2/2010
Mon site
Bonjour,

Après un survol rapide, je remarque un élément qui pose problème, ce n'est peut-être pas le seul, mais on va y aller progressivement

Tu as mis ceci dans le CSS :

   SCRIPT
a{margin-left:auto; margin-right:auto; color:white; display:block; background:transparent; text-align:center; line-height:10%; text-decoration:none;}
a:hover{text-decoration:underline;}


Entre autres choses, tu demandes aux liens de s'aligner au centre...ça suffit à tout décaler.

Je commencerais donc par supprimer ce bout de code (ou au moins le "text-align:center;").

Tiens-nous au courant pour la suite

A bientôt.

 
Navigateur utilisé : Firefox
 
Dernière modification du message le 3/3/2016 à 17:27:27.

Dernières actualités de mon site :
• Nouvel article sur le blog : Avec Leclerc, nettoyons la nature ?
• La carte de France des observations de l'anthurus d'Archer par les visiteurs de Nature et décoration vient d'être mise à jour !
(Plus de news au sujet de mon site...)


 
Posté le 3 Mars 2016 à 19:46
nemmagique

12 messages
Inscrit le 3/5/2011
Salut Fanfan88

J'ai enlevé ces deux lignes mais cela ne change rien.
Je fais des tests pour voir quelle commande m'ennuie.

 
Navigateur utilisé : Firefox

 
Poster une nouvelle réponse
Connectez-vous au forum pour pouvoir répondre     Pas inscrit au forum ? Inscrivez-vous !
Nom d'utilisateur : Mot de passe :
Se connecter automatiquement à chaque visite
Nous soutenons : Secours Populaire . Enfants du desert . Medecins Sans Frontieres
Copyright © Wifeo.com - Tous droits réservés BOURDET SARL R.C.S.503777286 VERSAILLES