Problème menu horizontal CSS

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Problème menu horizontal CSS

aiyana

Bonjour,
Je commence à créer un nouveau site ou j'essaie de me débrouiller tant bien que mal avec les codes (je n'ai appris que par internet).
J'ai un menu à la vertical et je souhaite aussi avoir un menu horizontal en haut (en dessous de ma bannière) et c'est ce qui me pose problème.
En effet après avoir chercher sur internet comment faire j'ai fini par trouver enfin un code css qui marche, cependant le menu est décallé vers le bas et rogné au lieu de rester dans son emplacement.
Voici l'adresse de la page que je crée qui bug :
http://www.bijouxetnature.com/bijoux_pierres.php

Je vous mets une partie des codes des pages, si besoin de + dîtes le moi.

La page php "bijoux_pierres.php" : ou j'ai mis le code "php include" pour que je puisse faire une modif du menu sans avoir à changer le menu page par page

Code :

<ul id="MenuH">
<?php include 'menu_horizontal.php'; ?>
</ul>

______________________________________________________________________________________________________

La page du menu : "menu_horizontal.php"

Code :

<li><a href="index.php" onmouseover="img20.src='menu_h_accueil2.jpg' " onmouseout="img20.src='menu_h_accueil.jpg'"><img name="img20" src="menu_h_accueil.jpg" title="Accueil Bijoux et Nature" alt="Accueil"/></a></li>
<li><a href="bijoux_pierres.php" onmouseover="img21.src='menu_h_bijoux_pierres2.jpg' " onmouseout="img21.src='menu_h_bijoux_pierres.jpg'"><br><br><img name="img21" src="menu_h_bijoux_pierres.jpg" title="Bijoux en Pierres" alt="Bijoux en Pierres"/></a></li>
<li><a href="mineraux.php" onmouseover="img22.src='menu_h_mineraux2.jpg' " onmouseout="img22.src='menu_h_mineraux.jpg'"><img name="img22" src="menu_h_mineraux.jpg" title="Minéraux" alt="Minéraux"/></a></li>
<li><a href="cosmetiques_naturels.php" onmouseover="img23.src='menu_h_cosmetiques_naturels2.jpg' " onmouseout="img23.src='menu_h_cosmetiques_naturels.jpg'"><img name="img23" src="menu_h_cosmetiques_naturels.jpg" title="Cosmétiques Naturels" alt="Cosmétiques Naturels"/></a></li>

_______________________________________________________________________________________________________

La page CSS :

Code :

body {
background-image: url(fond_rouge.jpg);
color: #000000;
font-family: Verdana, Arial, Helvetica, ,sans-serif;
font-size: 15px;
}
#Conteneur {
width: 795px;
margin: 0;
padding: 0;
border: 3px solid #000000;
background-image: url(../fond_rouge_uni.jpg);
margin-left: auto;
margin-right: auto;
}
#Header {
background-image: url(../fond_rouge.jpg);
width: 795px;
height: 108px;
border-bottom: 1px solid #000000;
clear: both;
margin: 0;
padding: 0;
}
#MenuH {
background-image: url(../fond_rouge.jpg);
width: 795px;
height: 71px;
border-bottom: 1px solid #000000;
margin: 0;
padding: 0;
list-style-type: none;
}
#MenuH li {
margin: 0;
padding: 0;
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#ConteneurMenuContenu {
clear: both;
width: 100%;
}
#Menu {
background-image: url(../fond_rouge_uni.jpg);
width: 134px;
float: left;
margin: 0;
padding: 0;
list-style-type: none;
}
#Menu li {
margin: 0;
}
#Contenu {
background-color: #FFFFFF;
width: 650px;
float: left;
padding: 5px;
border-left: 1px solid #000000;
margin: 0;
min-height: 900px;
_height: 900px;
}
#Footer {
clear: both;
border-top: 1px solid #000000;
background-color: #FFFFFF;
}

_______________________________________________________________

Que dois-je faire ? si y'a une autre manière qui marche pour le menu horizontal je veux bien.
Merci

Publicité

aiyana

Bon en fait en me relisant problème réglé y'avait des <br> dans mon menu qui apparement faisaient tout déconner et là ça s'affiche correctement. Il me faudrait juste espacer les textes du menu un peu

