Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Statut : Non résolu

Menu vertical

cedric, le lundi 28 mai 2007 à 20:02:15

Bonsoir , j'ai un petit soucis , voici le code d'un menu css que j'ai crée :

<ul id="menu">
<li>.</li>
<li>.</li>
<li>.</li>
<li>.</li>
</ul>

#menu {
border: 1px solid black;
background-image: url("fond1.gif");
width: 160px;
}

#menu li {
background-image: url("menu.gif");
margin-bottom: 1px ;
}

je ne comprends pas , mes images sont mal affichées , elles sont rétrécies et l'image de fond du div n'occupent pas tout le div , ya t'il quelquechose qui ne va pas dans monde code ?

merci

Configuration: Windows XP
Firefox 2.0.0.3

Répondre à cedric Signaler ce message aux modérateurs Aller au dernier message

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Gihef, le lundi 28 mai 2007 à 21:36:14

Bonjour,

“tout le div”
Quel <div> ?
Je n'en vois pas.

Essaye d'indiquer la hauteur de l'élément :

  #menu {
    border: 1px solid black;
    background : url(fond1.gif) left top no-repeat;
    width: 160px;
    height : la_hauteur_de_fond1.gif_en_px;
    }

Fais-en autant pour les éléments de l'<ul>

  #menu li {
    background : url(menu.gif) left top no-repeat;
    width : largeur_de_menu.gif_en_px;
    height : hauteur_de_menu.gif_en_px;
    line-height : hauteur_de_menu.gif_en_px;
    margin-bottom: 1px;
    }

Répondre à Gihef

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cedric, le lundi 28 mai 2007 à 22:39:23

ya un petit soucis , les images dans les li font 150px de large et le cadre qui les entoure je l'ai mis en 151px et pourtant le cadre est plus grand que les 151px et les images sont alignées à droite , c'est normal ?

Répondre à cedric

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Gihef, le lundi 28 mai 2007 à 22:50:29

Ajoute :

    #menu ul {
      list-style-type : none;
      }

Répondre à Gihef

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cedric, le lundi 28 mai 2007 à 23:13:03

çà ne change rien malheuresement...

Répondre à cedric

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Gihef, le mardi 29 mai 2007 à 01:02:36

Bon sang. Mais c'est bien sûr normal.

Il faut éliminer.
Le padding.

Et comme il est préférable de placer l'image dans le <a> (pour des effets éventuels*) :

<style type="text/css">
  #menu {
    list-style-type : none;
    border: 1px solid black;
    background : url(fond1.gif) left top no-repeat;
    width: 150px;
    height : 300px;
    margin : 0px;
    padding : 0px;
    }
  #menu li a {
    display : block;
    background : url(menu.gif) left top no-repeat;
    width : 150px;
    height : 35px;
    line-height : 35px;
    margin-bottom: 1px;
    }
</style>


<body>

  <ul id="menu">
    <li><a href="#">.1.</a></li>
    <li><a href="#">.2.</a></li>
    <li><a href="#">.3.</a></li>
    <li><a href="#">.4.</a></li>
  </ul>

</body>

Et le “#menu ul” ne peut pas marcher parce que le <ul> est le #menu.

* Exemple

Répondre à Gihef

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cedric, le mardi 29 mai 2007 à 17:18:47

alors voici mes 2 codes et là je n'ai plus d'image du tout , je n'ai pas compris ton histoire de "a" , moi j'ai aucun a nullepart dans mon html :

#menu {
border: 1px solid black;
width: 151px;
padding: 0px;
}

#menu li {
margin-bottom: 1px ;
background-image: url("menu.gif") left top no-repeat;
width: 151px;
height: 41px;
display: block;
}

Répondre à cedric

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

gryzzly, le mardi 29 mai 2007 à 18:05:45

l'histoire de "a" c'est ca :

- Tu fais un menu, donc il y aura forcément des liens, vers les pages ou pointent le menu.

