Problème avec mon menu (navbar) de margin ou padding

Par Geralterego, il y a 11 ans

Les bases HTML/CSS

Salut les amis !!

J'ai une petite question technique au sujet de mon CSS (je suis sûre que vous allez trouver en 2 - 3 mouvements ;) ).

Donc voilà, je suis en train de revoir un peu le site dans l'entreprise où je travail (petite structure) et je voulais refaire leur menu pour "supprimer " les images.

J'ai fais ma petite tambouille et je me retrouve avec un soucis sur mes "hover" :(

Voilà mon soucis, je n'arrive pas à ce que mon Hover soit collé en haut de ma barre... snif...

Voici mon HTML :

<div class="navbar"> <ul class="navbarul"> <li><?php DoHover('accueil'); ?><span class="nav">Accueil</span></a></li> <li><?php DoHover('produits'); ?><span class="nav">Produits</span></a></li> <li><?php DoHover('services'); ?><span class="nav">Services</span></a></li> <li><?php DoHover('localisation'); ?><span class="nav">Localisation</span></a></li> <li><?php DoHover('financement-impots'); ?><span class="nav">Financement et Impots</span></a></li> <li><?php DoHover('contact'); ?><span class="nav">Contact</span></a></li> </ul> </div>

Et mon CSS :

