prob menu css dans page php

djseb

30 Août 2006 08:26:59

bonjour,
je suis apprenti pour un bts et je suis en train de créer le site internet de ma société. je le fait en flash et php que japrend en le fesant.
j'ai réalisé un menu en css.
le problème c'est qu'il ne s'affiche jamais au même endroit sous internet explorer et que sous les autre navigateur comme firefox ou netscape il est complètement à gauche et les image inter quatérogie ne s'affiche pas.
j'ai pouvoir résoudre ce problème très vite et j'espère que vous pourrez m'aidez.

voila le contenu du fichier css lié au menu :

UL {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
LI {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
BODY {
TEXT-ALIGN: center
}

A {
TEXT-DECORATION: none
}
#logo {
FLOAT: left; WIDTH: 49%
}

#navig LI {
DISPLAY: block; FLOAT: left
}
#navig A {
DISPLAY: block; TEXT-ALIGN: left
}

#navig .i {
BACKGROUND: url(inter-commande.jpg) no-repeat left bottom; WIDTH: 7px; LINE-HEIGHT: 15px; MARGIN-RIGHT: 20px
}

#navig .smenu {
Z-INDEX: 2; VISIBILITY: hidden; POSITION: absolute
}
#navig .smenu LI {
WIDTH: 100%
}
#navig .smenu A {
FONT-WEIGHT: normal; FONT-SIZE: 8pt; TEXT-INDENT: 5px; TEXT-ALIGN: left
}
BODY {
FONT-SIZE: 13px; COLOR: #ffffff; FONT-FAMILY: Arial
}
#top {
BACKGROUND: url(rien) no-repeat; WIDTH: 850px
}
#menu {
PADDING-TOP: 15px
}
#navig SPAN {
FONT-WEIGHT: normal; FONT-SIZE: 18px; font-family: "Impact", Tahoma, Trebuchet MS, Arial , sans-serif; TEXT-TRANSFORM: capitalize; COLOR: #FFFFFF; TEXT-DECORATION: none
}

#navig .smenu {
BORDER-RIGHT: #000000 1px solid; BORDER-TOP: #000000 1px solid; BORDER-LEFT: #000000 1px solid; WIDTH: 183px; BORDER-BOTTOM: #000000 1px solid; BACKGROUND-COLOR: #ffffff
}
#navig .smenu A {
COLOR: #FF0000
}
#navig .smenu A:hover {
BACKGROUND: #FF0000; COLOR: #ffffff; TEXT-DECORATION: none
}
#navig LI.start {
WIDTH: 50px
}
#navig LI.m1 {
MARGIN-RIGHT: 20px
}
#navig LI.m2 {
MARGIN-RIGHT: 20px
}
#navig LI.m3 {
MARGIN-RIGHT: 20px
}
#navig LI.m4 {
MARGIN-RIGHT: 20px
}
#navig LI.m5 {
MARGIN-RIGHT: 20px
}
#navig LI.m6 {
MARGIN-RIGHT: 20px
}
#navig LI.m7 {
MARGIN-RIGHT: 20px
}
#navig LI.m8 {
MARGIN-RIGHT: 20px
}
#navig LI.m9 {
MARGIN-RIGHT: 20px
}
#navig LI.m10 {
MARGIN-RIGHT: 20px
}
#navig LI.m11 {
MARGIN-RIGHT: 20px
}
#navig LI.m12 {
MARGIN-RIGHT: 20px
}
#navig LI.end {
DISPLAY: none
}
#navig LI.end {
DISPLAY: none
}

et voila le code daffichage du menu :

<SCRIPT type=text/javascript>

</SCRIPT>

<LINK media=screen
href="style.css"
type=text/css rel=stylesheet>

<BODY>
<DIV id=master>
<DIV id=refs>
</DIV>
<DIV id=top>
<DIV id=logo>
</DIV>
<DIV id=flag>
</DIV>

<br><br><br><br><br><br><br><br><br><br><br><br><br>

