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

Tchesko · 29 Octobre 2004

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:

sailorcarom · 29 Octobre 2004

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:

petit-ourson · 29 Octobre 2004

Sinon ilfaut mettre tes <a> en bloc soit :

#nav_centre LI A {
color: #666666;
display: block;
}

Tchesko · 30 Octobre 2004

Merci ,

Je vais faire des essais, je crois qu il faut- que je me penche sur les héritages et les types rapidement.

Connexion

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

Sujets conseillés

Tchesko

sailorcarom

petit-ourson

Tchesko

Veuillez vous connecter pour commenter

Parcourir

Activité