Sujet Précédent Sujet Suivant

Menu vertical

Fermé
cedric - 28 mai 2007 à 20:02
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 - 29 mai 2007 à 23:13
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
A voir également:

11 réponses

Réponse 1 / 11
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
28 mai 2007 à 21:36
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;
    }
0
Réponse 2 / 11
cedric
28 mai 2007 à 22:39
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 ?
0
Réponse 3 / 11
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
28 mai 2007 à 22:50
Ajoute :
    #menu ul {
      list-style-type : none;
      }
0
Réponse 4 / 11
cedric
28 mai 2007 à 23:13
çà ne change rien malheuresement...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 11
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
29 mai 2007 à 01:02
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
0
Réponse 6 / 11
cedric
29 mai 2007 à 17:18
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;
}
0
Réponse 7 / 11
gryzzly Messages postés 4608 Date d'inscription lundi 7 novembre 2005 Statut Contributeur Dernière intervention 24 octobre 2020 1 330
29 mai 2007 à 18:05
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"
0
Réponse 8 / 11
cedric
29 mai 2007 à 18:25
ok mais pq avec mon code on ne voit plus l'image maintenant dans les cellules du menu ?
0
Réponse 9 / 11
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
29 mai 2007 à 19:49
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
0
Réponse 10 / 11
cedric
29 mai 2007 à 21:04
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
0
Réponse 11 / 11
Gihef Messages postés 5150 Date d'inscription mercredi 20 juillet 2005 Statut Contributeur Dernière intervention 20 février 2023 2 775
29 mai 2007 à 23:13
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;
0

Discussions similaires

Barre verticale droite sur clavier
k_lou -
Leuide -

41 réponses
le signe " | " dans excel
zed -
Utilisateur anonyme -

4 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses
Touche du clavier barre verticale
k_lou -
Architecte_300 -

6 réponses
Barre verticale droite sur clavier mac
oui -
jeanbern -

1 réponse