<DIV id=navig>
<UL id=menu>
<LI class=start> </LI>
<LI class=m1><A class=menu title=Accueil href="intro.html"><SPAN>Accueil</SPAN></A>
</LI>
<LI class=i> </LI>
<LI class=m2 onmouseover="menu('smenu_2','visible')"
onmouseout="menu('smenu_2','hidden')">
<A class=menu
*.php"><SPAN>Homme</SPAN></A>
<UL class=smenu id=smenu_2>

<LI><A href="*.php">T-shirt Manches Longues</A></LI>
<LI><A href="*.php">T-Shirt Manches Longues Capuche</A></LI>
<LI><A href="*.php">T-Shirt Manches Courtes</A></LI>
<LI><A href="*.php">T-Shirt Manches Courtes Capuche</A></LI>
<LI><A href="*.php">Débardeur</A></LI>
<LI><A href="*.php">Sweat</A></LI>
<LI><A href="*.php">Sweat Capuche</A></LI>
<LI><A href="*.php">Gilet</A></LI>
<LI><A href="*.php">Gilet Capuche</A></LI>
<LI><A href="*.php">Pantalon</A></LI>
<LI><A href="*.php">Jeans</A></LI>

</UL></LI>
<LI class=i> </LI>
<LI class=m3 onmouseover="menu('smenu_3','visible')"
onmouseout="menu('smenu_3','hidden')"><A class=menu
href="*.php"><SPAN>Femme</SPAN></A>
<UL class=smenu id=smenu_3>

<LI><A href="*.php">T-shirt Manches Longues</A></LI>
<LI><A href="*.php">T-Shirt Manches Longues Capuche</A></LI>
<LI><A href="*.php">T-Shirt Manches Courtes</A></LI>
<LI><A href="*.php">T-Shirt Manches Courtes Capuche</A></LI>
<LI><A href="*.php">Débardeur</A></LI>
<LI><A href="*.php">Sweat</A></LI>
<LI><A href="*.php">Sweat Capuche</A></LI>
<LI><A href="*.php">Gilet</A></LI>
<LI><A href="*.php">Gilet Capuche</A></LI>
<LI><A href="*.php">Pantalon</A></LI>
<LI><A href="*.php">Jeans</A></LI>

</UL></LI>
<LI class=i> </LI>
<LI class=m4 onmouseover="menu('smenu_4','visible')"
onmouseout="menu('smenu_4','hidden')"><A class=menu
href="*.php"><SPAN>Garçon</SPAN></A>

<UL class=smenu id=smenu_4>

<LI><A href="*.php">T-shirt Manches Longues</A></LI>
<LI><A href="*.php">T-Shirt Manches Longues Capuche</A></LI>
<LI><A href="*.php">T-Shirt Manches Courtes</A></LI>
<LI><A href="*.php">T-Shirt Manches Courtes Capuche</A></LI>
<LI><A href="*.php">Débardeur</A></LI>
<LI><A href="*.php">Sweat</A></LI>
<LI><A href="*.php">Sweat Capuche</A></LI>
<LI><A href="*.php">Gilet</A></LI>
<LI><A href="*.php">Gilet Capuche</A></LI>
<LI><A href="*.php">Pantalon</A></LI>
<LI><A href="*.php">Jeans</A></LI>

</UL></LI>
<LI class=i> </LI>
<LI class=m5 onmouseover="menu('smenu_5','visible')"
onmouseout="menu('smenu_5','hidden')"><A class=menu
href="*.php"><SPAN>Fille</SPAN></A>

<UL class=smenu id=smenu_5>

<LI><A href="*.php">T-shirt Manches Longues</A></LI>
<LI><A href="*.php">T-Shirt Manches Longues Capuche</A></LI>
<LI><A href="*.php">T-Shirt Manches Courtes</A></LI>
<LI><A href="*.php">T-Shirt Manches Courtes Capuche</A></LI>
<LI><A href="*.php">Débardeur</A></LI>
<LI><A href="*.php">Sweat</A></LI>
<LI><A href="*.php">Sweat Capuche</A></LI>
<LI><A href="*.php">Gilet</A></LI>
<LI><A href="*.php">Gilet Capuche</A></LI>
<LI><A href="*.php">Pantalon</A></LI>
<LI><A href="*.php">Jeans</A></LI>

</UL></LI>
<LI class=end> </LI></UL></DIV>

d'avance merci de votre aide.

