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 de navigation horizontal


Sujet :

CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Inscrit en
    Février 2011
    Messages
    12
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 12
    Par défaut Menu de navigation horizontal
    Bonjour à toutes et à tous.

    J'aimerais savoir comment faire pour rendre le menu fixe. J'explique :

    ça, c'est ce que j'ai :


    Mais quand je réduits la fenêtre, voila ce que j'ai :



    Et voila mon code 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
    27
    28
    29
    30
    31
    32
    #header {
    	border: 1px solid black;
    	text-align: center;
    	margin: 0px;
    	}
    #navmenu {
    	width: 100%;
    	margin: 0px auto;
    	background-image: url(images/bg-pagenav.png);
    	height: 29px;
    	background-repeat: repeat-x;
    	padding: 0px;
    	border: 1px solid black;
    	}
    #navmenu ul {
    	list-style-type: none;
    	margin: 0px;
    	padding: 0px;
    	text-align: center;
    	}
    #navmenu ul li {
    	width: 130px;
    	float: left;
    	margin: 4px;
    	border: 1px solid black;
    	}
    #navmenu ul li a {
    	font-family:Verdana, Geneva, sans-serif;
    	text-decoration: none;
    	display: block;
    	width: 130px;
    	}
    Merci de m'aider parce que je suis nouveau dans le monde css.

  2. #2
    Membre très actif
    Avatar de buggen25
    Ingénieur développement logiciels
    Inscrit en
    Août 2008
    Messages
    554
    Détails du profil
    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2008
    Messages : 554
    Par défaut
    Bonjour,
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    Essaye modifier le float:left pour le rendre float:none par exemple
    donc:
    #navmenu ul li {
     width: 130px;
     float: left;
     margin: 4px;
     border: 1px solid black;
     }
    Le modifier en
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    #navmenu ul li {
     width: 130px;
     float: none;
     margin: 4px;
     border: 1px solid black;
     }
    Le role du float c'est de l'afficher a gauche du reste des elements de la page html quand celui ci n'arrive pas a tenir sur la meme ligne que le reste, c'est pour ça que quand tu reduis la taille de la fenetre, les elements du menu, s'aligne à gauche
    Voici un exmple :
    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
     
    #NavMenu{
    	height:20px;
    	background-color:#00CBCD;
    	font-family: 'Ubuntu', Arial, serif;
    	font-size:12px;
    	padding-top:1px;
    	padding-bottom:1px;
    	line-height:19px;
    	font-weight:500;
    }
    #NavMenu ul{
    	height:20px;
    	display:block;
    	list-style:none;
    }
    #NavMenu ul li{
    	display:inline;
    	list-style:none;
    	line-height:18px;
    	border-right:1px dotted #FFFFFF;
    	padding-left:9px;
    	padding-right:10px;
    }
    cordialement

  3. #3
    Membre averti
    Inscrit en
    Février 2011
    Messages
    12
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 12
    Par défaut
    Merci pour ta réponse mais le menu devient vertical et je voudrais qu'il reste horizontal.

  4. #4
    Membre très actif
    Avatar de buggen25
    Ingénieur développement logiciels
    Inscrit en
    Août 2008
    Messages
    554
    Détails du profil
    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2008
    Messages : 554
    Par défaut
    Re bonjour,
    Rajoute ça
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    #navmenu ul li {
     display:inline;
     width: 130px;
     margin: 4px;
     border: 1px solid black;
     }
    Sinon regarde l'exemple que j'ai cité plus haut.
    J'espère que ça va t'aider.

  5. #5
    Membre averti
    Inscrit en
    Février 2011
    Messages
    12
    Détails du profil
    Informations forums :
    Inscription : Février 2011
    Messages : 12
    Par défaut
    Re merci, c'est gentil de ta part mais voila je l'ai trouvé sur ce lien. Le problème est dans le width qui est à 100%. Il n'est pas fixe, il faut le donner en pixel, pas en pourcentage et puis le fixer avec position : fixed et ça marche très bien. Merci beaucoup, je suis très reconnaissant.

  6. #6
    Membre très actif
    Avatar de buggen25
    Ingénieur développement logiciels
    Inscrit en
    Août 2008
    Messages
    554
    Détails du profil
    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Août 2008
    Messages : 554
    Par défaut La position fixed
    Re:
    Si j'ai bien compris tu vas mettre ton menu en position fixed, donc imaginons que la page web a une hauteur deux fois plus grande que la zone d'affichage de ton navigateur, donc il y aura du scrolling, et lors du scroling le menu restera dans la meme position et va defiler en bas, c'est déconseillé d'utiliser la position fixed dans ce cas precis...c'est juste un conseil, cordialement

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Menu de navigation SharePoint
    Par damf74 dans le forum SharePoint
    Réponses: 2
    Dernier message: 15/06/2009, 21h12
  2. sous-menu de navigation
    Par ml1234 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 07/06/2009, 13h21
  3. Problème Menu de navigation
    Par ajirah dans le forum Flash
    Réponses: 2
    Dernier message: 16/03/2009, 15h05
  4. (CS3) comment mettre à jour l'état d'un menu de navigation
    Par ulthimathulé dans le forum Dreamweaver
    Réponses: 0
    Dernier message: 05/06/2008, 22h34
  5. [VB.NET]Menu et navigation
    Par rattlehead dans le forum Windows Forms
    Réponses: 12
    Dernier message: 06/11/2006, 17h15

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