Accueil > Forum > > > > [XHTML] Menu deroulant
 [XHTML] Menu deroulant
dimanche 28 décembre 2008 à 11:22:03 |
[XHTML] Menu deroulant
Frenzey
|
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>
<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'"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"> </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
/* 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
|
|
mercredi 31 décembre 2008 à 16:22:10 |
Re : [XHTML] Menu deroulant
kohntark
|
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 -
|
|
Cette discussion est classée dans : text, width, height, background, color
 Répondre à ce message
 Sujets en rapport avec ce message
Expression réguliere [ par Barseize ]
BonjourJ'aimerais faire une recherche de valeur dans un document puis remplacer cette valeur par une autre.Voila un petit exemple : J'iamerais pour le
background dans un "input type=text" [ par kaking ]
je comprend pas pourquoi mais je reussi pas avec ce fichier css .bg_form{BORDER:#66FF00 1px solid; PADDING-LEFT: 7px; COLOR:#FF3399; BACKGROUND-IMAG
aligner 2 calque [ par ahlemlo ]
bonjourje veus bien aligner le calque de contenu1 avec le calque de contenu2j'arrive pa à faire ça malgré j'ai mis aider moi svp<br
CSS - Alignement de divs horizontalement - différence IE7 & FF [ par smoke ]
Salut tout le monde ;) Je ne parviens pas à aligner horizontalement mes divs sous Firefox. Voici ce que a donne sous IE7: [img]http://www.netside-v2
Click sur une image pour ouvrir un video flv [ par issam250d ]
Click sur une image pour ouvrir un video flv Au fait je possède une page ou il ya les actualités de mon petite site web sous forme d'image, et d'un le
barre de défileement horizontale trop longue [ par BenamourJr ]
Je viens de positionner quelques éléments de mon design via CSS et j'ai remarqué que depuis la barre de défilement horizontale est trop longue par rap
Arriere-plan image changeante on refresh adapte a l ecran du client [ par pearlp ]
Bonsoir ! Voiala ca fais 5 jours que j'essaie de trouver un scripte qui me permetterai d avoir une nouvelle image arriere plan a chaque rafraichissem
diference entre serveur interne et orange [ par lululala ]
Salut j'ai une page d appelle index html avec une page css qui et très sympas sur mon local host Et très pas du tous pareille sur serveur orange ell
aligner un tableau [ par Ecux ]
Bonjour, je cherche depuis ce matin comment aligner un tableau horizontalement. Normalement si il est contenu dans une div dont le text-align vaut ce
Demande d'aide index.php [ par IrX ]
Bonjour je me permet de venir vers vous,car étant débutant complètement je rencontre un souci.en effet ont ma transmis un code php pour restreindre l
 Livres en rapport
|
Derniers Blogs
 ROSLYN FLUENT APIS: ROSLYNHELPER NUGET PACKAGEROSLYN FLUENT APIS: ROSLYNHELPER NUGET PACKAGE par Matthieu MEZIL
Si vous utilisez Roslyn et que vous vous voulez vous simplifier le code du code rewriter, je vous conseille d'installer mon NuGet package RoslynHelper ....(read more) ...
Cliquez pour lire la suite de l'article par Matthieu MEZIL POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDNPOUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante
Quelle est le point commun entre : Microsoft il y a 10 ans et Apple aujourd'hui ? Réponse: avoir une politique de protocoles propriétaires et fermés :) Car pour rappel (si si je vous assure c'est important de le rappeler), la majorité des spécifications e...
Cliquez pour lire la suite de l'article par neodante JOYEUX ANNIVERSAIRE NIXJOYEUX ANNIVERSAIRE NIX par ebartsoft
Souhaitons un bon et joyeux anniversaire à notre hôte à tous, Nix.
Je ne le répéterais jamais assez mais sans lui rien ne serait possible. Il défit en permanence les lois de la gravité et comme il le dit si bien, si tu lui fais confiance ça devra...
Cliquez pour lire la suite de l'article par ebartsoft IMAGINE CUP 2012, MAKE A SIGN EN FINALEIMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg
Voilà qui est fait, la nouvelle est officielle ! L'équipe belge "Make a Sign" va au pays des kangourous défendre son projet dans la catégorie Software Design. http://www.imaginecup.com/CompetitionsContent/Competition/WorldwideFinalists.aspx V...
Cliquez pour lire la suite de l'article par junarnoalg KINECT 1.5 IS OUT !KINECT 1.5 IS OUT ! par Vko
La version 1.5 du Kinect For Microsoft vient tout juste de sortir ! Plein de nouveautés: Tracking de squelette en Near Mode Détection en position assise Détection faciale avec un SDK dédié Documentation et des guideline (enfin) Un out...
Cliquez pour lire la suite de l'article par Vko
Logiciels
 sDEVIS-FACTURES vlPRO (8.1.0.3)SDEVIS-FACTURES VLPRO (8.1.0.3)sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa... Cliquez pour télécharger sDEVIS-FACTURES vlPRO 974 Application Server (12.2.4.6)974 APPLICATION SERVER (12.2.4.6)Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc... Cliquez pour télécharger 974 Application Server vPicture (1.4.2.1)VPICTURE (1.4.2.1)Avec vPicture, hébergez vos images facilement et rapidement.
vPicture est un utilitaire simple, ... Cliquez pour télécharger vPicture Easy-Planning (2.2.1.6)EASY-PLANNING (2.2.1.6)Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au... Cliquez pour télécharger Easy-Planning COM-BACKUP (2.0)COM-BACKUP (2.0)
COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...
Cliquez pour télécharger COM-BACKUP
|