- Or, un lien s'ecrit comme ca :
<a href="destination.extension" title="si je veux mettre un titre">le texte affiché que l'on clique</a>

- Donc, tu vois, il y a bien un "a"

Répondre à gryzzly

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cedric, le mardi 29 mai 2007 à 18:25:12

ok mais pq avec mon code on ne voit plus l'image maintenant dans les cellules du menu ?

Répondre à cedric

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Gihef, le mardi 29 mai 2007 à 19:49:14

Plus d'image nulle part parce que tu as supprimé l'appel dans #menu.
Plus de “background-image: url("fond1.gif");”

Pour les <li>, compare :
1- ton ancienne manière
2- ma manière
3- ta nouvelle manière

1-      background-image: url("menu.gif");
2-      background : url(menu.gif) left top no-repeat;
3-      background-image: url("menu.gif") left top no-repeat;

Le “display : block;” n'est inutile que dans les <a>, que si tu choisis de placer les images en fond des balises pour les liens.

Au moins, tu ne copies/colles pas (-;

+ http://edu.ca.edu/selfhtml/navigation/css.htm#arriere_plan

Répondre à Gihef

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

cedric, le mardi 29 mai 2007 à 21:04:55

gihef , j'ai supprimé l'appel dans le menu car finalement dans le menu je ne veux plus mettre d'image , je veux juste l'image menu.gif qui se trouve dans les cellules , ,et là mon code css est bon , je le remets car c'est ce que tu m'as mis :

#menu {
border: 1px solid black;
width: 151px;
padding: 0px;
}

#menu li {
margin-bottom: 1px ;
background: url("menu.gif") left top no-repeat;
width: 151px;
height: 41px;
display: block;
}

le code du menu est bon et celui de menu li aussi j'ai corrigé hé hé , j'ai quelques dernières petites questions stp :

1.pq le background-image ne marchait pas dans les li ?

2.à quoi sert le display block en fait ?

3. si je veux mettre dans les li du texte bien centré dans l'image , c'est faisable ?

merci

Répondre à cedric

Ce message vous semble utile, votez !
Signaler ce message aux modérateurs

Gihef, le mardi 29 mai 2007 à 23:13:39

Je veux bien répondre à tes questions.
En fait, je l'ai déjà fait en partie (-;

En relisant notre échange, tu y trouveras des réponses.

Mais bon, comme je suis bien luné, je reprends :

1.
la réponse est dans le lien http://edu.ca.edu/selfhtml/navigation/css.htm#arriere_plan donné en menu vertical#9
“background-image” ne sert qu'à appeler l'image.
“background“ sert à regrouper toutes les options qu'on peut appliquer aux images d'arrière-plan (background-image, background-position, background-attachment…)
Et donc,

    background : url(menu.gif) left top no-repeat;

sert à remplacer

    background-image : url(menu.gif);
    background-position : left top;
    /* qu'on pourrait aussi écrire : background-position : 0 0; */
    background-repeat : no-repeat;

2.
le “display : block” (inutile dans les <li>) sert à transformer le <a>, qui est un élément inline, en block et ainsi à le contraindre à s'adapter aux dimensions données quel qu'en soit le contenu, à passer sous les autres…
Les <li> sont déjà de type block.

3.
un début de réponse dans le menu vertical#5 pour le centrage vertical

    height : 35px;
    line-height : 35px;     /* les 2 dimensions sont identiques */

auquel tu peux ajouter, pour le centrage horizontal

    height : 35px;
    line-height : 35px;
    text-align : center;

Répondre à Gihef

Posez votre question Répondre

Résultats pour menu vertical

Menu horizontale (Résolu) Bonjour a tous, J'aimerais faire un menu horizontale un peu comme cmc en haut de page mais sans qu'il soit déroulant. Cependant je n'y arrive pas j'ai tenter de faire une liste a puce comme pour un menu verticale et changer le code... www.commentcamarche.net/forum/affich-4860335-menu-horizontale

