A voir également:
- Pb affichage site avec Internet Explorer
- Telecharger internet explorer - Télécharger - Navigateurs
- Internet explorer 8 - Télécharger - Navigateurs
- Site de telechargement - Guide
- Internet explorer 9 - Télécharger - Navigateurs
- Explorer patcher - Télécharger - Personnalisation
2 réponses
/* CSS Document */
body {
background: #42afdc url("images/html-bg.gif") repeat-x;
padding: 0px;
margin: 0px;
xbackground:fixed;
background-attachment:fixed;
color: #333333; font-style:normal; font-variant:normal; font-weight:normal; line-height:170%; font-size:70%; font-family:Verdana
}
.ContenuPage { width:1024px; margin-left:auto; margin-right:auto; overflow:hidden; }
#en_tete
{
width: 880px;
height:154px;
background: url("images/banniere-sousse.jpg") no-repeat center top;
background-repeat: no-repeat;
margin-bottom: 11px;
margin: auto;
}
#lang{
float:left;
margin-left:10px;
margin-top:25px;
}
#menu ul
{
padding:0px;
width: 885px;
margin: 0 auto;
list-style-type: none;
text-align:center;
letter-spacing: normal;
}
#menu li
{
margin: auto ;
padding: 0 ;/* affichage horizontal */
float: left ; /*pour ne pas qu'ils (li) s'empilent les uns sur les autres, on déclare les différents élément flottants à gauche ,ce qui va permettre aux li suivants d'aller se mettre... à droite*/
border: 1px solid #006699 ;
}
#menu li a /*le grand menu*/
{
/* float: left ;*/
font-size: 11px;
background: #3399CC; /*bleu comme l'arriere plan*/
display:block; /*va permettre de donner une largeur fixe et identique à chaque li*/
width: 175px ;
color: #FFFFFF ;
padding: 2px 0 ;
text-decoration: none ; /* non souligné*/
}
#menu li a:hover /* les lien du grand menu*/
{
color: #030676 ;
background: #E1C75B ;
}
#menu li ul a /*le sous menu*/
{
background: #D7F5FF;
color: #714F39;
font-size: 11px;
text-align: left;
}
#menu li ul a:hover /*les lien des sous menu*/
{
background: #DEC58F ;
color: #000000;
}
#menu ul li ul
{
display:none;/*Pour faire disparaître les sous-items, on rajoute un display:none à la sous-liste (on lit en remontant : le ul inclus dans le li du ul du cadre id="menu") */
width: 175px;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
margin-left:0 ;
background: #ffffff ;
}
#menu li ul li {
color:#000000;
}
#pt-menu{
width:180px;
height:222px;
background : url('images/pt-menu.png') no-repeat;
margin-top:120px;
padding-top:0px;
}
#pt-menu h3{
text-align: left;
color:#ffffff;
padding-left:10px;
padding-top:1px;
font-size: 10px;
font-weight: bold;
font-style: normal;
font-variant: normal;
}
#pt-menu li{
list-style-image: url('images/163.gif');
list-style-position: inside;
margin-left:-38px;
font-size: 11px;
font-family: Verdana, Arial, Helvetica, sans-serif;
white-space: pre;
margin-top:3px;
}
#pt-menu li a{
text-decoration: none;
}
#pt-menu li a:hover{
color:#C29A3D;
text-decoration: underline;
}
#corps{
background : url('images/arrondiCorp.png') no-repeat;
width: 640px;
height: 1193px;
float: left;
margin:auto;
margin-top:-605px;
margin-left:190px;
}
#commune{
width:180px;
height:374px;
background:url('images/commune.png') no-repeat;
margin-top:10px;
}
#commune h3{
padding-top:3px;
padding-left:5px;
text-align: left;
font-weight: bold;
font-style: normal;
color: #FFFFFF;
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
#animPerle{
padding-top:20px;
padding-left:30px;
}
#imgPerle{
padding-left:30px;
}
#animBrochure{
padding-left:30px;
padding-top:20px;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <!--<base href="http://www.commune-sousse.gov.tn" />--> <title>le nouveau site</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=8" /> <link rel="stylesheet" media="screen" type="text/css" title="design" href="nouvelPage.css"> <script language="JavaScript" type="text/JavaScript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v4.01 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); if(!x && d.getElementById) x=d.getElementById(n); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //--> </script> </head> <body onload="MM_preloadImages('images/button_eng_over.gif','images/button_arb_over.gif')"> <div class="ContenuPage"> <!--entete--> <div id="en_tete"></div> <!--fin de l'entete--> <div id="menu"> <ul> <li><a href="# ">Accueil</a> <ul> <li><a href="#">Contactez-nous</a></li> <li><a href="#">--</a></li> </ul> </li> <li><a href="# ">Présentation de la ville </a> <ul> <li><a href="#">Situation Géographique</a></li> <li><a href="#">Histoire de la ville</a></li> <li><a href="#">Sites touristiques </a></li> <li><a href="#"> La ville en chiffres</a></li> <li><a href="#"> Coopération internationale</a></li> </ul> </li> <li><a href="# "> Présentation de la mairie </a> <ul> <li><a href="#">Date de création</a></li> <li><a href="#">Arrandissement Municipaux</a></li> <li><a href="#">Conseil municipal</a></li> <li><a href="#">Conseil municipal des enfants</a></li> <li><a href="#">Services municipaux</a></li> </ul> </li> <li><a href="# ">Réalisations </a></li> <li><a href="# ">Relations avec les citoyens</a></li> </ul> </div> <div id="lang"> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Im-eng','','images/button_eng_over.gif',1)"><img src="images/button_eng.gif" name="Im-eng" width="72" height="30" border="0" id="Im-eng" /></a> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Im-ar','','images/button_arb_over.gif',1)"><img src="images/button_arb.gif" name="Im-ar" width="70" height="30" border="0" id="Im-ar" /></a> </div> <div id="pt-menu"> <h3>Menu</h3> <ul> <li><a href="#">Accueil</a></li> <li><a href="#">Informaion locales</a></li> <li><a href="#">Féstivités</a></li> <li><a href="#">Prix</a></li> <li><a href="#">Mon Permis de Batir</a></li> </ul> </div> <div id="commune"> <h3>A propos de la commune</h3> <div id="animPerle"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="110" height="46"> <param name="movie" value="images/Txt-Perle-fr.swf" /> <param name="quality" value="high" /> <embed src="images/Txt-Perle-fr.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="100" height="36"></embed></object> </div> <div id="imgPerle"> <img src="images/coquillages011.gif" width="108" height="59" /> </div> <div id="animBrochure"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload2.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="115" height="173"> <param name="movie" value="images/brochureFR.swf" /> <param name="quality" value="high" /> <embed src="images/brochureFR.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="115" height="173"></embed></object> </div> </div> <!--corp--> <div id="corps"> <div align="center"> <br> <iframe src="lien.htm"frameborder="0" width="550" height="600" name="iframe"></iframe> </div> </div> <div align="center"> <!--fin du corps--> <!--partie gauche--> </div> <div></div> <!--fin de la partie gauche--> <!--pied de page--> <div></div> <!--fin du pied de page--> </div> </body> </html>
