bonjour a vous
toujours en action avec mon site qui me tient tête, cette fois aurais besoin de savoir comment resoudre un problême bénin j'en suis sur,
donc le soucis en question j'ai un conteneur et differents blocs interieurs
je n'arrive pas faire en sorte que par exemple ma balise #centre prenne toute la largeur de mon conteneur
voici le code html
voici le code css
en esperant avoir une réponse de votre part
merci d'avance
toujours en action avec mon site qui me tient tête, cette fois aurais besoin de savoir comment resoudre un problême bénin j'en suis sur,
donc le soucis en question j'ai un conteneur et differents blocs interieurs
je n'arrive pas faire en sorte que par exemple ma balise #centre prenne toute la largeur de mon conteneur
voici le code html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Largeur fixe 750, header/menu haut/menu gauche/menu droite/contenu/footer.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
}
//-->
</script>
<style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="style2.css" /></head>
<body bgcolor="CCCCCC">
<div id="conteneur">
<div id="header"></div>
<div id="haut">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();" ><a href="accueil.html" title="Retour à l'accueil">Accueil</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu1');">Contact</dt>
<dd id="smenu1"onmouseover="javascript:montre('smenu1');" onmouseout="javascript:montre('');">
<ul>
<li><a href="contactSAV.html">Service Après-Vente </a></li>
<li><a href="contactScom.html">Service Commercial</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu2');">Produits</dt>
<dd id="smenu2"onmouseover="javascript:montre('smenu2');" onmouseout="javascript:montre('');">
<ul>
<li><a href="spectroscopy.html">Spectroscopie</a></li>
<li><a href="chroma.html">Chromatographie</a></li>
<li><a href="consommable.html">Consommable</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">JASCO Monde</dt>
<dd id="smenu3"onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Amérique du Nord</a></li>
<li><a href="#">Amérique Latine</a></li>
<li><a href="#">Europe</a></li>
<li><a href="#">Afrique du Nord</a></li>
<li><a href="#">Asie</a></li>
<li><a href="#">Océanie</a></li>
</ul>
</dd>
</dl>
</div>
</div>
<div id="gauche">
<div id="menugauche">
<a href="demande.html">Vos demandes</a>
<a href="evenement.html">Evenements</a>
<a href="new.html">nouveautés</a>
<a href="partenaires.html">Partenaires</a>
</div>
</div>
<div id="centre">
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
bloc centrale bloc centrale bloc centrale bloc centrale<br />
</div>
</div>
</body>
</html>
voici le code css
/* CSS Document */
body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header
{
height: 100px;
background-color: #CCCCCC;
background-image:url(image/baniere .jpg);
width:765px;
}
#haut
{
position: relative;
margin-left:auto;
margin-right:auto;
width:760px;
background-color:#FFF;
border-style: groove ;
border-top-width:medium 3em;
border-color:#CCCCCC;
}
#conteneur
{
position: relative;
width: 760px;
margin: 0 auto;
background-color:#FFF;
bottom:-80px;
}
#centre
{
width:auto;
background-color:#9999CC;
margin-left: 150px;
padding:15px;
height:450px;
border-style:groove;
border-top-width:medium 3em;
border-color:#CCCCCC;
}
#gauche
{
position: absolute;
left:0;
width: 150px;
height: 355px;
background-color:#FFFFFF;
padding-bottom:25px;
}
dl, dt, dd, ul, li
{
margin: 0;
padding: 0;
list-style-type: none;
}
#menu
{
left: 0;
z-index:100;
}
#menu dl
{
float:left;
width: 10.5em;
margin: 0 1px auto;
}
#menu dt
{
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
height:20px;
line-height:20px;
margin:2px 0;
}
#menu dd
{
position:absolute;
z-index:100;
background:#CCCCCC;
border: 1px solid gray;
}
#menu li
{
text-align: center;
background: #CCC;
font-weight:bold;
}
#menu li a, #menu dt a
{
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover
{
background: #eee;
}
a {
text-decoration: none;
color: black;
color: #222;
}
ul#menugauche
{
margin:auto;
padding:auto;
font:bold Georgia, "Times New Roman", Times, serif;
list-style-type:none;
left:50%;
}
#menugauche a
{
display:block;
margin:5px 0;
color:#000;
text-decoration:none;
line-height:25px;
width:120px;
border:1px solid #CCCCCC;
background:#CCCCCC;
text-align:center;
border-width:1px 2px 2px 1px;
border-color:#cecece #4a4a4a #4a4a4a #cecece;
border-style:solid;
}
#menugauche a:hover
{
border-width:2px 1px 1px 2px;
border-color:#4a4a4a #cecece #cecece #4a4a4a;
}
p {margin: 0 0 10px 0;}
en esperant avoir une réponse de votre part
merci d'avance