Tom's Guide > Forum > Programmation > [XHTML] probleme menu

[XHTML] probleme menu

Forum Programmation : [XHTML] probleme menu

TomsGuide.com : 800 000 inscrits répondent à toutes vos questions high-tech et informatique. Pour obtenir de l'aide, inscrivez-vous gratuitement !
Créer un nouveau sujet Répondre
Mot :    Pseudo :           
 
Oneilus   27-12-2008 à 15:35:55

Bonjour, j'ai récupérer un template gratuit sur internet, je l'ai adapté mais il y a quelques problème avec affichage par rapport à mon menu.

voila mon code:


index.html:

Citation :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Coporate Profiles</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<ul id="menuDeroulant" name="menuDeroulant">
<li><a href="#">Accueil</a></li>
<li><a href="#">1</a>
<ul class="sousMenu">
<li><a href="#">f</a></li>
<li><a href="#">f</a></li>
<li><a href="#">f</a></li>
<li><a href="#">f</a></li>
<li><a href="#">f</a></li>
</ul>
</li>
<li><a href="#">2</a></li>
<ul class="sousMenu">
<li><a href="#">f</a></li>
<li><a href="#">f</a></li>
</ul>
</li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
</ul>
<div id="bodyPan">
<p class="ImgPan"><img src="logo.gif" width="201" height="73" alt="" /></p>
<p class="toptextpadding">tretgtrthrthrhryrrrrhrthrthrtrhrthrthrthry-tryutryryrtrttethrytrte'&quot;t'etet(etretretre</p>
<p>dfgfesfvsffvegrerthrtr</p>
<p><br /></p>
<p class="more"><a href="#">read more</a></p>
</div>
<div id="bodyMiddlePan">
<div id="MiddleLeftPan">
<h2>lalz<br />
<span>...!</span></h2>
<p class="largegraytext">&nbsp;</p>
<p>fdsdsfdsfdsfdsf</p>
<p class="more"><a href="news1.html">lire la suite</a></p>
<p class="largegraytext">titre.</p>
<p>fdsfdsfdsfdsfds</p>
<p class="more"><a href="news2.html">lire la suite</a></p>
<p class="chat"><a href="#">24 hours chat</a></p>
</div>
<div id="MiddleRightPan">
<div id="MiddleRightTopPan">
<p class="fresh">fresh for</p>
<p class="business">business</p>
</div>
<h2>fdsfdsfdsfdsfdsf</h2>
<p>fdsfdsfdsfdsfdsfdsf</p>
<div id="RightListfastPan">
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">sitconsectetuer adipiscing</a></li>
<li><a href="#">Aliquam vehiculaqu.</a></li>
<li><a href="#">Maecenas id dui a turpis</a></li>
<li><a href="#">venenatis</a></li>
</ul>
</div>
<div id="RightListnextPan">
<ul>
<li><a href="#">Lorem ipsum dolor</a></li>
<li><a href="#">sitconsectetuer adipiscin</a></li>
<li><a href="#">Aliquam vehiculaqu.</a></li>
<li><a href="#">Maecenas id dui a turpis</a></li>
<li><a href="#">venenatis</a></li>
</ul>
</div>
</div>
</div>
<div id="footermainPan">
<div id="footerPan">
<ul>
<li><a href="">Accueil</a>|</li>
<li><a href="">f</a> |</li>
<li><a href="">f</a>|</li>
<li><a href="">f</a> |</li>
<li><a href="">f</a> |</li>
<li><a href="">f</a> |</li>
<li><a href="">f</a></li>
</ul>
<p class="copyright">Copyright © 2008 <a href="index.html">test.fr</a> Tous droits réservés</p>
</div>
</div>
</body>
</html>




style.css

Citation :

/* CSS Document */
body{padding:0px; margin:0px; background:url(images/mainbg.gif) 0 0 repeat-x #fff; color:#666; font:14px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;}
div, p, ul, h2, img{
padding:0px;
margin:0px;
text-align: justify;
}
ul{list-style-type:none;}
a{background:#fff; color:#000; text-decoration:none;}
a:hover{background:#fff; color:#666; text-decoration:underline;}

/*----TOP PANEL----*/
#topPan{width:778px; height:87px; position:relative; margin:0 auto;}
#topPan #ImgPan{width:229px; height:52px; background:#fff; color:#666; position:absolute; top:35px; left:0px; padding:0 0 0 35px;}
#topPan #ImgPan img{width:201px; height:52px;}


#topPan ul{width:468px; height:32px; position:absolute; top:43px; right:45px;}
#topPan ul li{width:78px; height:32px; float:left;}
#topPan ul li a{width:76px; height:32px; display:block; background:url(images/topmenu-normal.jpg) 0 0 no-repeat #F5F4F4; color:#666; text-decoration:none; font-size:12px; font-weight:bold; text-align:center; line-height:32px; margin:0 2px 0 0;}
#topPan ul li a:hover{background:url(images/topmenu-hover.jpg) 0 0 no-repeat #F5F4F4; color:#fff; text-decoration:none;}

#topPan ul li.home{background:url(images/topmenu-hover.jpg) 0 0 no-repeat #F5F4F4; color:#fff; text-decoration:none; font-size:12px; font-weight:bold; text-align:center; line-height:32px;}
/*----/TOP PANEL----*/
/*----BODY PANEL----*/
#bodyPan{
width:689px;
position:relative;
margin:0 auto;
text-align: justify;
}
#bodyPan p.toptextpadding{
padding:25px 0 0;
text-align: justify;
}
#bodyPan p span{background:#fff; color:#D20039;}
#bodyPan p.more{width:81px; height:22px; display:block; margin:0 0 0 606px; background:url(images/more-bg.gif) 0 0 no-repeat;}
#bodyPan p.more a{width:70px; height:22px; display:block; background:url(images/arrow1.gif) 1% 60% no-repeat; line-height:22px; text-decoration:none; padding:0 0 0 11px;}
#bodyPan p.more a:hover{background:url(images/arrow2.gif) 1% 60% no-repeat; text-decoration:none;}
/*----Body Middle Panel----*/
#bodyMiddlePan{width:689px; position:relative; margin:0 auto;}
/*----Middle Left Panel----*/
#MiddleLeftPan{width:232px; float:left;}
#MiddleLeftPan p{
padding:14px 0 0;
line-height:18px;
text-align: justify;
}

#MiddleLeftPan p.largegraytext{
font-size:18px;
text-align: justify;
}

