Problème CSS: div ignorée si position absolu

Fermé
zibox2 Messages postés 3 Date d'inscription mardi 7 février 2012 Statut Membre Dernière intervention 30 mai 2012 - 30 mai 2012 à 22:04
donniecent Messages postés 19 Date d'inscription lundi 1 mars 2010 Statut Membre Dernière intervention 1 juin 2012 - 31 mai 2012 à 10:10
Bonjour,

Je suis débutant en CSS et j'ai le problème suivant :
Feuille HTML :

<html>
	<head>
		<link rel="stylesheet" type="text/css" href="../styles/style.css"/>
		<title>MVC - Application KeepContacts - Authentification</title>
	</head>
	<body>	
		<div id="conteneur">
			<div id="entete">
				<div id="logo">
				</div>
				<div id="banniere">
					<div id="cartoucheConnexion">
						<br/>
						<p class="alerte">Merci de vous authentifier</p>
	
					</div>
					<h1>Application Keep Contacts by Zibox</h1>
				</div>
			</div>
			<div id="lefter">
				[....]
			</div>
			<div id="contenu">
				[....]
			</div>	
		</div>	
	</body>
</html>


Voici ma feuille de style :
#conteneur{
	 background-color:white;
	 /*margin-top:10px;
	 margin-bottom:10;
	 margin-left: auto;
     margin-right: auto;*/
     position:static;
     margin-left:auto;
     margin-right:auto;
     margin-top:10px;
	 margin-bottom:10px;
	 width:994px;
	 padding:0;
	 text-align: left ;
     border: 2px solid #03114D ;	 
 }
 
 #entete{
    margin:0;
    padding:0;
    background-color:#C4D7ED;
    width:100%;
   	height:194px;
 }
 
#logo {
	float: left;
	width : 20%;
	height : 194px;
	background-color: white;
	background: url(images/contact2.jpg) no-repeat left top;
}

#banniere{
	float : left;
	width:80%;
	height : 100%;/*Taille de la partie haute de l'entete*/
}

#lefter{
    float:left;
    position:relative;
    margin:0;
    padding:0;
    border : solid 1px;
    border-color:#3A4F6F;
    border-radius:2px;
    background-color:#FFFFFF;
    width:20%;
 }

#contenu{
	 /*position:relative;*/
	 /*top:194px;*/
	 float:left;
	 margin:0em;
	 padding:1em 2em 1em 3em;/*top right bottom left*/
	 background-color: white;
	 width:65%;
	 text-align:justify;
 }


Mon probleme est le suivant (sur tous les navigateurs) : si je mets "position:absolute" pour le conteneur => Impossible de centrer horizontalement le bloc dans la page. Si je ne mets pas "position:absolute" => le bloc <div id"contenu> n'est plus affiché dans le conteneur mais à l'extérieur !!!!!!

Bref, j'ai l'impression que CSS c'est aléatoire, je suis perdu : comment le fait que la position du bloc conteneur soit absolue ou pas peut influer sur la présence des blocs dans celui-ci !!!???

Merci d'avance,

++
A voir également:

1 réponse

donniecent Messages postés 19 Date d'inscription lundi 1 mars 2010 Statut Membre Dernière intervention 1 juin 2012 27
31 mai 2012 à 10:10
Besoin du lien vers votre site internet... Merci
0