Gabarit de page et intégration de menu dynamique

[ralf12]

Voilà après plusieurs jours de galères, je m'avoue vaincu et je demande votre aide....Avant que ça tourne au drame

En clair, j'ai fait il y a quelques temps des sites mais en utilisant toujours un éditeur html...j'ai découvert le css par hasard (en même temps que la communautée HUB)...et je me suis lancé dans l'aventure avec une idée précise du résultat mais aucune connaissance en la matière...et au bout de nombreux tatonnements et de plusieurs tutoriaux (merci à eux!) j'ai fait un gabarit de page et des menus dynamiques...tout allait bien...jusqu'au jour ou j'ai intégré mes menus sur mon gabarit de page...et que j'ai remarqué toutes les différences d'affichage entre IE&Mozilla...et ça a été le début de la galère...

Donc si quelqu'un pouvait me trouver une solution a mes problèmes d'affichage...ce serait vraiment formidable...et je pourrais réellement me lancer dans la création de ce site sur ma commune...merci d'avance...

Un pseudo webmaster au bord du gouffre...

Voilà mes soucis avec mon gabarit de page et mon menu gauche:

en test sur : http://leteste.ifrance.com/

et mon menu avant son intégration dans le gabarit http://leteste.ifrance.com/menu.htm

Sous IE:

- menu principal: la police passe en gras

- sous menu: les cadres ont disparus, il n'y plus d'espace visible entre les cellules et il n'y a plus de couleur de fond spécifique (c'est la couleur du menu principal qui prime)

-et en plus nouveauté du jour : toute la page se décalle à gauche sur Internet Explorer

Sous Mozilla

- menu principal: la police passe en gras

- sous menu: chaque cellule et très espacé (le contraire de sous IE), les cellules n'ont plus de cadre d'effet relief'

Voilà mes deux fichiers css associés à la page

style1.css (menu gauche)
<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80%  arial, sans-serif;
font-size: 12px;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
}
#menu {
width: 185px;
}
#menu dt {
cursor: pointer;
margin: 3px 0;;
height: 22px;
line-height: 20px;
text-align: left;
vertical-align: bottom;
font-weight: bold;
font-size: 12px;
border: 1px ridge groove gray;
background : #036;
color : #fff
}
#menu dd {
border: 1px ridge groove gray;
font-size: 12px;
}
#menu li {
text-align: left;
margin-bottom: 1px;
border: 1px ridge ;
background : #CCC;
color : #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
border: 0 none;
height: 100%;
}
#menu li a:hover, #menu dt a:hover {
background : #999
}
-->
</style>

style.css (menu du bas)
#navcontainer ul
{
padding: .2em 0;
margin: 0;
list-style-type: none;
background-color: #036;
color: #fff;
width: 100%;
font: normal 90% arial, helvetica, sans-serif;
text-align: center;
font-size: 12px;
}

li { display: inline; }

li a
{
text-decoration: none;
background-color: #036;
color: #fff;
padding: .2em 1em;
border-right: 1px solid #fff;
}

li a:hover
{
background-color: #cccccc;
color: #036;
}

[Edit captain_torche]Merci d'utiliser la balise codebox lorsque tu postes des codes longs. j'ai également supprimé l'image, elle est rigolote mais n'apporte rien au sujet

Ok

Modifié 18 Septembre 2006 par ralf12