Bonjour, j'aimerais bien que quelqu'un m'explique le lien de parenté en un drop down menu dans le header et une bullet list dans mon container. C'est pas évident car je n'arrive pas à séparer les 2 afin d'avoir des bullets dans ma liste mais ils sont invisible dans le menu du header.
Merci!
Francis.
<!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=UTF-8" />
<title>Peinture INOTECH</title>
<style>
body {
background-position:center;
background-repeat:repeat-y;
text-align:center;
margin: 10px auto;
color: #666;
font: normal 11px Arial, Helvetica, sans-serif;
}
.header {
margin-left:auto;
margin-right:auto;
width:100%;
background-color: ;
}
.footer {
margin-top:12px;
margin-left:auto;
margin-right:auto;
width:100%;
}
a {
color: #333;
}
#nav {
margin:10px 20px 15px 20px;
height: 20px;
background: #798A84; /* for non-css3 browsers */
width: 470px;
}
#nav li {
margin: 5px 15px 5px 15px;
padding: 0 0 8px;
float: left;
position: relative;
}
/* main level link */
#nav a {
font-weight: normal;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 5px;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
color: #444D49
}
/* sub levels link hover menu déroulant*/
#nav ul li:hover a, #nav li:hover li a {
font-weight: normal;
background: #;
border: none;
color: #444D49;
}
#nav ul a:hover {
color: #fff !important;
}
/* level 2 list */
#nav ul {
background: #798A84; /* for non-css3 browsers */
display: none;
margin: 0;
padding: 0;
width: 260px;
position: absolute;
top: 25px;
left: 0;
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
}
/* level 3+ list */
#nav ul ul {
left: 100px;
top: -50px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
}
#nav ul li:last-child > a {
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html
#nav {
display: block;
}
* html #nav {
height: 1%;
}
li:hover a { background: #798A84; }
li:hover li a:hover { background: #A5BCB3; }
.menu li {
display: block;
position: relative;
float: left;
text-decoration:none;
}
object
{
width:435px;
height:500px;
border:solid 0px #000000;
}
.Style1 {font-size: 13px}
.Style2 {font-size: 15px; }
.Style3 {
font-size: 18px;
font-weight: bold;
color: #787878;
}
.Style5 {font-size: 15px; color: #999999; }
bul.li { font-size: 15px; color: #999999; text-align:left;}
bul.ul { font-size: 15px; color: #999999; text-align:left;}
</style>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}
//]]>
</script>
</head>
<body>
<br />
<div class="header">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="447" rowspan="2" bgcolor="#798A84"><img src="images/header.jpg" width="448" height="125" /></td>
<td width="553" height="57" align="center" valign="bottom" bgcolor="#798A84">
<table width="502" height="24" border="0" cellpadding="0" cellspacing="0"><tr>
</table></td>
</tr>
<tr>
<td align="center" valign="bottom" bgcolor="#798A84">
<ul id="nav">
<li class"menu"><a href="">À PROPOS DE NOUS</a></li>
<li align="left"><a href="">SERVICES & RÉALISATIONS</a>
<ul>
<li class"menu"><a href="">RÉSIDENTIEL</a></li>
<li class"menu"><a href="">INSTITUTIONNEL & COMMERCIAL</a></li>
<li class"menu"><a href="">INDUSTRIEL</a></li>
<li class"menu"><a href="">PLANCHER DE BÉTON</a></li>
</ul>
</li>
<li class"menu" ><a href="">CONTACT</a> </li>
</ul>
</td>
</tr>
</table>
</div>
<br />
<div class="conteneur">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="435">
<div id="one">
<object id="foo" name="foo" type="text/html" data="industriel/index.html"></object>
</div>
</td>
<td width="16"> </td>
<td width="549" valign="top"><p align="left" class="Style2"><br />
<span class="Style3">INDUSTRIEL</span></p>
<p align="left" >
<ul class="bul">
<li class="bul">Milk</li>
<li class="bul">Eggs</li>
<li class="bul">Cheese</li>
<li class="bul">Vegetables</li>
<li class="bul">Fruit</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="footer">
<img src="images/footer.jpg" />
</div>
</body>
</html>
Merci!
Francis.
<!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=UTF-8" />
<title>Peinture INOTECH</title>
<style>
body {
background-position:center;
background-repeat:repeat-y;
text-align:center;
margin: 10px auto;
color: #666;
font: normal 11px Arial, Helvetica, sans-serif;
}
.header {
margin-left:auto;
margin-right:auto;
width:100%;
background-color: ;
}
.footer {
margin-top:12px;
margin-left:auto;
margin-right:auto;
width:100%;
}
a {
color: #333;
}
#nav {
margin:10px 20px 15px 20px;
height: 20px;
background: #798A84; /* for non-css3 browsers */
width: 470px;
}
#nav li {
margin: 5px 15px 5px 15px;
padding: 0 0 8px;
float: left;
position: relative;
}
/* main level link */
#nav a {
font-weight: normal;
color: #e7e5e5;
text-decoration: none;
display: block;
padding: 8px 5px;
}
/* main level link hover */
#nav .current a, #nav li:hover > a {
color: #444D49
}
/* sub levels link hover menu déroulant*/
#nav ul li:hover a, #nav li:hover li a {
font-weight: normal;
background: #;
border: none;
color: #444D49;
}
#nav ul a:hover {
color: #fff !important;
}
/* level 2 list */
#nav ul {
background: #798A84; /* for non-css3 browsers */
display: none;
margin: 0;
padding: 0;
width: 260px;
position: absolute;
top: 25px;
left: 0;
}
/* dropdown */
#nav li:hover > ul {
display: block;
}
#nav ul li {
float: none;
margin: 0;
padding: 0;
}
#nav ul a {
font-weight: normal;
}
/* level 3+ list */
#nav ul ul {
left: 100px;
top: -50px;
}
/* rounded corners for first and last child */
#nav ul li:first-child > a {
}
#nav ul li:last-child > a {
}
/* clearfix */
#nav:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
html
#nav {display: block;
}
* html #nav {
height: 1%;
}
li:hover a { background: #798A84; }
li:hover li a:hover { background: #A5BCB3; }
.menu li {
display: block;
position: relative;
float: left;
text-decoration:none;
}
object
{
width:435px;
height:500px;
border:solid 0px #000000;
}
.Style1 {font-size: 13px}
.Style2 {font-size: 15px; }
.Style3 {
font-size: 18px;
font-weight: bold;
color: #787878;
}
.Style5 {font-size: 15px; color: #999999; }
bul.li { font-size: 15px; color: #999999; text-align:left;}
bul.ul { font-size: 15px; color: #999999; text-align:left;}
</style>
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
// written by: Coothead
function updateObjectIframe(which){
document.getElementById('one').innerHTML = '<'+'object id="foo" name="foo" type="text/html" data="'+which.href+'"><\/object>';
}
//]]>
</script>
</head>
<body>
<br />
<div class="header">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="447" rowspan="2" bgcolor="#798A84"><img src="images/header.jpg" width="448" height="125" /></td>
<td width="553" height="57" align="center" valign="bottom" bgcolor="#798A84">
<table width="502" height="24" border="0" cellpadding="0" cellspacing="0"><tr>
</table></td>
</tr>
<tr>
<td align="center" valign="bottom" bgcolor="#798A84">
<ul id="nav">
<li class"menu"><a href="">À PROPOS DE NOUS</a></li>
<li align="left"><a href="">SERVICES & RÉALISATIONS</a>
<ul>
<li class"menu"><a href="">RÉSIDENTIEL</a></li>
<li class"menu"><a href="">INSTITUTIONNEL & COMMERCIAL</a></li>
<li class"menu"><a href="">INDUSTRIEL</a></li>
<li class"menu"><a href="">PLANCHER DE BÉTON</a></li>
</ul>
</li>
<li class"menu" ><a href="">CONTACT</a> </li>
</ul>
</td>
</tr>
</table>
</div>
<br />
<div class="conteneur">
<table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="435">
<div id="one">
<object id="foo" name="foo" type="text/html" data="industriel/index.html"></object>
</div>
</td>
<td width="16"> </td>
<td width="549" valign="top"><p align="left" class="Style2"><br />
<span class="Style3">INDUSTRIEL</span></p>
<p align="left" >
<ul class="bul">
<li class="bul">Milk</li>
<li class="bul">Eggs</li>
<li class="bul">Cheese</li>
<li class="bul">Vegetables</li>
<li class="bul">Fruit</li>
</ul>
</td>
</tr>
</table>
</div>
<div class="footer">
<img src="images/footer.jpg" />
</div>
</body>
</html>