Problème icones du menu Démarrer (Résolu) Bonjour, Il y a peu, j'ai réorganisé la session de mon ordi en enlevant les icônes de mon bureau et en les plaçant dans le menu vertical "Démarrer. Jusque là rien de bien sorcier ... sauf qu' aujourd'hui, en rallumant mon pc, je vais... www.commentcamarche.net/forum/affich-8886162-probleme-icones-du-menu-demarrer

Dérouler menu sur la droite en css ??? (Résolu) Bonjour, J'aurais besoin d'un petit coup de pouce sur l'agencement de mon menu en CSS Deux réponses peuvent me convenir: 1) SOIT M'EXPLIQUER COMMENT DEROULER SUR LE COTE DROIT LES LISTES A PUCES DE MON MENU VERTICAL (au lieu de les... www.commentcamarche.net/forum/affich-7641993-derouler-menu-sur-la-droite-en-css

1 2 3 Suivant

Résultats pour menu vertical

Ajouter un raccourci dans le menu contextuel du poste de travailQui n'a jamais rêvé de pouvoir avoir accès en un seul clic à certaines commandes enfouies dans les menus déroulants du système ? Problématique Imaginons que nous voulions aller dans la fenêtre de gestion de l'ordinateur. 2... www.commentcamarche.net/faq/sujet-5359-ajouter-un-raccourci-dans-le-menu-contextuel-du-poste-de-travail

[Vista] Afficher la commande Exécuter du menu DémarrerAfficher la commande "Exécuter" du menu Démarrer Lors de l'acquisition de votre nouveau système d'exploitation Vista, vous vous apercevrez que la commande "Exécuter", qui est assez coutumière et serviable chez son petit frère XP, n'existe... www.commentcamarche.net/faq/sujet-6987-vista-afficher-la-commande-executer-du-menu-demarrer

Editer le menu contextuel de Nautilus (navigateur de fichiers)Il est facile d'ajouter des éléments dans le menu clic-droit de Nautilus (l'explorateur de fichiers d'Ubuntu). Il existe deux méthodes: avec nautilus-action avec nautilus-scripts Chacun a ses avantages: Les plus de nautilus... www.commentcamarche.net/faq/sujet-6357-editer-le-menu-contextuel-de-nautilus-navigateur-de-fichiers

1 2 3 Suivant

Résultats pour menu vertical

Faire des sous-menus qui apparaissent ??? (Résolu)Bonjour, J'ai vu sur un site un menu vertical, et quand on clique sur un nom du menu, il y a un sous-menu qui apparait. Ensuite quand on reclique sur le meme nom de menu, les sous-menus disparaissaient... et ainsi de suite. Quelqu'un peut me... www.commentcamarche.net/forum/affich-7636322-faire-des-sous-menus-qui-apparaissent

Mon menu fait des sienne (Résolu)Bonjour, J'ais un un pitit souci avec mon menu, En effet quand je charge la page le menu est déroulé or il devrait etre fermé. Essayez en cliquant sur quetes ---> publique http://vincentcueto268.free.fr/HammerHeroes/ (le menu vertical pas le menu... www.commentcamarche.net/forum/affich-4107511-mon-menu-fait-des-sienne

Prob affichage page avec firefox (Résolu)j'ai un prob de visualisation du menu sur firefox : menu vertical avec sous menu au passage de la souris. avec ie tout est nickel , avec fiefox, le sous-menu est à chaque fois décalé vers le haut de page. merci pour les réponses www.commentcamarche.net/forum/affich-2425531-prob-affichage-page-avec-firefox

1 2 3 Suivant

Résultats pour menu vertical

Télécharger Menu InventorEn dehors du fait que le démarrage de votre ordinateur se trouve lent et chaotique, en plus l'organisation des menus n'est pas comme vous l'aurez voulu. Menu Inventor est la solution pour accélérer le démarrage de votre ordinateur mais aussi pour... www.commentcamarche.net/telecharger/telecharger-34056268-menu-inventor

1 2 3 Suivant