Galdeano Sébastien

Autres pages sur : prob menu css page php

| Etre averti des réponses
| Alerter

Répondre à djseb

Neoryuki

30 Août 2006 08:31:23

je deplace

| Alerter

Répondre à Neoryuki

zeb

Expert Programmation

30 Août 2006 09:16:14

djseb, bienvenue dans la catégorie Programmation.
Merci de lire les règles. et de mettre ton post en conformité (Utilisation de la balise CODE en particulier)

| Alerter

Répondre à zeb

Johan_et_Pirlouit

30 Août 2006 15:26:24

Sans compter qu'on ne va pas ré-inventer la roue : pas mal de liens pointant vers des tutos CSS et parlant aussi des différences IE - reste du monde se trouvent dans le topic pinné en gras et en tête de la catégorie Vous vous lancez dans le développement web ? lisez ceci.....

Pour ton info : IE ne sait pas gérer la pseudo-class :hover ailleurs que sur des objets <a>.. Avec IE (5.x et 6), pour appliquer un :hover sur le couple <ul> / <li> utilisé dans un menu déroulant "full-CSS", il faut passer par JavaScript..

C'est dit et expliqué dans l'article suivant (trouvable évidemment dans le TU que je t'indique) : La vengeance des menus déroulants >> http://pompage.net/pompe/deroulants/.. C'est d'ailleurs ce modèle que j'utilise sur mon site..

Et puis, quand on programme, on apprend la syntaxe autant que la sémantique du langage utilisé ! Depuis 2000, on programme en XHTML et en XHTML on n'utilise pas de majuscules (tout est en minuscules), on met des guillemets pour tous les attributs et on ferme toutes les balises simples (<img ... /> avec attribut alt obligatoire, <br />, <hr />, <meta ... />, etc).. Il va aussi de soi que tous les attributs (X)HTML qui ont des équivalences CSS ne sont plus désirés dans le code XHTML (séparation de la mise en page et du contenu, principe du XML moteur de l'XHTML).. Des articles abordent aussi le sujet et sont répertoriés dans le même TU que pour les CSS..

Et on utilise un placement CSS des blocs <div>, <p>, <table> et autres à la place de coller une foultitude de <br /> pour espacer ces éléments..

Pour les majuscules, c'est idem en CSS qu'en XHTML : tout en minuscules !! Attention : CSS est sensible à la casse pour les noms de class et d'id et aucun de ces noms ne doit débuter par un chiffre.. Les caractères accentués ne sont pas recommandés et les traits - et _ sont autorisés.. Les espaces non : ils servent de séparateurs, par exemple pour "empiler" des classes dans les définitions d'objets..

Pour le reste, tu furettes les tutos

.. Et tu utilises un logiciel du genre Nvu : c'est le meilleur gratuit.. Interface 100% graphique, coloration syntaxique du code et respect des derniers standards au programme !

:jap:

| Alerter

Répondre à Johan_et_Pirlouit

KangOl

30 Août 2006 16:30:31

en parlant de menu déroulant, je suis sur le point d'ajouter une url vers un script kilebieng pour faire des menus css ...

ps : nvu m'a un peu décu sur certain points ...

| Alerter

Répondre à KangOl

Johan_et_Pirlouit

30 Août 2006 19:58:46

Citation :

ps : nvu m'a un peu décu sur certain points ...

Pour rester dans le h.s.: lesquels ? Parce que je sais qu'il ne fait pas dans le PHP et autres, il se "contente" des choses "de base" [:spamafote]

..

| Alerter

Répondre à Johan_et_Pirlouit

KangOl

30 Août 2006 20:06:54

bha il a du mal avec les tables ...
j'ai eu des aussi des plantage ...

de toute facon, je code avec scite moi

| Alerter

Répondre à KangOl

marsien

Expert Programmation

30 Août 2006 20:53:33

J'ai eu aussi pas mal de plantages avec nvu, mais seulement quand je lui demandais du xhtml strict. Tant que tu restes en transitional, tout se passe bien.

Pour les tables, il ne m'a par contre pas posé de problème...

Mais maintenant, je code uniquement avec Notepad++

dyslexie du clavier

| Alerter

Répondre à marsien