Tout d’abord un grand merci a la communauté "codes-sources"
J'ai un problème avec un menu déroulant dans lequel je souhaite intégré des images "type boutons" mon souci ce situ sur un onglet dans lequel je souhaite intégrer un sous-menu mon souci cela décale les autres onglets sur la droite et je n'arrive pas a y intégrer des images.
J'ai récupéré un code css sur le net(je ne me souvient plus ou je m'en excuse auprès de l'auteur) pour les boutons de premiers niveau que j'essai d'adapter en vain pour ma partie sous menu.
Pourriez vous y jeter un coup d'oeil car je ne m'en sort pas
Un grand merci a vous tous.
Voici pour la partie HTML :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Language" content="Fr" />
<title>www.joart.fr</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
</head>
<body>
<div id="head"> </div>
<div id="barre_nav">
<div id="navigation">
<ul>
<li><div id="espace2"></div></li>
<li><a href="index.html" id="btnHome" title="Accueil">electro inc homepage</a></li>
<li><div id="espace1"></div></li>
<li><a href="portfolio.html" id="btnPortfolio" title="Portfolio">electro inc homepage</a>
<ul class="sousmenu">
<li><a href="photo.html" id="Smenuphoto" title="Photo">Photo</a></li>
<li><a href="print.html" id="Smenuprint" title="Print">Print</a></li>
<li><a href="web.html" id="Smenuweb" title="Web">Web</a></li>
</ul>
</li>
<li><div id="espace1"></div></li>
<li><a href="competences.html" id="btnCompetences" title="Compétences">electro inc homepage</a></li>
<li><div id="espace1"></div></li>
<li><a href="quisuisje.html" id="btnQuisuisje" title="Qui suis je ?">electro inc homepage</a></li>
<li><div id="espace1"></div></li>
<li><a href="contact.html" id="btnContact" title="Contact">electro inc homepage</a></li>
<li><div id="espace2"></div></li>
</ul>
</div>
</div>
<div id="content"></div>
<div id="content_text">
<table width="937" height="327" border="0" cellspacing="0">
<tr>
<td width="50" rowspan="2" bgcolor="#000000"> </td>
<td colspan="2" bgcolor="#111c30"><blockquote> </blockquote> </td>
<td width="50" rowspan="2" bgcolor="#000000"> </td>
</tr>
<tr>
<td height="128" colspan="2" bgcolor="#111c30"><blockquote>
<p align="left"> </p>
<p align="left"> </p>
</blockquote></td>
</tr>
</table>
</div>
<div id="content"></div
>
<div align="center" id="footer"> [ <a href="index.html">Accueil</a> ] [ <a href="book.html">Portfolio</a> ] [ <a href="competences.html">Compétences</a> ] [ <a href="qui_suis_je.html">Qui suis-je</a> ] [ <a href="Contact.html">Contact</a> ]<br />
Tous droits réservés <a href="http://www.joart.fr" target="_parent">www.joart.fr</a> 2010</div>
</body>
</html>
Pour la partie CSS:
a:link {
color: #ffffff;
}
a:visited {
color: #ffffff;
}
a:hover {
color: #00F;
}
a:active {
color: #ffffff;
}
body {
background-color: #ffffff;
}
DIV {
margin-left: auto;
margin-right: auto;
width:937px;
text-align:center;
font-size:16px;
}
body {
text-align:center;
}
#head {
height:88px;
width:937px;
}
/* Barre navigation*/
#barre_nav {
position: relative;
width: 937px;
margin: auto;
}
#espace1 {
width: 24px;
height: 40px;
position: relative;
background-color:#000000;
}
#espace2 {
width: 83px;
height: 40px;
position: relative;
background-color:#000000;
}
#navigation {
position: relative;
width: 937px;
height: 40px;
left: auto;
top: auto;
right: auto;
padding: 0px;
}
#navigation ul {
margin: 0;
padding: 0;
padding-left: 0px;
padding-right: 0px;
margin-right:0px;
}
#navigation ul li {
list-style: none;
float: left;
margin-top: 0px;
height: 40px;
}
#navigation ul li a {
display: block;
}
#btnHome {
width: 135px;
height: 40px;
text-indent: -10000px;
overflow: hidden;
text-decoration:none;
background: transparent url(images/barre_nav.png) no-repeat -83px 0px;
background-color: #000;
}
#btnHome:hover {
background-position: -83px -40px;
}
#btnPortfolio {
width: 135px;
height: 40px;
text-indent: -10000px;
overflow: hidden;
text-decoration:none;
background: transparent url(images/barre_nav.png) no-repeat -242px -0px;
background-color: #000;
}
#btnPhoto:hover {
background-position: -242px -40px;
}
/*debut sous menu */
#navigation .sousmenu /*----pour mon menu déroulant-------*/
{
display: none; /*------pour le faire disparaitre------*/
list-style-type: none; /*-------pas de puce-------*/
margin: 0; /*------pas de marge interne et externe ni bordure pour mettre tout le monde d'accord--------*/
padding: 0;
border: 0;
}
#navigation .sousmenu li /*-------pour ma liste de deuxième niveau-------*/
{
margin: 0;
padding: 0;
border: 0;
width: 140px; /*----------je donne une largeur à mes cellules de sous menu----------*/
border-top: 1px solid transparent; /*-----des bordures transparentes pour espacer mes cellules-----*/
border-right: 1px solid transparent;
}
#navigation .sousmenu li a /*---------pour mes liens du menu deroulant---------*/
{
display: block;
color: #FFF;
margin: 0;
border: 0;
text-decoration: none;
background-color:rgb(0, 0, 0);
background-color:rgba(0,0,0,0.5);
}
#navigation .sousmenu li a:hover /*------pour le survol du sous menu-------*/
{
background-color: rgb(18, 89, 239);
background-color: rgba(18, 89, 239, 0.8);
}
#navigation .sousmenu li a:visited { /*---------pour permmetre au visiteur de savoir sur les liens qu'il a déjà visité--------*/
background-color:rgb(227, 22, 30);
background-color:rgba(227, 22, 30, 0.5);
}
#navigation li:hover > .sousmenu { display: block; } /*------pour faire apparaitre notre sous menu au survol du menu de premier niveau------*/
#sousmenu {
list-style: none;
float: none;
margin-top: 0px;
height: 40px;
position: absolute;
}
/*fin sous menu*/
#btnCompetences {
width: 135px;
height: 40px;
text-indent: -10000px;
overflow: hidden;
text-decoration:none;
background: transparent url(images/barre_nav.png) no-repeat -401px 0px;
background-color: #000;
}
#btnCompetences:hover {
background-position: -401px -40px;
}
#btnQuisuisje {
width: 135px;
height: 40px;
text-indent: -10000px;
overflow: hidden;
text-decoration:none;
background: transparent url(images/barre_nav.png) no-repeat -560px 0px;
background-color: #000;
}
#btnQuisuisje:hover {
background-position: -560px -40px;
}
#btnContact {
width: 135px;
height: 40px;
text-indent: -10000px;
overflow: hidden;
text-decoration:none;
background: transparent url(images/barre_nav.png) no-repeat -719px -0px;
background-color: #000;
}
#btnContact:hover {
background-position: -719px -40px;
margin: inerith;
}
/*Fin Barre navigation*/
#content {
background-color:#000;
height:15px;
margin-left: auto;
margin-right: auto;
}
#content_text{
background-color:#000000;
height:auto;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 0px;
color: #ffffff;
text-align: center;
font-size:13px;
font-weight: normal;
margin-left: auto;
margin-right: auto;
}
#content_text_contenu {
background-color:#111C30;
height:327;
width:837px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
padding: 0px;
color: #ffffff;
text-align: justify;
font-size:13px;
font-weight: normal;
position:absolute;
overflow: hidden;
}
#footer {
background-color:#000000;
height:39px;
text-align: center;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: normal;
color: #FFF;
font-size: 12px;
}