28173 sujets

CSS et mise en forme, CSS3

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

#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>&nbsp;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>&nbsp;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)