Problème pour positionner menu css
kimnormand
Messages postés
13
Date d'inscription
Statut
Membre
Dernière intervention
-
kiyomasa Messages postés 312 Date d'inscription Statut Membre Dernière intervention -
kiyomasa Messages postés 312 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Voilà, j'ai un petite problème pour positionner mon menu qui est horizontale, j'ai une image devant et ensuite, je voudrais mon menu mais il va se position en dessous de l'image alors que je le voudrais à côté.
Je suis débutante en matière de site web et je maitrise a peine les syles css!!
je vous donne le code si cela peut vous aider a maider!
merci beaucoup!
code html:
<body>
<div id="global"><div id="entete_01"><img src="images/tete_02.jpg" width="870" height="33"></div>
<div id="entete_02"><img src="images/tete_04.jpg" width="183" height="259"><img src="images/tete_05.jpg" width="232" height="259"><img src="images/tete_06.jpg" width="243" height="259"><img src="images/tete_07.jpg" width="159" height="259"><img src="images/tete_08.jpg" width="163" height="259"></div>
<img src="images/menuhaut-fleur_01.jpg" width="67" height="48"><img src="images/menuhaut-fleur_02.jpg" width="117" height="48">
<div id=menuhaut>
<ul> <li><a href="https://planetargent.forumactif.com">Accueil</a>
<li><a href="https://planetargent.forumactif.com">Aide</a>
<li><a href="https://planetargent.forumactif.com">Contact</a>
</li></ul></div></div>
</body>
code css:
body {
background-color: #0268ba;
background-image: url(images/bg-planetargent.jpg);
margin: 0;
text-align: center;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #FFFFFF;
}
#global {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 980px;
height: 2050px
}
#entete_01{
width:980px;
height: 33px;
text-align: center;
}
#entete_02{
width:980 px;
height: 259 px
}
#menuhaut UL {
padding:0;
margin:0;
list-style-type:none;
}
#menuhaut li {
float:left;
}
#menuhaut ul li a {
display:block;
float:left;
width:116px;
line-height:48px;
background:black url(images/menuhaut_01.jpg) repeat-x;
color:#DCDCDC;
text-decoration:none;
text-align:center;
}
#menuhaut ul li a:hover {
background:black url(images/menuhaut_01-over.jpg) repeat-x;
color:white;
}
Voilà, j'ai un petite problème pour positionner mon menu qui est horizontale, j'ai une image devant et ensuite, je voudrais mon menu mais il va se position en dessous de l'image alors que je le voudrais à côté.
Je suis débutante en matière de site web et je maitrise a peine les syles css!!
je vous donne le code si cela peut vous aider a maider!
merci beaucoup!
code html:
<body>
<div id="global"><div id="entete_01"><img src="images/tete_02.jpg" width="870" height="33"></div>
<div id="entete_02"><img src="images/tete_04.jpg" width="183" height="259"><img src="images/tete_05.jpg" width="232" height="259"><img src="images/tete_06.jpg" width="243" height="259"><img src="images/tete_07.jpg" width="159" height="259"><img src="images/tete_08.jpg" width="163" height="259"></div>
<img src="images/menuhaut-fleur_01.jpg" width="67" height="48"><img src="images/menuhaut-fleur_02.jpg" width="117" height="48">
<div id=menuhaut>
<ul> <li><a href="https://planetargent.forumactif.com">Accueil</a>
<li><a href="https://planetargent.forumactif.com">Aide</a>
<li><a href="https://planetargent.forumactif.com">Contact</a>
</li></ul></div></div>
</body>
code css:
body {
background-color: #0268ba;
background-image: url(images/bg-planetargent.jpg);
margin: 0;
text-align: center;
}
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12pt;
color: #FFFFFF;
}
#global {
margin-left: auto;
margin-right: auto;
text-align: left;
width: 980px;
height: 2050px
}
#entete_01{
width:980px;
height: 33px;
text-align: center;
}
#entete_02{
width:980 px;
height: 259 px
}
#menuhaut UL {
padding:0;
margin:0;
list-style-type:none;
}
#menuhaut li {
float:left;
}
#menuhaut ul li a {
display:block;
float:left;
width:116px;
line-height:48px;
background:black url(images/menuhaut_01.jpg) repeat-x;
color:#DCDCDC;
text-decoration:none;
text-align:center;
}
#menuhaut ul li a:hover {
background:black url(images/menuhaut_01-over.jpg) repeat-x;
color:white;
}
A voir également:
- Problème pour positionner menu css
- Menu déroulant excel - Guide
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide
- Positionner des points sur une carte - Guide
- Windows 11 menu démarrer classique - Guide
4 réponses
Bonjour.
Si c'est juste un problème de placement c'est vite réglé.
Je vois dans ton CSS que tu n'utilise jamais "top" et "left" (ou j'ai mal vu ^^).
Tu vas dans le CSS de ton menu et tu lui attribut une valeur en top et en left en pixel
exemple :
#menuhaut UL {
left: 30px;
top: 20px;
}
Top définit à combien de pixel du haut de la page son image se situe et left à combien de pixel de la gauche de la page l'image sur situe.
Ici, l'image est placé à 30px du haut et à 20 px de la gauche.
Avec ça, tu place ton image exactement ou tu veux.
Et si jamais ton menu est en dessous de ton image, tu peux lui mettre en CSS : z-index: 1; il sera placer au dessus de tt les éléments.
Voilà et dit ca a marché
Si c'est juste un problème de placement c'est vite réglé.
Je vois dans ton CSS que tu n'utilise jamais "top" et "left" (ou j'ai mal vu ^^).
Tu vas dans le CSS de ton menu et tu lui attribut une valeur en top et en left en pixel
exemple :
#menuhaut UL {
left: 30px;
top: 20px;
}
Top définit à combien de pixel du haut de la page son image se situe et left à combien de pixel de la gauche de la page l'image sur situe.
Ici, l'image est placé à 30px du haut et à 20 px de la gauche.
Avec ça, tu place ton image exactement ou tu veux.
Et si jamais ton menu est en dessous de ton image, tu peux lui mettre en CSS : z-index: 1; il sera placer au dessus de tt les éléments.
Voilà et dit ca a marché
bonjour kiyomasa
j'ai essayé tout ce que tu me dis et ca reste toujours pareil. C'est vraiment difficile le css je trouve et je crois que je ne comprends pas très bien certaine chose sur le positionnement notamment.
J'ai voulu essayé de faire mon site sans tableau et tenté la mise en page full css mais depuis une semaine je galère!!!!
J'ai beaucoup d'image dans mon site (découper dans image ready) et je me demande si cela n'est pas plus difficile. J'ai entendu dire que si on metais trop de div ce n'était pas mieux non plus...
alors je te remerci pour ton aide, je vais essayé de trouver encore un peu, si vous avez d'autre suggestion, elles sont les bienvenus?
merci beaucuop
j'ai essayé tout ce que tu me dis et ca reste toujours pareil. C'est vraiment difficile le css je trouve et je crois que je ne comprends pas très bien certaine chose sur le positionnement notamment.
J'ai voulu essayé de faire mon site sans tableau et tenté la mise en page full css mais depuis une semaine je galère!!!!
J'ai beaucoup d'image dans mon site (découper dans image ready) et je me demande si cela n'est pas plus difficile. J'ai entendu dire que si on metais trop de div ce n'était pas mieux non plus...
alors je te remerci pour ton aide, je vais essayé de trouver encore un peu, si vous avez d'autre suggestion, elles sont les bienvenus?
merci beaucuop
ne perd pas espoir !! ^^
c'est bien mieux de construire en div.
Pourquoi ? parce que c'est plus simple et plus rapide qu'en tableau, enfin je trouve en tout cas.
Voilà un exemple de comment je positionne mes balise div :
.nom {
background-image: url(images/bas.jpg);
position: absolute;
height: 41px;
width: 1000px;
left: 0px;
top: 586px;
}
Ici, background-image : va chercher dans mon fichier "images" celle que je veux placer.
position: absolute : place l'image par rapport aux limitte du conteneur (possible que l'image se place pas bien si tu ne le précise pas).
height et width sont les dimensions de mon images
left et top, comme je t'ai expliqué, indique l'origine (abscisse et ordonnée) de mon image
Je n'ai jamais de problème ainsi.
j'espère que c'est plus clair ...
c'est bien mieux de construire en div.
Pourquoi ? parce que c'est plus simple et plus rapide qu'en tableau, enfin je trouve en tout cas.
Voilà un exemple de comment je positionne mes balise div :
.nom {
background-image: url(images/bas.jpg);
position: absolute;
height: 41px;
width: 1000px;
left: 0px;
top: 586px;
}
Ici, background-image : va chercher dans mon fichier "images" celle que je veux placer.
position: absolute : place l'image par rapport aux limitte du conteneur (possible que l'image se place pas bien si tu ne le précise pas).
height et width sont les dimensions de mon images
left et top, comme je t'ai expliqué, indique l'origine (abscisse et ordonnée) de mon image
Je n'ai jamais de problème ainsi.
j'espère que c'est plus clair ...