Sujet Précédent Sujet Suivant

[XHTML] Menu deroulant

Frenzey Messages postés 17 Date d'inscription mardi 31 août 2004 Statut Membre Dernière intervention 28 décembre 2008 - 28 déc. 2008 à 11:22
kohntark Messages postés 3705 Date d'inscription lundi 5 juillet 2004 Statut Membre Dernière intervention 27 avril 2012 - 31 déc. 2008 à 16:22
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:




<!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>

<li>Accueil</li>

<li>1

<li>f</li>

<li>f</li>

<li>f</li>

<li>f</li>

<li>f</li>

</li>

<li>2</li>

<li>f</li>

<li>f</li>

</li>

<li>3</li>

<li>4</li>

<li>5</li>

tretgtrthrthrhryrrrrhrthrthrtrhrthrthrthry-tryutryryrtrttethrytrte'&quot;t'etet(etretretre

dfgfesfvsffvegrerthrtr

read more

lalz

...!

&nbsp;

fdsdsfdsfdsfdsf

lire la suite

titre.

fdsfdsfdsfdsfds

lire la suite

24 hours chat

fresh for

business

fdsfdsfdsfdsfdsf

fdsfdsfdsfdsfdsfdsf

<li>Lorem ipsum dolor</li>

<li>sitconsectetuer adipiscing</li>

<li>Aliquam vehiculaqu.</li>

<li>Maecenas id dui a turpis</li>

<li>venenatis</li>

<li>Lorem ipsum dolor</li>

<li>sitconsectetuer adipiscin</li>

<li>Aliquam vehiculaqu.</li>

<li>Maecenas id dui a turpis</li>

<li>venenatis</li>

<li>Accueil|</li>

<li>f |</li>

<li>f|</li>

<li>f |</li>

<li>f |</li>

<li>f |</li>

<li>f</li>

Copyright © 2008 test.fr Tous droits réservés

</html>









style.css




/* 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

1 réponse

Réponse 1 / 1
kohntark Messages postés 3705 Date d'inscription lundi 5 juillet 2004 Statut Membre Dernière intervention 27 avril 2012 30
31 déc. 2008 à 16:22
Salut,

J'avais testé un peu, de mémoire c'est le width de "#menuDeroulant{ width: 468px; height:32px;" qui pose problème.
En tous ca le fait de le virer ramène les onglets vers la gauche de ?? pixels et ton problème n'existe plus.
Etant donné la complexité de ton css il faudrait un peu de temps pour déboguer ça.
Je soupçonne un problème de float qqpart.
Essaie de ne conserver que le menu et les 2/3 balises qui suivent. Concrétise tes éléments avec un border-style=solid, ça facilitera le debug.

J'essaierai de te filer un coup de main si tu reviens avec plus d'infos.

Cordialement,

Kohntark -
0

Discussions similaires

menu en c
sebz10 -
decricri62 -

4 réponses
comment créer un sous menu
msi79 -
msi79 -

8 réponses
creer un menu deroulant dynamique avec "noms dynamiques"
cs_visman -
Bul3 -

3 réponses
Liste déroulante et récupération du contenu dans un input
Utilisateur anonyme -
rekaia_3459 -

28 réponses
Récupérer variable d'un menu déroulant.
DarkSchneider -
cba -

5 réponses
Rejoignez-nous