Problème pour centrer menu horizontal déroulant

Question

thieb03

28 Jun 2011 à 18:41

Bonjour, j'ai cherché sur le site et dans le forum comment centrer un menu horizontal, mais je suis perdu ! Voila un essai de ce que j'essaye de faire : http://www.thieb03linux.fr/indexsauvegarde+test.html Ne pas tenir compte du contenu c'est un fichier de test, le site en ligne est à une autre adresse
En fait je suis perdu avec le css, je voudrai que le menu horizontal soit centré .

html {
  background-position:  center center;
  background-attachment: fixed;
}
body {
  background-position:  center center;
  background-image: url(backgroundxxx.jpg);
  min-width: 1120px;
}
div#header {
  background-color: transparent;
  background-position: center bottom;
  background-image: url(backgroundxxx.jpg);
  font-size: 10pt;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
h1 {
  border:  none;
  background-image: url(backgroundxxx.jpg);
  background-position: left top;
  font-size: 26pt;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  text-decoration: none;
  background-repeat: repeat;
}
div#colonne1 {
  border:  none;
  margin: auto;
  overflow: visible;
  background-repeat: repeat;
  background-position: center bottom;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-bottomright: 1em;
  background-color: #fbfbfb;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomleft: 1em;
  font-size: 10pt;
  float: left;
  visibility: visible;
  clear: left;
  width: 167px;
}
div#colonne2 {
  border:  none;
  background-color: #fbfbfb;
  background-repeat: repeat-x;
  background-position: left bottom;
  width: 167px;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomright: 1em;
  -moz-border-radius-bottomleft: 1em;
  margin-top: 0px;
  margin-left: 0px;
  font-size: 10pt;
  float: right;
  max-height: 1636px;
  min-height: 1005px;
}
div#global {
  background-image: url(beige015.gif.png);
  font-size: 11pt;
}
div#centre {
  margin-right: 175px;
  margin-left: 175px;
  background-position: right center;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomleft: 1em;
  padding-left: 10px;
  background-image: url(beige015.gif.png);
  font-weight: normal;
  background-repeat: repeat;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-bottomright: 1em;
  padding-right: 10px;
  font-style: normal;
}
table {
  border-collapse: collapse;
  width: 90%;
}
th, td {
  border: 1px solid black;
  width: 20%;
}
td {
  text-align: center;
}
caption {
  font-weight: bold;
}
div#footer {
  border-style: none;
  border-color: -moz-use-text-color;
  background-color: transparent;
  background-image: url(backgroundxxx.jpg);
  background-repeat: repeat;
  background-position:  center center;
  speak: normal;
  font-size: 10px;
  margin-right: -11px;
  margin-left: -11px;
  margin-bottom: -38px;
}
.pd_menu_01 {
  border: 1px solid #004080;
  padding: 0;
  background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
  margin-right: 0;
  margin-bottom: 0;
  float: left;
  color: #ffcc00;
  width: 100%;
}
.pd_menu_01 a, .pd_menu_01 a:visited {
  font-family: Arial,Helvetica,sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 12px;
  color: #ffcc00;
  background-color: #0000a0;
  text-decoration: none;
}
.pd_menu_01 ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #ffcc00;
}
.pd_menu_01 ul li {
  border-left: 1px solid #004080;
  border-right: 1px solid #004080;
  float: left;
  position: relative;
  z-index: auto ! important;
  color: #ffcc00;
}
.pd_menu_01 ul li a {
  padding: 0 10px;
  background: #0000a0 url(purecssmenu-com/images/btn411.jpg) repeat scroll 0% 50%;
  color: #ffcc00;
  float: none ! important;
  display: block;
  height: 35px;
  line-height: 30px;
  text-decoration: none;
}
.pd_menu_01 ul li ul {
  border:  none;
  background: #0000a0 none repeat scroll 0% 50%;
  display: none;
  color: #ffcc00;
  width: 1px;
}
.pd_menu_01 ul li:hover a {
  background-color: #008000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li:hover ul {
  display: block;
  position: absolute;
  z-index: 999;
  top: 29px;
  margin-top: 1px;
  left: 0;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a {
  border-left: 1px solid #004080;
  border-bottom: 1px solid #004080;
  padding: 0px 10px;
  display: block;
  width: 12em;
  height: 35px;
  line-height: 1.3em;
  margin-left: -1px;
  background-color: #0000ff;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a:hover {
  background-color: #ca0000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li a:hover {
  background-color: #008000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li a:hover ul {
  display: block;
  width: 12em;
  position: absolute;
  z-index: 999;
  top: 29px;
  left: 0;
}
.pd_menu_01 ul li ul li a:visited {
  background-color: #0000ff;
  color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a {
  border-left: 1px solid #004080;
  border-bottom: 1px solid #004080;
  padding: 4px 16px;
  display: block;
  width: 12em;
  height: 1px;
  line-height: 1.3em;
  background-color: #0000ff;
  color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a:hover {
  background-color: #ca0000;
  text-decoration: none;
  color: #ffff00;
}

.pd_menu_01 {
border: 1px solid #004080;
padding: 0;
background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
margin-right: 0;
margin-bottom: 0;
float: left;
color: #ffcc00;
width: 100%;
}
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family: Arial,Helvetica,sans-serif;
font-style: normal;
font-weight: bold;
font-size: 12px;
color: #ffcc00;
background-color: #0000a0;
text-decoration: none;
}
.pd_menu_01 ul {
margin: 0;
padding: 0;
list-style-type: none;
color: #ffcc00;
}
.pd_menu_01 ul li {
border-left: 1px solid #004080;
border-right: 1px solid #004080;
float: left;
position: relative;
z-index: auto ! important;
color: #ffcc00;
}
.pd_menu_01 ul li a {
padding: 0 10px;
background: #0000a0 url(purecssmenu-com/images/btn411.jpg) repeat scroll
0% 50%;
color: #ffcc00;
float: none ! important;
display: block;
height: 35px;
line-height: 30px;
text-decoration: none;
}
.pd_menu_01 ul li ul {
border: none;
background: #0000a0 none repeat scroll 0% 50%;
display: none;
color: #ffcc00;
width: 1px;
}
.pd_menu_01 ul li:hover a {
background-color: #008000;
text-decoration: none;
color: #ffff00;
}
.pd_menu_01 ul li:hover ul {
display: block;
position: absolute;
z-index: 999;
top: 29px;
margin-top: 1px;
left: 0;
color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a {
border-left: 1px solid #004080;
border-bottom: 1px solid #004080;
padding: 0px 10px;
display: block;
width: 12em;
height: 35px;
line-height: 1.3em;
margin-left: -1px;
background-color: #0000ff;
color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a:hover {
background-color: #ca0000;
text-decoration: none;
color: #ffff00;
}
.pd_menu_01 ul li a:hover {
background-color: #008000;
text-decoration: none;
color: #ffff00;
}
.pd_menu_01 ul li a:hover ul {
display: block;
width: 12em;
position: absolute;
z-index: 999;
top: 29px;
left: 0;
}
.pd_menu_01 ul li ul li a:visited {
background-color: #0000ff;
color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a {
border-left: 1px solid #004080;
border-bottom: 1px solid #004080;
padding: 4px 16px;
display: block;
width: 12em;
height: 1px;
line-height: 1.3em;
background-color: #0000ff;
color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a:hover {
background-color: #ca0000;
text-decoration: none;
color: #ffff00;
}


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta name="msvalidate.01" content="593E9A7CB46136FCC0C31A566F76169C" />
<title>thieb 03 mandriva linux</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta content="thieb03" name="author" />
<meta name="description"
content="découverte de linux mandriva et de l'open source, aide et tuto,fonds d'ecran,humour ,dernières news et actualite" />
<link rel="SHORTCUT ICON" href="favicon.ico" />
<meta name="google-site-verification"
content="IEXfN06mB98aZhlnsUaJed8Myz_vISaL4M4NZgAaR6k" />
<meta name="y_key" content="84d0836c3cd3d52f" />
<meta name="alexaVerifyID" content="ONuwC6HLlHxxFdJ2DrFgchVukro" />
<meta name="msvalidate.01" content="9A2F68FCE2D95F1555D031495FEDCBC8" />
<meta name="alexaVerifyID" content="n4X-QWw-2bC2bGVuH0Tx3e2gJ3w" />
<meta name="y_key" content="95fa68a80b76ed91" />
<meta name="keywords"
content="linux mandriva, open source, wallpapers, fonds d ecran, humour linux, dernières news linux et open source, tutoriels, aide, webmaster, logiciels open source, applications open source, slide show, diaporama, zenphoto, kompozer, libre" />
<link rel="alternate" type="application/atom+xml" title="Feed"
href="http://page2rss.com/rss/7d68b0f2b1378faafd3bf14bc75cc32d" />
<link rel="stylesheet" href="style1.css" type="text/css" />
</head>
<body>
<?php include_once("analyticstracking.php") ?>
<script language="JavaScript" type="text/javascript"
src="http://webmasters.abondance.com/actu-abondance.php">
</script>
<div id="header">
<div style="text-align: center;"><big style="font-weight: bold;"><br />
</big> <big style="font-weight: bold;"><br />
</big>
<h1 style="color: rgb(255, 204, 0);"><span style="font-style: italic;"><span
style="font-weight: bold;"><img style="width: 50px; height: 50px;"
alt="" src="28739-mandriva-logo_371f6a85ae43c220b9b4915e929b4b54.png" /><img
style="width: 48px; height: 49px;" alt="" src="mandriva-tux_normal.gif" /></span></span>thieb
03
mandriva linux actualité<img style="width: 48px; height: 49px;" alt=""
src="mandriva-tux_normal.gif" /><img style="width: 50px; height: 50px;"
alt="" src="28739-mandriva-logo_371f6a85ae43c220b9b4915e929b4b54.png" /></h1>
<span style="color: rgb(255, 204, 102);">
</span><span style="color: rgb(255, 204, 102);">
<div class="pd_menu_01" align="center">
<ul>
<li>
<div><a href="http://www.thieb03linux.fr/">Accueil et News</a></div>
</li>
</ul>
<ul>
<li>
<div><a
href="http://www.thieb03linux.fr/aide%20et%20tuto%20thieb%2003.html">Aide
et Tuto</a></div>
</li>
</ul>
<ul>
<li>
<div><a href="http://www.thieb03linux.fr/humour.html">Humour Linux</a></div>
<ul>
<li><a href="http://www.thieb03linux.fr/zenphoto/humour%20image/">en
images</a> <br />
<br />
</li>
<li><a href="http://www.thieb03linux.fr/humoursuite.html">Blagues
Linux</a> <br />
<br />
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.thieb03linux.fr/videoslinux.html">Videos Linux</a>
</li>
</ul>
<ul>
<li><a href="http://www.thieb03linux.fr/wallpaperslinux.html">Wallpapers
Linux</a>
<ul>
<li><a
href="http://www.thieb03linux.fr/zenphoto/%20fonds%20d%20ecran%201024x768%20et%201280x1024/">differentes
resolutions</a> <br />
<br />
</li>
<li><a
href="http://www.thieb03linux.fr/zenphoto/fonds%201920x1200/">1920x1200</a>
<br />
<br />
</li>
<li><a href="http://www.thieb03linux.fr/zenphoto/linux%20girls/">Linux
girls</a> <br />
<br />
</li>
<li><a
href="http://www.thieb03linux.fr/zenphoto/mandriva%20girls/">Mandriva
girls</a> <br />
<br />
</li>
</ul>
</li>
</ul>
<ul>
<li><a href="http://www.thieb03linux.fr/detente.html">Detente apres
Linux</a> </li>
</ul>
<ul>
<li><a href="http://www.thieb03linux.fr/partenaires.html">Partenaires</a>
</li>
</ul>
</div>
<div class="c33" id="colonne1">
<div style="text-align: center;"><span
style="color: rgb(255, 204, 102);"><br />
<img style="width: 55px; height: 55px;" class="c15" alt=""
src="thieb03100.jpg" /><br />
</span></div>
<div style="text-align: center;" class="c32"><span
style="color: rgb(255, 204, 102);"><span
style="color: black; font-weight: bold;">Sites amis</span><br />
<br />
<a class="c18" href="http://www.fredmoy.fr">Fredmoy</a><a class="c18"
href="http://www.fredmoy.fr"><br />
</a><br class="c19" />
<a href="http://bestfreewallpapers.net">Bestfreewallpapers.net</a><br />
<br class="c19" />
<small><br style="font-weight: bold;" />
<span style="color: black; font-weight: bold;">OUTILS POUR<br />
WEBMASTERS</span></small><br style="color: black;" />
<br />
<a class="c18" href="http://www.alsacreations.com/">Alsacréations</a><br />
<br />
<a class="c21" href="http://www.siteduzero.com/">Le site du
zero</a><br />
<br class="c24" />
<a class="c21" href="http://www.webrankinfo.com/">Webrankinfo</a><br />
<br class="c24" />
<a class="c21" href="http://www.rapidsitemap.com/">Rapidesitemap</a><br />
<br class="c24" />
<a class="c21" href="http://www.zenphoto.org/">Zenphoto</a><br />
<br />
<a class="c26" href="http://audit.abondance.com/">Abondance</a><br />
<br />
<a href="http://www.framasoft.net/rubrique2.html" rel="tag">framasoft</a><br />
<br class="c27" />
<a class="c26" href="http://cooltext.com/">Cooltext</a><br />
<br class="c27" />
<a class="c26" href="http://www.rankspirit.com/indexfr.php">rankspirit</a><br />
<br class="c27" />
<a class="c26" href="http://www.google.fr/ads/" rel="tag">Google
Adsense</a><br />
<br class="c27" />
<a class="c26" href="http://www.w3.org/">W3C</a><br />
<br class="c27" />
<a href="http://users.skynet.be/mgueury/mozilla/" rel="tag">HTML
validator</a><br />
<br class="c28" />
</span>
<h3 style="color: black;"><small>sites linux à
consulter</small><br />
</h3>
<a class="c26" href="http://www.pcinpact.com/s/linux.htm">PC
Impact</a><br />
<br class="c27" />
<a class="c26" href="http://www.mandrivalinux-online.org/">MLO</a><br />
<br class="c27" />
<a class="c26" href="http://wiki.mandriva.com/fr/">wiki
Mandriva</a><br />
<br class="c27" />
<a class="c26" href="http://www.lea-linux.org/" rel="tag">Lea
linux</a><br />
<br class="c27" />
<a href="http://www2.mandriva.com/fr/" rel="tag">Mandriva</a><br />
<br />
<a href="http://blog.mageia.org/fr/" rel="tag">Blog de
Mageia</a><br />
<br />
<a href="http://mageia.org/fr/" rel="tag">Mageia</a><br />
<br />
<br />
<span style="color: black; font-weight: bold;">Autres sites
intéressants</span><br style="color: black; font-weight: bold;" />
<br />
<a href="http://www.agoravox.fr/?auteur64414"
onclick="window.open(this.href);return false;"><img
style="border: 0px solid ; width: 85px; height: 24px;" alt=""
src="http://www.agoravox.fr/squelettes/images/icone_redacteur3.gif" /></a><br />
<br />
</div>
</div>
<div id="colonne2">
<div class="c14"><br style="color: black;" />
<div style="text-align: center;">
<span style="color: black;">traduction du site</span><br />
<script language="JavaScript"
src="http://www.traducteurenligne.net/traducteurgr/flags.js"
type="text/javascript">
</script></div>
</div>
<div class="c14">
<div style="text-align: left;" class="c14">
<script type="text/javascript"
src="http://geoloc15.geovisite.com/private/geoclock.js?compte=880350782146">
</script><noscript><a
href="http://www.geovisite.com/fr/directory/informatique_logiciels.php"
target="_blank"><img alt="logiciels"
src="http://geoloc15.geovisite.com/private/geoclock.php?compte=880350782146"
border="0" /></a></noscript></div>
<noscript>Please do not change this code for a perfect
fonctionality of y</noscript></div>
<div style="text-align: center;" class="c14"><a class="c35"
href="http://www.cloudink.net/annuaire-logiciel.htm"
title="Annuaire Logiciel sur cloudink">Annuaire Logiciel</a></div>
<div class="c14">
<div style="text-align: center;"><br />
<br />
<br />
<a href="http://www.waaaouh.com/annuaire/">Annuaire de qualité :
Waaaouh !</a><br />
<br />
<!-- Begin ShinyStat code -->
<script type="text/javascript"
src="http://codice.shinystat.com/cgi-bin/getcod.cgi?USER=thieb03">

</script><noscript><a href="http://www.shinystat.com/fr" target="_top"><img
alt="classements sites"
src="http://www.shinystat.com/cgi-bin/shinystat.cgi?USER=thieb03"
border="0" /></a></noscript><br />
<!-- End ShinyStat code --><br />
<a
href="http://www.waaaouh.com/annuaire/fonds-d-ecran-et-goodies-c108-p1.html">
Waaaouh.com : Fonds d'écran et Goodies</a><br />
<br />
</div>
<div style="text-align: center;">
<script src="http://page2rss.com/button.js" type="text/javascript">
</script>
<script type="text/javascript">
page2rss_drawButton("http:\/\/page2rss.com\/rss\/7d68b0f2b1378faafd3bf14bc75cc32d",1,"actualit\u00e9 de thieb 03 mandriva linux");//
</script><noscript>RSS feed generated by <a href="http://page2rss.com/">Page2RSS</a></noscript>
<a href="http://www.supportduweb.com/topsite_vote-815.html"><img
style="border: 0px solid ; width: 58px; height: 20px;"
src="http://www.supportduweb.com/images/topsite/votez03.gif"
alt="Votez pour ce site" /></a></div>
</div>
</div>
<div class="c50" id="centre">
<div class="c14"><br />
<br />
<br />
<br />
<br />
<br />
<br />
<div style="text-align: center;">
<form action="http://www.google.fr/cse" id="cse-search-box"
name="cse-search-box">
<div><input name="cx" value="partner-pub-8174452465061303:rqp7mvc4s8i"
type="hidden" /><input name="ie" value="UTF-8" type="hidden" /> <input
name="q" size="31" type="text" /> <input name="sa" value="Rechercher"
type="submit" /></div>
</form>
<script type="text/javascript"
src="http://www.google.fr/cse/brand?form=cse-search-box&amp;lang=fr">
</script></div>
<div class="c14">
<div style="text-align: center;">
<script type="text/javascript">
//<![CDATA[
<!--
google_ad_client = "pub-8174452465061303";
/* 468x60, date de création 11/09/10 */
google_ad_slot = "4762752399";
google_ad_width = 468;
google_ad_height = 60;
//-->
//]]>
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script><br />
</div>
<br />
<br />
<div style="text-align: center; color: black;">
<h2><span class="c30">Bienvenue à tout ceux qui souhaitent
découvrir Linux et l'Open source</span></h2>
</div>
<span class="c30"><br />
</span>
<div style="text-align: center;"><!-- AddThis Button BEGIN --><a
class="addthis_button"
href="http://www.addthis.com/bookmark.php?v=250&amp;username=thieb03"><img
src="http://s7.addthis.com/static/btn/v2/lg-share-en.gif"
alt="Bookmark and Share" class="c38" height="16" width="80" /></a>
<script type="text/javascript">
//<![CDATA[
var addthis_config = {"data_track_clickback":true};
//]]>
</script>
<script type="text/javascript"
src="http://s7.addthis.com/js/250/addthis_widget.js#username=thieb03">
</script><!-- AddThis Button END --></div>
<?php $cat[] = "accueil et news thieb 03"; $cat[] ="thieb03 pages html";
include 'news/index.php';
?>.
<div id="footer">
&nbsp;<a href="http://www.xiti.com/xiti.asp?s=483534%0A%20"
title="WebAnalytics" target="_top"><br />
</a>
<div style="text-align: center;" align="justify"><span
style="color: rgb(255, 204, 0);">&nbsp;©2009 - Thieb03 - Contact
-&nbsp;</span><a style="color: rgb(255, 204, 0);" href="formulaire.html"><img
style="border: 0px solid ; width: 32px; height: 32px;"
alt="contact thieb 03" src="mail_021.gif" /></a> <span
style="color: rgb(255, 204, 0);">- Créé avec :</span> <a
style="color: rgb(255, 204, 0);" href="http://www.kompozer.net/"><img
style="border: 0px solid ; width: 80px; height: 15px;"
alt="Document made with KompoZer" src="kompozer_80x15.png" /></a></div>
</div>
</div>
</div>
<br />
<br />
</div>
</span></div>
</div>
</body>

Modifié par thieb03 (28 Jun 2011 - 18:45)

ptitvincent

29 Jun 2011 à 12:07

pas étonnant que tu soit perdu.. A ta place, je ferais un grand ménage dans mon code.

ensuite tu as des trucs comme


<ul>
<li>
<div>
<a href="http://www.thieb03linux.fr/">Accueil et News</a>
</div>
</li>
</ul>
<ul>
<li>
<div>
<a href="http://www.thieb03linux.fr/aide%20et%20tuto%20thieb%2003.html">Aide et Tuto</a>
</div>
</li>
</ul>

c'est dégoutant Smiley smile

. met un seul <ul></ul> qui englobe toutes tes li ca ne gènera pas ton menu déroulant.

thieb03

30 Jun 2011 à 18:10

a écrit :
c'est dégoutant. met un seul <ul></ul> qui englobe toutes tes li ca ne gènera pas ton menu déroulant.
ptitvincent a raison!

J'ai réessayé c'est encore loin d'être au top ! Mais ca donne ca : http://www.thieb03linux.fr/indexsauvegarde+test.html Bon maintenant je me trouve avec le texte du "div centre" centré , alors que je voudrais qu'il soit à gauche ! pfff! qu'elle galère, je sais bien que c'est en forgeant que l'on devient forgeron, mais là !
Mon nouveau css :

html {
  background-position:  center center;
  background-attachment: fixed;
}
body {
  background-position:  center center;
  background-image: url(backgroundxxx.jpg);
  min-width: 1120px;
}
div#header {
  background-color: transparent;
  background-position: center bottom;
  background-image: url(backgroundxxx.jpg);
  font-size: 10pt;
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}
h1 {
  border:  none;
  background-image: url(backgroundxxx.jpg);
  background-position: left top;
  font-size: 26pt;
  font-weight: bold;
  font-style: italic;
  text-align: center;
  text-decoration: none;
  background-repeat: repeat;
}
div#colonne1 {
  border:  none;
  margin: auto;
  overflow: visible;
  background-repeat: repeat;
  background-position: center bottom;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-bottomright: 1em;
  background-color: #fbfbfb;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomleft: 1em;
  font-size: 10pt;
  float: left;
  visibility: visible;
  clear: left;
  width: 167px;
}
div#colonne2 {
  border:  none;
  background-color: #fbfbfb;
  background-repeat: repeat-x;
  background-position: left bottom;
  width: 167px;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomright: 1em;
  -moz-border-radius-bottomleft: 1em;
  margin-top: 0px;
  margin-left: 0px;
  font-size: 10pt;
  float: right;
  max-height: 1636px;
  min-height: 1005px;
}
div#global {
  background-image: url(beige015.gif.png);
  font-size: 11pt;
}
div#centre {
  margin-right: 175px;
  margin-left: 175px;
  background-position: right center;
  -moz-border-radius-topright: 1em;
  -moz-border-radius-bottomleft: 1em;
  padding-left: 10px;
  background-image: url(beige015.gif.png);
  font-weight: normal;
  background-repeat: repeat;
  -moz-border-radius-topleft: 1em;
  -moz-border-radius-bottomright: 1em;
  padding-right: 10px;
  font-style: normal;
  margin-top: 35px;
}
table {
  border-collapse: collapse;
  width: 90%;
}
th, td {
  border: 1px solid black;
  width: 20%;
}
td {
  text-align: center;
}
caption {
  font-weight: bold;
}
div#footer {
  border-style: none;
  border-color: -moz-use-text-color;
  background-color: transparent;
  background-image: url(backgroundxxx.jpg);
  background-repeat: repeat;
  background-position:  center center;
  speak: normal;
  font-size: 10px;
  margin-right: -11px;
  margin-left: -11px;
  margin-bottom: -38px;
}
.pd_menu_01 {
  border: 1px solid #004080;
  margin: 0 auto;
  padding: 0;
  background: #0000a0 url(backgroundxxx.jpg) repeat scroll center;
  color: #ffcc00;
  width: 1029px;
}
.pd_menu_01 a, .pd_menu_01 a:visited {
  font-family: Arial,Helvetica,sans-serif;
  font-style: normal;
  font-variant: normal;
  font-weight: bold;
  font-size: 12px;
  line-height: normal;
  font-size-adjust: none;
  font-stretch: normal;
  color: #ffcc00;
  background-color: #0000a0;
  text-decoration: none;
}
.pd_menu_01 ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: #ffcc00;
}
.pd_menu_01 ul li {
  border-left: 1px solid #004080;
  border-right: 1px solid #004080;
  float: left;
  position: relative;
  z-index: 1;
  color: #ffcc00;
  width: 145px;
}
.pd_menu_01 ul li a {
  padding: 0 10px;
  background: #0000a0 url(purecssmenu-com/images/btn411.jpg) repeat scroll 0% 50%;
  color: #ffcc00;
  display: block;
  height: 35px;
  line-height: 30px;
  text-decoration: none;
  width: 135px;
}
.pd_menu_01 ul li ul {
  border:  none;
  background: #0000a0 none repeat scroll 0% 50%;
  display: none;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover a {
  background-color: #008000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li:hover ul {
  display: block;
  position: absolute;
  z-index: 999;
  top: 29px;
  margin-top: 1px;
  left: 0;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a {
  border-left: 1px solid #004080;
  border-bottom: 1px solid #004080;
  padding: 0 10px;
  display: block;
  width: 12em;
  height: 35px;
  line-height: 35px;
  margin-left: -1px;
  background-color: #0000ff;
  color: #ffcc00;
}
.pd_menu_01 ul li:hover ul li a:hover {
  background-color: #ca0000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li a:hover {
  background-color: #008000;
  text-decoration: none;
  color: #ffff00;
}
.pd_menu_01 ul li a:hover ul {
  display: block;
  width: 12em;
  position: absolute;
  z-index: 999;
  top: 29px;
  left: 0;
}
.pd_menu_01 ul li ul li a:visited {
  background-color: #0000ff;
  color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a {
  border-left: 1px solid #004080;
  border-bottom: 1px solid #004080;
  padding: 4px 16px;
  display: block;
  width: 12em;
  height: 1px;
  line-height: 1.3em;
  background-color: #0000ff;
  color: #ffffff;
}
.pd_menu_01 ul li a:hover ul li a:hover {
  background-color: #ca0000;
  text-decoration: none;
  color: #ffff00;
}

Je me demande si j'ai besoin de tout ca ! Une âme charitable svp please !

thieb03

2 Jul 2011 à 09:30

Le sujet est résolu, j'ai adapté le menu horizontal sur mon site, merci.
http://www.thieb03linux.fr

Sujet clos

CSS et mise en forme, CSS3

Problème pour centrer menu horizontal déroulant