Aller au contenu

ça déborde de partout... je déséspère


Tchesko

Sujets conseillés

Bonjour, je suis déséspéré... :wacko:

Je travail sur un nouveau site visible ici :

Rencontrant des problèmes de compatibilité tant sur la navigation que sur la partie contenu, je me suis mis à isoler ma barre de navigation, le contenu reprennant le meme principe.

En gros, il s'agit de représenter un cadre de contenu entouré d'ombres.

1er problème : J'ai un espace sous mes div haut et bas (probleme de margin/padding?).

2eme probleme : Sous IE le rollover ne se fait que sur le texte et pas sur le li.

Après quelques modifications visibles ici :

J'ai un problème de débordement sous Mozilla que je nai pas sous IE et un problème d'espace sous mon calque bas sous IE et pas sous Moizilla...

J'ai beau tourner dans tout les sens je n'y arrive pas. Fatalement il y a des notions de CSS qui m'échappent.

:nono:

Voici la cause de mon désespoir :


body {
margin: 0px;
color: #000000;
background-color: #E3E5E1;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

#nav_support{
position: absolute;
top: 132px;
left: 34px;
margin:0px;
padding:0px;
width: 182px;
background: url(../img/nav/nav_c.gif) no-repeat center top;
}

#nav_haut{
position: absolute;
top: 129px;
left: 34px;
margin:0px;
padding:0px;
height: 3px;
width: 182px;
background: url(../img/nav/nav_h.gif) no-repeat center top;
line-height: 0px;
}

#nav_bas{
clear: both;
margin:0px;
padding:0px;
height: 8px;
width: 182px;
background: url(../img/nav/nav_b.gif) no-repeat center top;
line-height: 0px;
}

#nav_gauche{
float:left;
margin:0px;
padding:0px;
width: 4px;
height: 13px;
background: url(../img/nav/nav_g.gif) no-repeat left top;
}

#nav_droite{
float:left;
margin:0px;
padding:0px;
width: 8px;
height: 13px;
background: url(../img/nav/nav_d.gif) no-repeat left top;
}


#nav_centre{
float: left;
font: 10px Verdana, Arial, Helvetica, sans-serif;
margin-left: 0 4px 0 0;
padding:0px;
width:170px;
}

#nav_centre A{
display: block;
padding-left: 10px;
color: #000000;
text-decoration: none;
line-height:50px;
width:170px;
text-decoration : none;
}
#nav_centre UL{
padding:0px;
margin:0px;
line-height:50px;
}
#nav_centre LI {
padding:0px;
margin:0px;
font-size: 11px;
display: block;
list-style-type: none;
}

#nav_centre LI A {
color: #666666;
}

#nav_centre LI A:hover {
color: #666666;
background-color: #F7FAF5;
border-top: 1px solid #B3B3B3;
border-bottom:  1px solid #B3B3B3;
line-height:48px;
}

VOila pour la partie CSS.


<body>
<div id="nav_haut"> </div>
<div id="nav_support">
<div id="nav_gauche"></div>
<div id="nav_centre">
<ul>
<li id="n_l1"><a href="#">lien 1</a></li>
<li id="n_l2"><a href="#">lien 2</a></li>
<li id="n_l3"><a href="#">lien 3</a></li>
<li id="n_nl4"><a href="#">lien 4</a></li>
<li id="n_l5"><a href="#">lien5</a></li>
</ul>
</div>
<div id="nav_droite"></div>
<div id="nav_bas"></div>
</div>
</body>

Si quelqu un à déja rencontré ses différents problèmes, qu'il n'hésite pas à me laisser un indice :whistling:

Lien vers le commentaire
Partager sur d’autres sites

Hello,

2eme probleme : Sous IE le rollover ne se fait que sur le texte et pas sur le li.

IE ne comprend pas pourquoi on pourrait mettre un rollover sur un li...

Il est cave, c'est comme ça...dsl

Mais tu peux toujours aller voir là, ça va probablement résourdre ton problème :

http://dean.edwards.name/IE7/

Byebye

Caro :flower:

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...