#MiddleLeftPan p.more{width:81px; height:22px; display:block; margin:15px 0 0 145px; background:url(images/more-bg.gif) 0 0 no-repeat; padding:0px;}
#MiddleLeftPan p.more a{width:70px; height:22px; display:block; background:url(images/arrow1.gif) 1% 60% no-repeat; line-height:22px; text-decoration:none; padding:0 0 0 11px;}
#MiddleLeftPan p.more a:hover{background:url(images/arrow2.gif) 1% 60% no-repeat; text-decoration:none;}

#MiddleLeftPan p.chat{width:232px; height:70px; padding:14px 0 36px;}
#MiddleLeftPan p.chat a{width:232px; height:70px; display:block; background:url(images/24hours.gif) 0 0 no-repeat; text-indent:-20000px;}
#MiddleLeftPan p.chat a:hover{background:url(images/24hours.gif) 0 0 no-repeat; text-indent:-20000px;}

#MiddleLeftPan h2{width:210px; height:50px; display:block; background:url(images/icon1.jpg) 100% 0 no-repeat #fff; color:#D20039; border-bottom:1px dashed #BDB9B9; font-size:24px; line-height:22px; padding:0 20px 0 0;}
#MiddleLeftPan h2 span{background:#fff; color:#545454; font-weight:bold; font-size:14px; text-transform:uppercase;}

/*----/Middle Left Panel----*/
/*----Middle Right Panel----*/
#MiddleRightPan{width:384px; float:left; padding:0 0 0 73px;}
#MiddleRightTopPan{width:384px; height:203px; background:url(images/image1.jpg) 0 100% no-repeat; padding:29px 0 0; margin:0 0 40px 0;}

#MiddleRightTopPan p.fresh{width:108px; height:24px; display:block; margin:0 0 0 208px; font-size:20px; text-transform:uppercase;}
#MiddleRightTopPan p.business{width:170px; height:20px; display:block; margin:0 0 0 210px; background:url(images/dotline.gif) 0 100% repeat-x #fff; color:#6BB600; font-size:27px; text-transform:uppercase; text-align:right;}

#MiddleRightPan h2{
width:380px;
height:20px;
background:url(images/dotline.gif) 0 100% repeat-x #fff;
color:#060;
font-size:24px;
}
#MiddleRightPan p{padding:8px 0 0;}

#RightListfastPan{width:200px; float:left; padding:10px 0 0;}
#RightListfastPan ul{width:200px;}
#RightListfastPan ul li{width:200px; height:20px; float:left;}
#RightListfastPan ul li a{width:190px; line-height:20px; background:url(images/bullet.gif) 0 6px no-repeat #fff; color:#666; text-decoration:underline; padding:0 0 0 18px;}
#RightListfastPan ul li a:hover{background:url(images/bullet-hover.gif) 0 6px no-repeat #fff; color:#000; text-decoration:underline;}

#RightListnextPan{width:180px; float:left; padding:10px 0 0;}
#RightListnextPan ul{width:180px;}
#RightListnextPan ul li{width:180px; height:20px; float:left;}
#RightListnextPan ul li a{width:160px; line-height:20px; background:url(images/bullet.gif) 0 6px no-repeat #fff; color:#666; text-decoration:underline; padding:0 0 0 18px;}
#RightListnextPan ul li a:hover{background:url(images/bullet-hover.gif) 0 6px no-repeat #fff; color:#000; text-decoration:underline;}

