Hello !
Voilà, j'ai essayé de résumé le max dans le titre. Donc quand le menu se déroule, le reste de la page (le corps en dessous ainsi qu'une partie à gauche) se décale vers le bas d'après la hauteur du menu.
J'ai essayé des positions relatives et absolues, des z-index... rien n'y fait.
Une idée ?
PS: rien à voir avec mon site dans le lien WWW en bas de page
Modifié par crane (26 May 2006 - 13:12)
Voilà, j'ai essayé de résumé le max dans le titre. Donc quand le menu se déroule, le reste de la page (le corps en dessous ainsi qu'une partie à gauche) se décale vers le bas d'après la hauteur du menu.
J'ai essayé des positions relatives et absolues, des z-index... rien n'y fait.
Une idée ?
PS: rien à voir avec mon site dans le lien WWW en bas de page
#corpsex {
width: 800px;
margin: 0px auto;
text-align: left;
padding-bottom: 20px;
}
#info {
position: relative;
top: 0px;
left: 0px;
width: 150px;
font-size: 11px;
z-index: 1;
}
#corps {
position: relative;
top: 50px;
float: right;
width: 600px;
font-size: 11px;
z-index: 1;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: relative;
top: 20px;
left: 200px;
width: 600px;
z-index:4;
}
#menu dl {
float: left;
width: 120px;
font-size: 11px;
z-index:4;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #660099;
border: 1px solid gray;
margin: 1px;
color: #FFFFFF;
z-index:4;
}
#menu dd {
background-color: #6633FF;
width: 20px;
z-index:4;
display: none;
}
#menu li {
text-align: left;
background-color: #6633FF;
width: 100px;
padding-left: 20px;
z-index:4;
}
<div id="corpsex">
<div id="menu">
<dl>
<dt onmouseover="javascript:montre();"><a onclick="loadXMLDoc('news.html')" href="#" title="News">News</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a onclick="loadXMLDoc('administration.html')" href="#" title="Administration">Administration</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu3');">Info. parents</a></dt>
<dd id="smenu3" onmouseover="javascript:montre('smenu3');" onmouseout="javascript:montre('');">
<ul>
<li><a onclick="loadXMLDoc('infop.html')" href="#">Infos</a></li>
<li><a onclick="loadXMLDoc('horaire.html')" href="#">Horaire</a></li>
<li><a onclick="loadXMLDoc('plan.html')" href="#">Plan</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onmouseover="javascript:montre();"><a onclick="loadXMLDoc('regles_vie.html')" href="#" title="Règles de vie">Règles de vie</a></dt>
</dl>
<dl>
<dt onmouseover="javascript:montre('smenu4');">Liens</dt>
<dd id="smenu4" onmouseover="javascript:montre('smenu4');" onmouseout="javascript:montre('');">
<ul>
<li><a href="#">Liens 1</a></li>
<li><a href="#">Liens 2</a></li>
<li><a href="#">Liens 3</a></li>
</ul>
</dd>
</dl>
</div>
<div id="corps">
<br /><br /><br /><br /><img src="images/photo_main.jpg" alt="CO Sécheron" width="600" height="218" border="0">
</div>
<div id="info">
<table width="150" border="0" align="left">
<tr>
<td style="background-color: #CC00FF" align="left"><font color="#FFFFFF" size="3"><b> Infos </b></font>
</td>
</tr>
<tr>
<td align="left">
<font size="2" color="#483D8B">
<b>Horaire du secrétariat :<br /></b></font><br />
<b>Lu-Ma :</b><br />
7h30 - 12h15<br />
13h15 - 17h00<br /><br />
<b>Mer :</b><br />
7h30 - 12h15<br />
13h15 - 15h45<br /><br />
<b>Je-Ve :</b><br />
7h30 - 12h15<br />
13h15 - 17h00
</td>
</tr>
<tr>
<td>
<table width="150px">
<tr style="background-color: #CC00FF">
<td align="left"><font color="#FFFFFF" size="3"><b> Evènement</b></font>
</td>
</tr>
<tr>
<table>
<tr>
<td colspan="2"><a href="http://wwwedu.ge.ch/sem/production/marathon/introduction.html" target="_blank"><img src="images/logos/livre.jpg" alt="logo SN" width="50" border="0"></a> </td>
<td valign="middle"><font size="1" color="#483D8B"><b>Marathon de la lecture</b></font><img src="images/logos/new04.gif" alt="Hot news" /> </td>
</tr>
</table>
</tr>
</table>
</td>
</tr>
</table>
</div>
</div>
Modifié par crane (26 May 2006 - 13:12)