.navbar{ width:100%; display:table; float:left; background: -moz-linear-gradient(top, rgba(103,185,239,1) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,185,239,1)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* W3C */ border-radius:40px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 15px 15px rgba(0, 0, 0, .15); } .navbarul{ height:30px; clear:both; position:relative; } .navbar li { list-style:none; display: table-cell; padding:0px 25px 0px 25px; clear:both; } .navbar li a { vertical-align:center; text-decoration:none; color:#3d3d3d; font-size:2em; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); }

Si vous me dites que c'est le bor*el , je ne serai pas vexée, promis !!

En tout cas merci d'avance pour vos aides !! ^^

Une jeune padawan ^^

14 réponses

green68, il y a 11 ans

Bonjour,

Que fait DoHover ?
Il ne s'agirai pas d'un 'selected' au niveau PHP ?
L'affichage doit-il se faire au passage de la souris (li:hover) ?

Soundboy39, il y a 11 ans

Pourquoi utiliser un display "table" pour un menu ??

Sinon même demande que Green69, merci de poster le html généré (copier-coller depuis le code source mis à disposition par le navigateur).
Pour pouvoir t'aider il faut que l'on voit se qui est généré par DoHover().

green68, il y a 11 ans

Bon vite fait :

.navbar{ width:100%; /*display:table;*/ float:left; background: -moz-linear-gradient(top, rgba(103,185,239,1) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,185,239,1)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* W3C */ border-radius:40px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 15px 15px rgba(0, 0, 0, .15); } .navbar ul{ height:62px; margin: 0; clear:both; } .navbar li { position: relative; list-style:none; /*display: table-cell;*/ display: inline-block; clear:both; } .navbar li a { position: relative; display: inline-block; vertical-align:center; text-decoration:none; color: #3d3d3d; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); /*font-size:2em;*/ padding:22px 25px 22px 25px; } .navbar li a:hover { background-color: blue; color: white; cursor: pointer; }
green68, il y a 11 ans

De plus, le <span> me semble inutile ;)

Geralterego, il y a 11 ans

Merci beaucoup pour vos réponses ! Bon en fait, je vous dis honnêtement, ce n'est pas moi qui ai créer la partie PHP , je suppose que cela sert à garder le même Header ou corps de page et que juste le contenu change ?

Voici le code généré :

<menu class="Navigation"> <li> <a id="accueil_on" href="accueil.html"> <span class="hidden">Accueil</span> </a> </li> <li> <a id="produits" href="produits.html"> <span class="hidden">Produits</span> </a> </li> <li> <a id="services" href="services.html"> <span class="hidden">Services</span> </a> </li> <li> <a id="localisation" href="localisation.html"> <span class="hidden">Localisation</span> </a> </li> <li> <a id="financement-impots" href="financement-impots.html"> <span class="hidden">Financement et Impots</span> </a> </li> <li> <a id="contact" href="contact.html"> <span class="hidden">Contact</span> </a> </li> </menu>

Je vais tenter la solution de Green68.

ça me rassure un peu que mon CSS ne soit pas trop anarchique lol (j'suis une newbie pour l'instant ...)

Geralterego, il y a 11 ans

Pour le Display:table-cell, j'avais tout bêtement suivis un tuto qui disait :
"De cette façon, chaque élément de liste mesure automatiquement 1/5e de la taille de son parent"...

On m'a appris avec le display:inline-block, mais je me suis dis que peut-être, cette méthode était plus adaptée ?

Geralterego, il y a 11 ans

Ah et aussi, oui, par rapport à ma capture d'écran, j'aimerai que le bloc bleu se créer en hover (j'avais aussi envie de tenter qu'il dépasse un peu en haut et en bas mais bon... j'ai pas encore le niveau je pense lol).

Geralterego, il y a 11 ans

Voici TOUT mon CSS, je n'avais copié qu'une partie pffffff -_- , I'm a big boulette lol

.navbar{ width:100%; /*display:table;*/ float:left; background: -moz-linear-gradient(top, rgba(103,185,239,1) 0%, rgba(30,87,153,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,185,239,1)), color-stop(100%,rgba(30,87,153,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(103,185,239,1) 0%,rgba(30,87,153,1) 100%); /* W3C */ border-radius:40px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 15px 15px rgba(0, 0, 0, .15); } .navbarul{ height:30px; clear:both; position:relative; } .navbar li { list-style:none; /*display: table-cell;*/ display:inline-block; position:relative; padding:0px 25px 0px 25px; clear:both; } .navbar li a { position:relative; display:inline-block; vertical-align:center; text-decoration:none; color:#3d3d3d; font-size:2em; text-shadow: 0 1px 0 rgba(255, 255, 255, .4); } ul li:first-child a{ border-radius: 3px 0 0 3px; } ul li:last-child a{ border-radius: 0 3px 3px 0; } ul li:hover{ height:40px; background: rgb(77,123,221); /* Old browsers */ background: -moz-linear-gradient(top, rgba(77,123,221,1) 0%, rgba(36,55,181,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(77,123,221,1)), color-stop(100%,rgba(36,55,181,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(77,123,221,1) 0%,rgba(36,55,181,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(77,123,221,1) 0%,rgba(36,55,181,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(77,123,221,1) 0%,rgba(36,55,181,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(77,123,221,1) 0%,rgba(36,55,181,1) 100%); /* W3C */ padding:0px 30px 8px 30px; transition:padding 0.3s; } ul li a:hover{ color:white; transition:color 0.5s; } ul li:focus { background: rgba(255,255,255,.2); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 -1px 0 hsl(210, 100%, 42%) inset, 0 -2px 0 hsl(210, 100%, 48%) inset, 0 -3px 0 hsl(210, 100%, 54%) inset, 0 -4px 0 hsl(210, 100%, 60%) inset, 0 -5px 0 hsl(210, 100%, 70%) inset; padding: 8px 25px 17px 25px; }
betaWeb, il y a 11 ans

Commence par fixer le height de ton élément ".navbar" (50px par exemple, c'est à toi de voir) et attribue-lui la propriété "box-sizing: content-box;", ensuite il faudrait que les enfants "ul", "li", "a" et "span" de ton élément ".navbar" héritent de cette hauteur ("height: inherit;").

Tu peux ajouter un "line-height: 48px;" à tes éléments "li" afin d'aligner verticalement ton texte, mais c'est un détail ;)

Aussi je vois que tu fixes une hauteur à l'élément "li" lors du hover, ça sert à quoi ? C'est peut-être de là que vient le soucis.

Essaye comme ça et dis-moi si ça fonctionne mieux ?

J'espère avoir pu t'aider ;)

green68, il y a 11 ans

@Geralterego as-tu testé mon bout de CSS ?

Geralterego, il y a 11 ans

Bonjour à tous,

désolée ne te pas avoir donné de nouvelle... Des fois je m'embrouille toute seule et je me complique la vie...
Après moulte essais et en m'inspirant de vos solutions , j'ai fais des test et j'y suis arrivé !

Par contre j'ai un soucis de liste qui retourne à la ligne lorsque l'écran devient trop exigü ...

Voici mon code

.navbardiv{ width:100%; height:40px; /* background: rgb(84,183,82); /* Old browsers */ /*background: -moz-linear-gradient(top, rgba(84,183,82,1) 0%, rgba(73,145,68,1) 100%); /* FF3.6+ */ /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(84,183,82,1)), color-stop(100%,rgba(73,145,68,1))); /* Chrome,Safari4+ */ /*background: -webkit-linear-gradient(top, rgba(84,183,82,1) 0%,rgba(73,145,68,1) 100%); /* Chrome10+,Safari5.1+ */ /*background: -o-linear-gradient(top, rgba(84,183,82,1) 0%,rgba(73,145,68,1) 100%); /* Opera 11.10+ */ /*background: -ms-linear-gradient(top, rgba(84,183,82,1) 0%,rgba(73,145,68,1) 100%); /* IE10+ */ /*background: linear-gradient(to bottom, rgba(84,183,82,1) 0%,rgba(73,145,68,1) 100%); /* W3C */ border-radius:0 0 20px 20px; clear:both; display:inline-block; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 15px 15px rgba(0, 0, 0, .15); background-color:#575957; } .navbarmenu{ width:99%; height:40px; display:block; clear:both; float:left; position:absolute; margin-top:2px; } .navbarmenu li { display:table-cell; float:left; text-align:justify; margin-top:0; } .navbarmenu li a{ color:#5cda5c; text-decoration:none; font-size:2em; margin-top:0; padding:4px 40px 9px 15px; display:inline-block; } .navbarmenu li a:hover { color:#ffffff; transition:color 1s easy-in; margin-top:0; padding:4px 40px 9px 30px; transition:padding 1s; background-color:#5ae273; box-shadow:2px 0px black 10px inset; }
betaWeb, il y a 11 ans

C'est tout à fait normal, il te faut utiliser les media-queries afin d'adapter tes éléments en fonction de la taille de l'écran.
Par exemple :

@media screen and (max-width: 1023px){
// ton css ici
}

Le code que tu mettra s'appliquera uniquement sur les devices dont la résolution est inférieure à 1024px.
[https://developer.mozilla.org/fr/docs/Web/CSS/Media_queries]()

Geralterego, il y a 11 ans

Merci Cyprien... je pense qu'il va falloir que je me plonge dans l'apprentissage et la pratique du responsive (je n'ai que des notions...).
En plus je n'ai pas vraiment de moyen de tester sur un écran 17 pouces, 22 pouces etc... (et je suis encore aux test des versions tablette et smartphone...)