28172 sujets

CSS et mise en forme, CSS3

Positionnement de bouton dans un menu css latéral

Bonjour à tous,
voulant mettre à jour un de mes sites, j'ai trouvé un menu CSS en javascript genre google mail.
je ne suis pas informaticien et mes connaissances sont extrêmement limitées... je suis dans ma soixante-huitième année...
Mais je veux rendre accessible aux portables un site familial.

http://delaplacem.free.fr/

à la vue de la page d'index, vous comprendrez tout de suite mon problème.
je n'arrive pas à positionner mon bouton (qui se trouve en haut à droite à cliquer) pour développer le menu latéral qui se trouve à gauche
Je souhaiterai qu'il se trouve bien sûr en haut à gauche au dessus du menu et que le bouton soit bien centré sur le fond bleu clair...

....avant de mettre à jour toutes mes pages...

pouvez vous m'aider?

avec mes remerciements

Michel
Hello

Et si tu retirais le float:right sur: .gn-menu-main > li:last-child

En ce qui concerne le boutton honnêtement je comprends pas à quoi il est censé ressembler.
Il y a un before sur le <a> avec un box-shadow de couleur bleu justement....Je comprends pas le rendu visuel attendu....
bonjour allan00958

et merci pour ton aide

en retirant le float:right sur: .gn-menu-main > li:last-child

le bouton disparaît...

pour le bouton, un bouton du type trait noir sur fond blanc me conviendrait parfaitement...
Pour le bouton avec les 3 barrres, il faut regarder le html et CSS du site tympanus pour inspiration. Ca se rajoute avec un :before ajouté au <a>. Puis, comme je l'ai dit plus haut, il faut retirer le menu du <ul> et le placer ailleurs, dans le header par exemple. Je pense qu'il faudra du JavaScript pour ajouter l'effet au survol puis le déroulement au clic.
bonjour et merci pour votre aide.

je vis essayer de reprendre l'ensemble depuis le lien tympanus.net.
comme j'ai déjà passé plus de 8 heures pour adapter le menu précédent, je verrai cela dés que le temps sera moins favorable aux travaux extérieurs... en attendant le bouton à droite marche

merci encore
petite évolution.

j'ai réussi à positionner comme il faut la barre de menu , le menu et son bouton.
Le problème étant dû à la class a qui s'applique à la fois au bouton et la ligne horizontale, et à tous les liens du menu latéral...
Le problème reste donc entier pour les items du menu

Il me reste donc à trouver la SOLUTION pour appliquer à mes liens une marge à gauche de 10mm et un espacement horizontal de 10mm....
Administrateur
matissed a écrit :

Il me reste donc à trouver la SOLUTION pour appliquer à mes liens une marge à gauche de 10mm et un espacement horizontal de 10mm....

Hello,

Malheureusement, si l'unité "mm" existe dans le Web, elle ne fonctionnera ps comme tu le souhaites (car il existe tellement de résolutions et définitions d'écrans différents que le concept même de "mm" sur un écran est compliquée).

Bref, je te conseille d'utiliser une autre unité. Par exemple le "em" qui s'adapte à la taille de la police de l'utilisateur/trice.

Pour ajouter un espace à gauche dans tes liens de menus, tu peux utiliser la propriété "padding" qui est faite pour cela : 

.gn-menu-main a {
...
padding-left: 1em;
}


Par contre, je n'ai pas compris ce que tu voulais dire par "et un espacement horizontal de 10mm." Smiley ohwell

Bonne chance et bon week-end Smiley smile
Bonjour et merci Raphael

sitôt fait sitôt dit... c'est tout de même mieux que de mettre des espaces avant le nom du lien...

pour l'espacement horizontal des liens du menu latéral, une image vaut mieux qu'un long discours... je veux pouvoir réduire l'espace entre chaque lien uniquement dans la partie
<ul class="gn-menu">

ce que j'avais avant ----------------------------------------------- ce que j'ai maintenant

upload/1540049004-24987-espacement-horizontal-des-lie.jpg
Sujet clos
Aller à