Jump to content
Sign in to follow this  
Tchesko

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

Rate this topic

Recommended Posts

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:

Share this post


Link to post
Share on other 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:

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...