Menu vertical
cedric
-
Gihef Messages postés 5165 Statut Contributeur -
Gihef Messages postés 5165 Statut Contributeur -
Bonsoir , j'ai un petit soucis , voici le code d'un menu css que j'ai crée :
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
<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:
- Menu vertical
- Menu déroulant excel - Guide
- Powerpoint vertical - Guide
- Canon quick menu - Télécharger - Utilitaires
- Barre vertical mac ✓ - Forum MacOS
- Trait vertical clavier - Forum Clavier
11 réponses
Bonjour,
“tout le div”
Quel <div> ?
Je n'en vois pas.
Essaye d'indiquer la hauteur de l'élément :
“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;
}
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 ?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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*) :
Et le “#menu ul” ne peut pas marcher parce que le <ul> est le #menu.
* Exemple
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
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;
}
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"
- 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"
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
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
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
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 :
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
#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
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,
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
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;