Message cité 1 fois
Message édité par aiyana le 13-09-2009 à 20:46:50

abais

aiyana a écrit :

Il me faudrait juste espacer les textes du menu un peu

Code :

body {
    background-image: url(fond_rouge.jpg);
    color: #000000;
    font-family: Verdana, Arial, Helvetica, ,sans-serif;
    font-size: 15px;
}
 
#Conteneur {
    width: 795px;
    margin: 0;
    padding: 0;
    border: 3px solid #000000;
    background-image: url(../fond_rouge_uni.jpg);
    margin-left: auto;
    margin-right: auto;
}
 
#Header {
    background-image: url(../fond_rouge.jpg);
    width: 795px;
    height: 108px;
    border-bottom: 1px solid #000000;
    clear: both;
    margin: 0;
    padding: 0;
}
 
#MenuH {
    background-image: url(../fond_rouge.jpg);
    width: 795px;
    height: 71px;    
    border-bottom: 1px solid #000000;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
 
#MenuH li {
       margin: 0 15px;
     padding: 0;
     float:left;
     zoom:1;
}
 
#ConteneurMenuContenu {
    clear: both;
    width: 100%;
}
 
#Menu {
    background-image: url(../fond_rouge_uni.jpg);
    width: 134px;
    clear:both;
    float: left;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
 
#Menu li {
       margin: 0;
}
 
#Contenu {
    background-color: #FFFFFF;
    width: 650px;
    float: left;
    padding: 5px;
    border-left: 1px solid #000000;
    margin: 0;
    min-height: 900px;
    _height: 900px;
}
 
#Footer {
    clear: both;
    border-top: 1px solid #000000;
    background-color: #FFFFFF;
}

Voila... Fais une sauvegarde de ta version quand même... si il y a un truc que tu comprend pas, dis moi...

Message édité par abais le 13-09-2009 à 21:14:26

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

aiyana

Merci mais finalement je n'aime pas les espaces car ça ne fait pas "fondu" sur le fond entre les boutons du menu.
J'ai arrangé le menu pour que justement le fond se fonde bien entre les titres (chaque bouton est une image faite sous photoshop et je les ai fais se coller tous).
Sur internet explorer ça marche nickel mais sur fire fox il me met des espaces entre les images (au lieu de les coller) pourquoi ? et du coup le menu ne rentre pas et y'a un bouton décallé en bas.

Message édité par aiyana le 16-09-2009 à 23:58:13

abais

Alors efface le "15px" de :

MenuH li {
margin: 0 15px;
.....

Si la largeur de tes boutons additionnée correspond bien à la largeur du menu, ça devrait le faire...

Message édité par abais le 17-09-2009 à 09:47:17

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

aiyana

J'ai enlevé les "display" comme tu m'avais noté et mis margin 0 mais j'ia toujours le bug sous firefox...
Je vais voir pour diminuer la dimension de mes boutons mais bon pourquoi il me met un espace entre les images c'est pas joli

abais

Tu a remis "inline-block" en display...
En visitant ton site à l'instant, le seul truc qui manque, c'est le float:left; sur les <li>, et retirer le display:inline-block...

On a donc :

Code :

...
#MenuH li {
float:left;
margin:0;
padding:0;
}
...

Message édité par abais le 18-09-2009 à 10:24:10

---------------
Le membre ci-contre n'est pas responsable du message ci-dessus.

aiyana

Merci abais, je n'ai pas trop compris pourquoi mais ça marche très bien maintenant
(J'avais mal mis à jour effectivement je ne sais pas ce que j'ai foutu.)

FORUM HardWare.fr

Programmation

HTML/CSS

Problème menu horizontal CSS

Sujets relatifs
Probleme d'upload fichiers div ajax(c urgent)	AS 3.0, problème d'agrandissement
Problème navigation sur un hébérgeur de site web html	Problème de code PHP
Problème affichage html	Problème import mysql win depuis linux
Problème avec la fonction SCardTransmit	Probleme de poistionement site et apparence
[Résolu] problème de CSS sur un menu
Plus de sujets relatifs à : Problème menu horizontal CSS

Page générée en 0.106 secondes