28220 sujets

CSS et mise en forme, CSS3

Positionnement d'un block central - pb sous IE

Bonjour,

Je suis en train de créer un site internet pour un laboratoire scientifique de ma fac. J'ai un petit problème pour positionner le block central où se trouveront toutes les informations.
Je vous explique: J'ai un header, un footer, et entre les deux un menu à gauche et le block d'informations à droite. Le problème, est que je souhaiterais descendre legerement le block d'information pour ne pas qu'il chevauche le logo (cf photo).
upload/703-pbIE.jpg

Voilà une partie "interessante" de mon code:
HTML:

<html>
<head>
</head>
<body>
	<div id="conteneur">
		<div id="banniere">
			<img src="./images2/titre.png" />	
			<img id="logo" src="./images2/logo.gif" />
		</div>
		<ul id="base_menu">
			<li>Plan d'acc&egrave;s</li>
			<li>Lien Rapide 2</li>		  
			<li>Lien Rapide 3</li>
			<li>Lien Rapide 4</li>
		</ul>
		<div id="left_menu">
			<img src="images2/logo_univ_littoral.png" style="margin-bottom:10px" />
			<ul>
				<li class="titre1">accueil</li>
				<li class="titre2">Le LASL</li>
				<li>Pr&eacute;sentation</li>
				<li>Organigramme</li>
				<li>Equipes de recherche</li>
				<li>Formations</li>
				<li>Rapport d'activit&eacute;</li>
				<li class="titre2">Plan d'acc&egrave;s</li>
				<li class="titre2">Annuaire</li>
				<li class="titre2">Publications</li>
				<li class="titre1">Autres liens></li>
				<li class="titre1">Intranet</li>
			</ul>
		</div>
		<div id="contenu">
			<?php 
				//Tout ceci est géré avec un include.......	
			?>
		</div>
		<div id="bottom">
			(c) 2005 tous droits r&eacute;serv&eacute;s LASL
		</div>
	</div>
</body>
</html>


CSS:

#conteneur { /* bloc "page complète"*/
	position: absolute;
	left: -375px;
	top: 0px;
	width: 750px;
	margin-left: 50%;
	margin-right: 50%;
	FONT-FAMILY: verdana, arial, sans-serif;
	min-height: 580px;
}
#bottom { /* Pied de page */
	width: 100%;
	height: 16px;
	border-top: #000000 dotted 1px;
	background: #666699;
	color: #FFFFFF;
	bottom: 50%;
	font-size: 12px;
	text-align: center;
}
#left_menu  { /* Menu gauche */
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	left: 0px;
	top: 82px;
	position: absolute;
	display: block;
	padding-top: 10px;
	font-size: 12px;
	border-right: #FF9900 1px solid;
}
#left_menu ul {
}
#left_menu li {
}
#left_menu li a {
}
#left_menu .titre1 {
}
#left_menu .titre2 {
}
#left_menu .titre1 a, #left_menu .titre2 a{
}
#contenu {
	position: relative;
	/*left: 150px;*/
	/*top: 30px;*/
	width: 590px;
	/*margin-left: 150px;*/
	/*margin-top: 30px;*/
	font-size: 12px;
	margin-bottom: 10px;
	padding-left: 10px;
	min-height: 390px;
	border-left: #FF9900 1px solid;
	color: #330066;
}

Petite explication:
Si dans mon id="contenu", je met left et top, mon footer se retoruve un peu caché par mon "contenu". Par contre, il se decale vers le bas si j'utilise margin-left et margin-top. Malheureusement, le margin-top ne fonctionne pas sous internet explorer...

Auriez-vous une solution à me présenter pour pallier à ce problème.

En éspérant ne pas avoir été trop long...

MERCI d'avance
Sujet clos
Aller à