/*----/Middle Right Panel----*/

/*----Footer Panel----*/
#footermainPan{background:url(images/footerbg.gif) 0 0 repeat-x #F4F4F4; color:#212121; position:relative; margin:0 auto; height:133px; clear:both;}
#footerPan{width:689px; position:relative; margin:0 auto; font:12px/15px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:normal; padding:15px 0 0;}

#footerPan ul{
width:600px;
height:20px;
position:relative;
margin:0 auto;
}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#212121; background:#F4F4F4; text-decoration:none;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan ul.templateworld{width:190px; background:#F4F4F4; color:#212121; display:block; position:relative; margin:0 auto; }
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#F4F4F4; display:block; color:#212121; text-decoration:none; padding:0px;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:300px; background:#F4F4F4; color:#212121; position:absolute; left:200px; margin:0 auto;}

#footerPanhtml{width:64px; height:19px; display:block; position:absolute; top:73px; left:280px;}
#footerPanhtml a{width:59px; height:18px; background:#fff; color:#6A6A6A; border:1px solid #B6B6B6; display:block; position:absolute; top:0px; left:0px; line-height:19px; text-align:center; font-weight:bold; text-transform:uppercase; text-decoration:none;}
#footerPanhtml a:hover{background:#D2D0D0; color:#353427; text-decoration:none;}

#footerPancss{width:64px; height:19px; display:block; position:absolute; top:73px; left:350px;}
#footerPancss a{width:49px; height:18px; background:#fff; border:1px solid #B6B6B6; color:#6A6A6A; display:block; position:absolute; top:0px; left:0px;line-height:19px; text-transform:uppercase; font-weight:bold; text-align:center; text-decoration:none;}
#footerPancss a:hover{background:#D2D0D0; color:#353427; text-decoration:none;}


/*----MenuDeroulant----*/

#menuDeroulant{ width: 468px; height:32px; list-style-type: none; margin: 0 auto; padding: 0; border: 0; position: relative; top: 43px; z-index:2; right: -112px;}
#menuDeroulant #ImgPan{width:229px; height:52px; background:#fff; color:#666; position:absolute; top:35px; left:0px; padding:0 0 0 35px;}
#menuDeroulant #ImgPan img{width:201px; height:52px;}

#menuDeroulant li{ float: left; margin: 0; padding: 0 ; border: 0;}
#menuDeroulant .sousMenu{ list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant .sousMenu li{ float: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant li{float: left; width: 78px; margin: 0; padding: 0; border: 0;}
#menuDeroulant li a:link, #menuDeroulant li a:visited{ display: block; height: 1%; color: #FFF; background:url(images/topmenu-normal.jpg) 0 0 no-repeat #F5F4F4; color:#666; text-decoration:none; font-size:12px; font-weight:bold; text-align:center; line-height:32px; margin:0 2px 0 0;}
#menuDeroulant li a:hover { background:url(images/topmenu-hover.jpg) 0 0 no-repeat #F5F4F4; color:#fff; text-decoration:none;}}
#menuDeroulant li a:active { background:url(images/topmenu-hover.jpg); }
#menuDeroulant .sousMenu li a:link,
#menuDeroulant .sousMenu li a:visited{ display: block; color: #000; margin: 0; border: 0; text-decoration: none; background: transparent url("fondTR.png" ) repeat; background-color:#f2f2f2;}
#menuDeroulant .sousMenu li a:hover{ background-image: none; background-color: #F2462E;}
#menuDeroulant .sousMenu li{ float: none; margin: 0; padding: 0; border: 0; width: 78px; border-top: 1px solid transparent; border-right: 1px solid transparent;}
#menuDeroulant .sousMenu{ display: none; list-style-type: none; margin: 0; padding: 0; border: 0;}
#menuDeroulant li:hover > .sousMenu { display: block; }




Testé sous IE, aucun problème mais sous firefox, quand j'affiche un des sous menus, le texte et le logo ce retrouvent en milieu de page.

Merci de votre aide






Répondre
Liens sponsorisés
Inscrivez-vous ou connectez-vous pour masquer ceci.
Oneilus   27-12-2008 à 16:37:16
- 0 +

Personne n'a une idée ? :o

Répondre à Oneilus
Créer un nouveau sujet Répondre
Tom's Guide > Forum > Programmation > [XHTML] probleme menu
Aller à :

Il y a 1494 utilisateurs connus et inconnus. Pour voir la liste des connectés connus, cliquez ici.

Plan du forum
Forum Bestofmedia ©
2000-2009 Bestofmedia Group
Page générée en 0,194 secondes
Attention

Vous allez répondre sur un sujet resté inactif pendant plus de 6 mois.
Assurez-vous d'apporter des éléments nouveaux à la discussion avant de poursuivre.

Répondre Annuler
Liens